/* Publications Assistant. Palette from the Civil Air Patrol logo colors: navy #001871 and cool gray #9EA2A2. */
:root {
  --paper: #F3F4F5;     /* cool light gray */
  --surface: #FFFFFF;
  --ink: #1A2033;       /* body text, navy cast */
  --muted: #5D6262;     /* the logo gray, darkened for readable secondary text */
  --rule: #D4D7D7;      /* the logo gray, lightened */
  --navy: #001871;      /* CAP navy: citations, buttons, markers */
  --navy-tint: #E9EDF7;
  --blue: #2B4C9B;      /* links and focus */
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --col: 42rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 var(--sans);
}
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--surface); padding: .5rem .75rem; z-index: 10; }

.primary {
  background: var(--navy); color: var(--surface); border: 0; border-radius: 6px;
  padding: .7rem 1.1rem; font-weight: 600; cursor: pointer;
}
.primary:disabled { opacity: .55; cursor: progress; }
.quiet { background: none; border: 0; color: var(--blue); padding: .4rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fine { color: var(--muted); font-size: .8125rem; line-height: 1.45; margin: .5rem 0 0; }
.note { min-height: 1.5em; color: var(--muted); }

/* Sign-in */
.signin { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1.25rem; }
.signin-inner { width: 100%; max-width: 26rem; }
.wordmark {
  font-family: var(--serif); font-weight: 700; font-size: clamp(2.4rem, 9vw, 3.25rem); line-height: 1.02;
  letter-spacing: -0.015em; margin: 0 0 1.25rem; padding-left: .9rem; border-left: 6px solid var(--navy);
}
.lede { font-family: var(--serif); font-size: 1.125rem; line-height: 1.6; margin: 0 0 2rem; }
.lede p { margin: 0 0 .8rem; }
.signin-form { display: grid; gap: .6rem; }
.terms-text { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.6; margin: 0 0 1.5rem; }
.terms-text p { margin: 0 0 1rem; }
.terms-text ul { margin: 0; padding-left: 1.2em; }
.terms-text li { margin: 0 0 .6rem; }
.terms-text ul ul { margin: .5rem 0 0; padding-left: 1.2em; list-style: circle; }
.terms-text a { color: var(--blue); text-underline-offset: 3px; }
#accept { width: 100%; }
.signin-form label { font-weight: 600; }
.signin-form input {
  padding: .75rem .85rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface);
}

/* App frame */
.app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-height: 100dvh; }
.bar {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1rem; background: var(--paper); border-bottom: 1px solid var(--rule);
}
.bar .name { font-family: var(--serif); font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .scope { min-width: 0; flex: 0 1 auto; }
.icon { background: none; border: 0; padding: .35rem; cursor: pointer; display: grid; }
.icon svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.scope select {
  max-width: 100%; width: 13rem; padding: .4rem 1.8rem .4rem .6rem; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--surface); font-weight: 600; font-size: .9375rem;
}

.drawer {
  position: fixed; inset: 0 auto 0 0; width: min(20rem, 86vw); z-index: 4; background: var(--surface);
  border-right: 1px solid var(--rule); padding: 1rem; display: flex; flex-direction: column; gap: .5rem;
  transform: translateX(-102%); transition: transform .2s ease;
}
.drawer.open { transform: none; }
.side-row {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .6rem; border-radius: 8px;
  color: var(--ink); background: none; border: 0; text-align: left; font-size: .9375rem;
}
.side-row svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.new { cursor: pointer; font-weight: 600; color: var(--navy); }
.new svg { stroke: var(--navy); }
.drawer-top { display: flex; align-items: center; gap: .25rem; }
.drawer-top .new { flex: 1; min-width: 0; }
.drawer-close { flex: none; border-radius: 8px; }
.drawer-close svg { stroke: var(--muted); stroke-width: 1.8; }
.scrim { position: fixed; inset: 0; z-index: 3; background: rgba(23, 32, 51, .28); cursor: pointer; }
.search { cursor: text; background: var(--paper); border-radius: 8px; padding: .5rem .6rem; }
.search input { flex: 1; min-width: 0; border: 0; background: none; padding: 0; outline: none; }
.search:focus-within { box-shadow: inset 0 0 0 1.5px var(--blue); }
.conversations { margin: .25rem 0 .5rem; overflow-y: auto; flex: 1; }
.conversations ol { list-style: none; margin: 0 0 .5rem; padding: 0; }
.list-label { color: var(--muted); font-size: .8125rem; font-weight: 600; margin: .9rem .6rem .3rem; }
.conversations li { position: relative; }
.conversations .row {
  display: flex; align-items: baseline; gap: .5rem; width: 100%; text-align: left; background: none; border: 0;
  padding: .5rem .6rem; border-radius: 8px; cursor: pointer; line-height: 1.35;
}
.conversations .row .title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversations .row .age { flex: none; color: var(--muted); font-size: .75rem; }
/* The open chat wears the citation tabs' navy left edge */
.conversations .row[aria-current="true"] {
  background: var(--navy-tint); color: var(--navy); font-weight: 600;
  border-radius: 0 8px 8px 0; box-shadow: inset 4px 0 0 var(--navy);
}
/* ⋯ sits over the age on hover, focus, the open chat, and while its menu is open */
.more {
  position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--surface); color: var(--muted); opacity: 0;
}
.more svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.more:focus-visible, .more[aria-expanded="true"],
.conversations li:has(.row[aria-current="true"]) .more { opacity: 1; }
.conversations li:has(.row[aria-current="true"]) .more { background: var(--navy-tint); }
.more:hover { color: var(--navy); }
.conversations li:has(.more[aria-expanded="true"]) .age,
.conversations li:has(.row[aria-current="true"]) .age { visibility: hidden; }
/* Hover effects only where there is a real pointer: on touch screens iOS treats a tap that changes what's
   visible under :hover as hover only and drops the click, so ⋯ is simply always shown there. */
