/* inline-suggest — the suggest UI's own light palette.
 *
 * The hand-built pages and decks name their tokens differently from
 * css/site.css (--ink-1, --surface-1, ...), and several have dark themes. A UI
 * that borrowed some host tokens and fell back on others paired a dark host
 * background with dark ink. So every surface sets both its text colour and its
 * background, and reads only --isg-* custom properties, each with a literal
 * fallback. The fallbacks are site.css's light values; nothing here reads a
 * host token. Set any --isg-* property on :root to restyle the UI.
 *
 *   --isg-bg #ffffff   --isg-ink #333333     --isg-muted #8a8a8a
 *   --isg-rule #e6e6e6 --isg-surface #fafafa --isg-accent #00008b
 *   --isg-on-accent #ffffff  --isg-warn #8b0000
 *   --isg-mark #fff6c2 --isg-mark-hover #ffed96 --isg-mark-rule #e0c200
 */

.isg-bar {
  position: absolute;
  z-index: 60;
  padding: 0;
  /* Desktop: a bare wrapper around the button, which is the surface. */
  color: var(--isg-ink, #333333);
  background: var(--isg-bar-bg, transparent);
}

.isg-bar-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto !important;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  color: var(--isg-ink, #333333);
  background: var(--isg-bg, #ffffff);
  border-top: 1px solid var(--isg-rule, #e6e6e6);
  display: flex;
  justify-content: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
}

.isg-btn {
  font-family: var(--isg-mono, "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .82rem;
  line-height: 1;
  padding: 9px 13px;
  border: 1px solid var(--isg-rule, #e6e6e6);
  background: var(--isg-bg, #ffffff);
  color: var(--isg-accent, #00008b);
  cursor: pointer;
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
}

.isg-btn:hover { border-color: var(--isg-accent, #00008b); text-decoration: none; }
.isg-btn:focus-visible { outline: 2px solid var(--isg-accent, #00008b); outline-offset: 2px; }

.isg-bar .isg-btn { box-shadow: 0 1px 6px rgba(0, 0, 0, .12); }

.isg-primary { background: var(--isg-accent, #00008b); color: var(--isg-on-accent, #ffffff); border-color: var(--isg-accent, #00008b); }
.isg-primary:hover { color: var(--isg-on-accent, #ffffff); }
.isg-primary[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.isg-ghost { color: var(--isg-muted, #8a8a8a); }

/* ------------------------------------------------------------------ dialog */

.isg-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow: auto;
  border: 1px solid var(--isg-rule, #e6e6e6);
  border-radius: 3px;
  background: var(--isg-bg, #ffffff);
  color: var(--isg-ink, #333333);
  /* Native controls (textarea, scrollbars) follow this, not a dark host. */
  color-scheme: light;
  font-family: var(--isg-font, "Computer Modern Typewriter", Georgia, serif);
  padding: 20px;
}

.isg-dialog::backdrop { background: rgba(0, 0, 0, .35); }

.isg-quotelabel {
  font-family: var(--isg-mono, "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .74rem;
  color: var(--isg-muted, #8a8a8a);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 .4rem;
}

.isg-quote {
  margin: 0 0 1rem;
  padding: .5rem .8rem;
  border-left: 2px solid var(--isg-accent, #00008b);
  color: var(--isg-ink, #333333);
  background: var(--isg-surface, #fafafa);
  font-size: .95rem;
  max-width: none;
  /* A long selection must not stretch the dialog. */
  overflow-wrap: anywhere;
}

.isg-form label {
  display: block;
  font-family: var(--isg-mono, "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .78rem;
  color: var(--isg-muted, #8a8a8a);
  margin: 0 0 .9rem;
}

.isg-form textarea {
  display: block;
  width: 100%;
  margin-top: .3rem;
  padding: 8px 10px;
  font-family: var(--isg-font, "Computer Modern Typewriter", Georgia, serif);
  font-size: .95rem;
  color: var(--isg-ink, #333333);
  background: var(--isg-bg, #ffffff);
  border: 1px solid var(--isg-rule, #e6e6e6);
  border-radius: 2px;
  resize: vertical;
}

.isg-form textarea:focus-visible { outline: 2px solid var(--isg-accent, #00008b); outline-offset: -1px; }

.isg-note, .isg-warn {
  font-family: var(--isg-mono, "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .74rem;
  line-height: 1.45;
  color: var(--isg-muted, #8a8a8a);
  margin: 0 0 .9rem;
  max-width: none;
}

.isg-warn { color: var(--isg-warn, #8b0000); }

.isg-row { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }

/* ------------------------------------------------------------ annotations */

/* A highlight sits in page text, so it sets its own ink too: a light-yellow
 * mark inheriting a dark theme's light text would be unreadable. */
.isg-mark {
  background: var(--isg-mark, #fff6c2);
  color: var(--isg-ink, #333333);
  border-bottom: 1px solid var(--isg-mark-rule, #e0c200);
  cursor: pointer;
  padding: 0;
}

.isg-mark:hover { background: var(--isg-mark-hover, #ffed96); }
.isg-mark:focus-visible { outline: 2px solid var(--isg-accent, #00008b); outline-offset: 1px; }

.isg-panel {
  display: block;
  margin: .7rem 0;
  padding: .7rem .9rem;
  color: var(--isg-ink, #333333);
  background: var(--isg-surface, #fafafa);
  border: 1px solid var(--isg-rule, #e6e6e6);
  border-left: 2px solid var(--isg-mark-rule, #e0c200);
  border-radius: 2px;
}

/* Host pages style bare p, a and strong (fastlane and the decks colour every
 * <p> and <a>), which beats inheritance, so text inside the UI is set here. */
.isg-panel-comment, .isg-panel-about, .isg-drawer-head strong { color: var(--isg-ink, #333333); }
.isg-ui a:not(.isg-btn) { color: var(--isg-accent, #00008b); }

.isg-panel-comment {
  margin: 0 0 .5rem;
  font-size: .93rem;
  max-width: none;
  overflow-wrap: anywhere;
}

.isg-panel-meta {
  margin: 0 0 .5rem;
  font-family: var(--isg-mono, "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .74rem;
  color: var(--isg-muted, #8a8a8a);
  max-width: none;
}

.isg-orphan {
  font-family: var(--isg-mono, "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .76rem;
  color: var(--isg-muted, #8a8a8a);
  border-top: 1px solid var(--isg-rule, #e6e6e6);
  padding-top: .8rem;
  margin-top: 1.6rem;
}

/* The browser's own ::target-text for #:~:text= links, matched to our mark. */
::target-text { background: var(--isg-mark, #fff6c2); }

@media (prefers-reduced-motion: reduce) {
  .isg-bar, .isg-dialog { transition: none !important; animation: none !important; }
}

/* Selection UI is interactive only; it should never appear in print. */
@media print {
  .isg-ui { display: none !important; }
  .isg-mark { background: none; border-bottom: 1px solid var(--isg-muted, #8a8a8a); }
}

/* The standing invitation under each post. */
.suggest-hint {
  font-family: var(--isg-mono, "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .78rem;
  color: var(--isg-muted, #8a8a8a);
  border-top: 1px solid var(--isg-rule, #e6e6e6);
  padding-top: .9rem;
  margin-top: 2rem;
}

.isg-count {
  display: block;
  text-align: right;
  font-family: var(--isg-mono, "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .7rem;
  color: var(--isg-muted, #8a8a8a);
}

/* ------------------------------------------- drawer and pill (pages, decks) */

.isg-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483000;
  width: min(380px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--isg-bg, #ffffff);
  color: var(--isg-ink, #333333);
  color-scheme: light;
  font-family: var(--isg-font, "Computer Modern Typewriter", Georgia, serif);
  border-left: 1px solid var(--isg-rule, #e6e6e6);
  box-shadow: -2px 0 14px rgba(0, 0, 0, .12);
}

/* It takes focus on open; the ring belongs on its controls, not the panel. */
.isg-drawer:focus { outline: none; }

.isg-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--isg-rule, #e6e6e6);
  font-family: var(--isg-mono, "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .85rem;
}

.isg-drawer-body {
  position: relative;
  flex: 1;
  overflow: auto;
  padding: 12px 16px 24px;
}

.isg-drawer .isg-panel { margin: 0 0 .8rem; }
.isg-drawer .isg-current { border-left-color: var(--isg-accent, #00008b); background: var(--isg-mark, #fff6c2); }
.isg-drawer .isg-orphan { margin-top: 1rem; }

.isg-panel-about {
  margin: 0 0 .5rem;
  font-size: .85rem;
  max-width: none;
  overflow-wrap: anywhere;
}

.isg-tag {
  font-family: var(--isg-mono, "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .68rem;
  color: var(--isg-muted, #8a8a8a);
  border: 1px solid var(--isg-rule, #e6e6e6);
  border-radius: 2px;
  padding: 0 4px;
}

.isg-pill {
  position: fixed;
  right: 16px;
  z-index: 2147482000;
  font-family: var(--isg-mono, "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .8rem;
  line-height: 1;
  padding: 9px 13px;
  color: var(--isg-accent, #00008b);
  background: var(--isg-bg, #ffffff);
  border: 1px solid var(--isg-rule, #e6e6e6);
  border-radius: 999px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .15);
  cursor: pointer;
}

.isg-pill:hover { border-color: var(--isg-accent, #00008b); }
.isg-pill:focus-visible { outline: 2px solid var(--isg-accent, #00008b); outline-offset: 2px; }
.isg-pill-page { bottom: 16px; }
.isg-pill-deck { top: 16px; }

/* Keep the pill clear of the phone's fixed selection bar. */
@media (max-width: 640px) {
  .isg-pill-page { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}