@media (hover: hover) {
  .new:hover, .conversations .row:hover { background: rgba(0, 24, 113, .05); }
  .conversations li:hover .more { opacity: 1; }
  .conversations li:hover .age { visibility: hidden; }
}
@media (hover: none) {
  .more { opacity: 1; }
  .conversations .age { visibility: hidden; }
}
.rename {
  width: 100%; padding: .45rem .55rem; border: 1.5px solid var(--blue); border-radius: 8px; background: var(--surface);
  font-size: .9375rem; outline: none;
}
.archived-toggle {
  display: block; margin: .9rem .6rem .3rem; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: .8125rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.conversations .row .mark { flex: none; display: grid; align-self: center; }
.mark svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mark-down { color: #8A1C1C; }
.mark-up { color: #1E6B3A; }
.mark-declined { color: var(--muted); }
.review {
  margin: .5rem 0 1rem; padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--rule);
  border-left: 6px solid var(--navy); border-radius: 0 8px 8px 0; font-size: .9375rem;
}
.review p { margin: .35rem 0; }
.share-note { color: var(--ink); }
.review-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 0; }
.review-head .mark svg { width: 18px; height: 18px; }
.review-meta { color: var(--muted); font-size: .8125rem; }
.review blockquote { margin: .5rem 0; padding: .4rem .75rem; border-left: 3px solid var(--rule); font-family: var(--serif); }
.review details { margin-top: .5rem; color: var(--muted); font-size: .8125rem; }
.review summary { cursor: pointer; }
/* Who is signed in, and the way out */
.account {
  display: flex; align-items: center; gap: .7rem; margin: 0 -1rem -1rem; padding: .85rem 1rem;
  padding-bottom: calc(.85rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule);
}
.avatar {
  flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--navy); color: var(--surface); font: 700 .9375rem/1 var(--serif); letter-spacing: .02em;
}
.who { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.who-name {
  font-weight: 600; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: none; border: 0; padding: 0; text-align: left; cursor: text; border-radius: 4px;
}
.who-name:hover { text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
.who-edit { padding: .1rem .35rem; margin: -.15rem 0 0 -.4rem; width: calc(100% + .4rem); font-weight: 600; }
.who-email { color: var(--muted); font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signout { flex: none; border-radius: 8px; padding: .45rem; }
.signout svg { width: 20px; height: 20px; stroke: var(--muted); stroke-width: 1.8; stroke-linejoin: round; }
.signout:hover { background: rgba(0, 24, 113, .06); }
.signout:hover svg { stroke: var(--navy); }
.side-msg { color: #8A1C1C; font-size: .8125rem; margin: 0 .6rem; min-height: 0; overflow-wrap: anywhere; user-select: text; }
.side-msg[data-kind="info"] { color: var(--ink); }
.side-msg:empty { display: none; }
.menu {
  position: fixed; z-index: 6; min-width: 12rem; padding: .3rem; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 10px 28px rgba(23, 32, 51, .18);
}
.menu-item {
  display: flex; align-items: center; gap: .65rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 6px;
  background: none; color: var(--ink); text-align: left; cursor: pointer; font-size: .9375rem;
}
.menu-item:hover { background: rgba(0, 24, 113, .06); }
.menu-item svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-item.danger { color: #8A1C1C; }
.menu hr { border: 0; border-top: 1px solid var(--rule); margin: .3rem .2rem; }
.no-match { color: var(--muted); font-size: .875rem; margin: .75rem .6rem; }
.current {
  font-size: .875rem; color: var(--muted); margin: 0 0 .25rem; padding-left: .6rem;
  border-left: 3px solid var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Thread */
.thread { width: 100%; max-width: var(--col); margin: 0 auto; padding: 1.25rem 1rem 1rem; }
.notice { margin: .5rem 0 0; padding: .6rem .8rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; font-size: .9375rem; }
.empty h2 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; margin: 1rem 0 .5rem; }
.empty p { color: var(--muted); margin: 0 0 1.25rem; }
.examples { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.example {
  width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: .7rem .85rem; cursor: pointer;
}

.turn { padding: 1.25rem 0 1.5rem; border-bottom: 1px solid var(--rule); }
.turn .q { font-weight: 600; margin: 0 0 .75rem; white-space: pre-wrap; overflow-wrap: anywhere; }  /* as typed */
.turn .a { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.65; overflow-wrap: anywhere; }
.turn .a p { margin: 0 0 .85em; }
.turn .a ul, .turn .a ol { margin: 0 0 .85em; padding-left: 1.3em; }
.turn .a li { margin: .2em 0; }
.turn .a h3, .turn .a h4 { font-family: var(--sans); font-weight: 700; line-height: 1.3; margin: 1.1em 0 .4em; }
.turn .a h3 { font-size: 1.0625rem; }
.turn .a h4 { font-size: 1rem; }
.turn .a > :first-child { margin-top: 0; }
.turn .a hr { border: 0; border-top: 1px solid var(--rule); margin: 1em 0; }
.turn .a code { font-size: .9em; background: var(--navy-tint); padding: 0 .25em; border-radius: 3px; }
.ref {
  font: 600 .72rem/1 var(--sans); color: var(--navy); background: none; border: 0; padding: 0 .1em;
  vertical-align: super; cursor: pointer;
}
.pending { color: var(--muted); font-style: italic; }
.searching { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .5rem 0 1rem; }
.searching .plane-loader { --size: 10rem; }
.error { color: #8A1C1C; margin-bottom: .25rem; }
.retry { font: 600 .9375rem var(--sans); }

/* Citation tabs: the memorable element */
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 0; }
.tab {
  max-width: 100%; overflow-wrap: anywhere;
  font: 600 .8125rem/1.2 var(--sans); color: var(--navy); background: var(--surface);
  border: 1.5px solid var(--navy); border-radius: 0 6px 6px 0; border-left-width: 6px;
  padding: .4rem .6rem .4rem .5rem; cursor: pointer; text-align: left;
}
.tab[aria-expanded="true"] { background: var(--navy); color: var(--surface); }
.tab .n { opacity: .75; margin-right: .3em; }
.quote {
  margin: .6rem 0 0; padding: .75rem .9rem; background: var(--navy-tint); border-left: 6px solid var(--navy);
  font-family: var(--serif); font-size: .9375rem; line-height: 1.6;
}
.quote .src { font: 600 .8125rem/1.3 var(--sans); margin: 0 0 .4rem; }
.quote .text { margin: 0; white-space: pre-line; max-height: 22rem; overflow-y: auto; }
.quote a { display: inline-block; margin-top: .55rem; font: .875rem var(--sans); color: var(--blue); }

.rate { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; margin-top: .75rem; color: var(--muted); font-size: .8125rem; }
.act {
  display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--muted); cursor: pointer;
}
.act svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.act:hover { background: rgba(0, 24, 113, .06); color: var(--navy); }
.act[aria-pressed="true"] { background: var(--navy-tint); color: var(--navy); }
.when { margin-left: .4rem; }
.rate-label { margin-left: .4rem; }
.edit-form { display: grid; gap: .5rem; margin: 0 0 .75rem; }
.edit-form textarea {
  width: 100%; resize: none; max-height: 12rem; padding: .6rem .7rem; border: 1.5px solid var(--blue); border-radius: 6px;
  background: var(--surface); line-height: 1.4; font-weight: 600;
}
.edit-actions { display: flex; align-items: center; gap: 1rem; }
.why {
  flex-basis: 100%; display: grid; gap: .6rem; margin-top: .5rem; padding: .85rem; border: 1px solid var(--rule);
  border-radius: 10px; background: var(--surface);
}
.why-title { margin: 0; font-weight: 600; color: var(--ink); font-size: .9375rem; }
.reasons { display: flex; flex-wrap: wrap; gap: .4rem; }
.reason {
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 999px;
  padding: .35rem .75rem; font-size: .8125rem; cursor: pointer;
}
.reason[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--surface); }
.why-text { width: 100%; padding: .6rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: .9375rem; }
.why-actions { display: flex; align-items: center; gap: 1rem; }

/* Ask box */
.ask {
  position: sticky; bottom: 0; z-index: 2; background: var(--paper); border-top: 1px solid var(--rule);
  padding: .75rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: end;
}
.ask > * { max-width: var(--col); }
.ask textarea {
  width: 100%; min-width: 0; resize: none; max-height: 9rem; padding: .7rem .8rem; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--surface); line-height: 1.4;
}
.ask .fine { grid-column: 1 / -1; margin: 0; }

@media (max-width: 440px) {
  .bar .name { display: none; }
  .bar .scope { flex: 1; }
  .scope select { width: 100%; }
}

@media (min-width: 960px) {
  .app { grid-template-rows: auto 1fr auto; }
  .bar { grid-column: 1 / -1; }
  #menu, .drawer-close, .scrim { display: none; }
  .drawer { position: sticky; top: 3.4rem; height: calc(100dvh - 3.4rem); transform: none; box-shadow: none; grid-row: 2 / 4; }
  .thread { grid-column: 2; }
  .app { grid-template-columns: 18rem minmax(0, 1fr); }
  .ask { grid-column: 2; justify-content: center; grid-template-columns: minmax(0, var(--col)) auto; }
  .scope select { max-width: 16rem; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none; }
}