/* ============================================================
   THE COLLECT WORKSHOP
   ------------------------------------------------------------
   One stylesheet. The palette is thecommonwild.org's -- cream
   stock, warm near-black, one earth accent -- because this tool
   is a place to read and write prose and it should feel like
   the rest of the site rather than like the dial.

   Kalendar is dark-first because a dial is a picture. This is
   light-first because it is a page of text.
   ============================================================ */

:root {
  --paper: #f5f1e8;
  --paper-2: #efeade;
  --paper-3: #e7e1d2;
  --ink: #211c17;
  --ink-muted: #6f665b;
  --ink-faint: #9a9084;
  --rule: #d8d1c1;
  --accent: #8a3b1e;
  --accent-deep: #6e2f17;

  /* The five parts.
     ------------------------------------------------------------
     Color cannot be the only channel. Five hues distinguishable
     enough to tell apart at a glance would fight the cream stock
     and would vanish for a color-blind reader or on a mono
     printer. So every part carries a hue AND an underline style,
     and the two always travel together. Read the underline and
     you never need the color. */
  --p-address: #8a3b1e;
  --p-ascription: #2f5d43;
  --p-petition: #33487a;
  --p-purpose: #8a6a1e;
  --p-termination: #6a3a5c;

  --measure: 38rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           "Hoefler Text", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  color-scheme: light;
}

/* The same design lit from the other side. Only the neutrals move; the five
   part colors lift just enough to hold their contrast on a dark ground.

   Written as an attribute rather than a media query, which is Kalendar's
   arrangement and for Kalendar's reason: src/theme.js resolves the system
   preference itself and always writes an explicit value, so the palette lives
   in one block instead of two that have to be kept identical. This tool needs
   JavaScript for anything at all -- the collects arrive by fetch -- so there
   is no case where the attribute goes unset and a media query would have been
   the only thing answering. With scripting off nothing renders anyway, and
   the bare :root above is a sane light default to fail into. */
:root[data-theme="dark"] {
  --paper: #171512;
  --paper-2: #1e1b17;
  --paper-3: #26221d;
  --ink: #e8e2d6;
  --ink-muted: #a49a8c;
  --ink-faint: #756c60;
  --rule: #35302a;
  --accent: #d98a63;
  --accent-deep: #e8a884;
  --p-address: #d98a63;
  --p-ascription: #7fbd97;
  --p-petition: #8fa8e0;
  --p-purpose: #d9b968;
  --p-termination: #c294b4;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 112.5%; }

body {
  margin: 0;
  padding: 1.5rem var(--gutter) 5rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* One column. Everything sits on the same two edges. */
header, main, footer { max-width: var(--measure); margin-inline: auto; }

a { color: var(--accent); }
a:hover { color: var(--accent-deep); }

h1 {
  font-size: 1.5rem; font-weight: 600; letter-spacing: .01em;
  margin: 0 0 .15rem;
}
h2 { font-size: 1.1rem; font-weight: 600; margin: 2rem 0 .5rem; }
.lede { color: var(--ink-muted); margin: 0 0 1.25rem; font-size: .95rem; }

/* --- Tabs ------------------------------------------------------------- */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--rule);
        margin: 0 0 1.25rem; }
.tabs button {
  font: inherit; font-size: .9rem; background: none; border: 0;
  border-bottom: 2px solid transparent; color: var(--ink-muted);
  padding: .45rem .7rem; cursor: pointer; margin-bottom: -1px;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] {
  color: var(--ink); border-bottom-color: var(--accent); font-weight: 600;
}
/* Pushed to the far end of the tab row. It is not a tab and must not read as
   one, so it keeps the pill shape the sub-navigation uses rather than the
   underline the tabs use. */
.tabs .themebtn {
  margin-left: auto; align-self: center;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .04em;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: .15rem .6rem; margin-bottom: .3rem;
  color: var(--ink-faint); background: none;
}
.tabs .themebtn:hover { color: var(--accent); border-color: var(--accent); }
.tabs .themebtn[aria-selected] { border-bottom-color: var(--rule); }

.subtabs { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.subtabs button {
  font: inherit; font-size: .8rem; font-family: var(--sans);
  background: var(--paper-2); border: 1px solid var(--rule);
  color: var(--ink-muted); border-radius: 999px; padding: .2rem .7rem;
  cursor: pointer;
}
.subtabs button[aria-pressed="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* --- Controls --------------------------------------------------------- */
.controls { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
            margin: 0 0 1rem; }
input[type="search"], select, textarea, input[type="text"] {
  font: inherit; font-size: .9rem; background: var(--paper-2);
  color: var(--ink); border: 1px solid var(--rule); border-radius: 3px;
  padding: .35rem .5rem;
}
input[type="search"] { flex: 1 1 12rem; min-width: 0; }
textarea { width: 100%; resize: vertical; line-height: 1.55; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

button.plain {
  font: inherit; font-size: .85rem; font-family: var(--sans);
  background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink);
  border-radius: 3px; padding: .35rem .75rem; cursor: pointer;
}
button.plain:hover { background: var(--paper-3); }
button.primary { background: var(--accent); border-color: var(--accent);
                 color: #fff; }
button.primary:hover { background: var(--accent-deep); }
button.primary[disabled] { opacity: .45; cursor: not-allowed; }

/* --- The five parts ---------------------------------------------------- */
/* Tint plus underline. The underline is the channel that survives a mono
   printer, and it is deliberately not decorative: each part gets a different
   stroke so the shape of a collect is legible without any color at all. */
.part { padding: .05em 0; border-bottom-width: 2px; }
.part-address     { color: var(--p-address);     border-bottom: 2px solid; }
.part-ascription  { color: var(--p-ascription);  border-bottom: 2px dashed; }
.part-petition    { color: var(--p-petition);    border-bottom: 2px dotted; }
.part-purpose     { color: var(--p-purpose);     border-bottom: 2px double; }
.part-termination { color: var(--p-termination); border-bottom: 1px solid;
                    opacity: .8; }

/* Dimmed by the legend filter. Still there, still readable, just out of the
   way -- the point of the filter is to see one part in its context, not to
   delete the others. */
.collect.filtered .part { color: var(--ink-faint); border-bottom-color: transparent; }
.collect.filtered .part.on { border-bottom-style: solid; }
.collect.filtered .part-address.on     { color: var(--p-address); }
.collect.filtered .part-ascription.on  { color: var(--p-ascription); }
.collect.filtered .part-petition.on    { color: var(--p-petition); }
.collect.filtered .part-purpose.on     { color: var(--p-purpose); }
.collect.filtered .part-termination.on { color: var(--p-termination); }

/* --- Legend ------------------------------------------------------------ */
.legend { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem;
          padding: .6rem; background: var(--paper-2);
          border: 1px solid var(--rule); border-radius: 4px; }
.legend button {
  font: inherit; font-size: .78rem; font-family: var(--sans);
  background: none; border: 1px solid var(--rule); border-radius: 3px;
  padding: .2rem .55rem; cursor: pointer; color: var(--ink-muted);
}
.legend button[aria-pressed="true"] { border-color: currentColor; font-weight: 600; }
.legend .swatch { display: inline-block; width: .8em; height: .8em;
                  margin-right: .35em; vertical-align: -.05em; border-radius: 2px; }
.legend .hint { flex-basis: 100%; font-size: .75rem; font-family: var(--sans);
                color: var(--ink-faint); margin: .15rem 0 0; }

/* --- A collect --------------------------------------------------------- */
.collect { margin: 0 0 1.75rem; }
.collect h3 { font-size: .95rem; font-weight: 600; margin: 0 0 .1rem; }
.collect .meta { font-family: var(--sans); font-size: .72rem;
                 color: var(--ink-faint); margin: 0 0 .4rem; }
.collect p.text { margin: 0; }
.badge { display: inline-block; font-size: .68rem; padding: 0 .35em;
         border: 1px solid currentColor; border-radius: 2px; margin-left: .4em; }
.badge-low { color: #a8492c; }
.badge-medium { color: var(--ink-faint); }
.badge-high { display: none; }

/* --- A collect heading, with its star ---------------------------------- */
.collecthead { display: flex; align-items: baseline; gap: .5rem; }
.collecthead h3 { margin: 0 0 .1rem; flex: 1 1 auto; }

/* A button that behaves like a link, because opening a collect is a state
   change in this page rather than a second document. Styled as the thing it
   acts like, not as the element it is. */
.titlelink {
  font: inherit; background: none; border: 0; padding: 0; margin: 0;
  color: var(--accent); cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.titlelink:hover { color: var(--accent-deep); }

.star {
  font: inherit; font-size: 1rem; line-height: 1; background: none;
  border: 0; padding: .1rem .2rem; cursor: pointer; color: var(--ink-faint);
  flex: 0 0 auto;
}
.star:hover { color: var(--accent); }
.star[aria-pressed="true"] { color: var(--accent); }

.linky {
  font: inherit; font-family: var(--sans); font-size: .72rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-faint); text-decoration: underline;
}
.linky:hover { color: var(--accent); }

/* --- One collect, on its own ------------------------------------------- */
.focusnav { display: flex; align-items: center; justify-content: space-between;
            gap: .5rem; margin: 0 0 1.25rem; }
.step-through { display: flex; align-items: center; gap: .35rem; }
.step-through .where { font-family: var(--sans); font-size: .72rem;
                       color: var(--ink-faint); }

.focus h2 { font-size: 1.35rem; margin: 0 0 1rem; }

/* The prayer itself, given room. Larger than the browse list and looser,
   because this view exists to be read aloud from rather than scanned. */
.prayer {
  font-size: 1.12rem; line-height: 1.72; margin: 0 0 1.25rem;
  max-width: 34rem;
}
.focus .prayer .part { font-size: inherit; }

.focuscontrols { margin: 0 0 1.5rem; }

.focuslegend { margin: -.5rem 0 1.25rem; }
.legendtag {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .04em;
  text-transform: uppercase; padding: .05em 0; margin-right: .6rem;
}

.apparatus {
  display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem;
  margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: .78rem;
}
.apparatus dt { color: var(--ink-faint); }
.apparatus dd { margin: 0; color: var(--ink-muted); }

/* --- The collection ----------------------------------------------------- */
.collection { margin: 1rem 0 0; padding: 0; list-style: none; }
.collection li { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.collection .row { display: flex; gap: .5rem; align-items: baseline;
                   justify-content: space-between; margin-bottom: .35rem; }
.collection .prayer { font-size: 1rem; margin: 0 0 .35rem; }
.collection .meta { margin: 0; }

.examples h4.second { margin-top: .9rem; padding-top: .6rem;
                      border-top: 1px dashed var(--rule); }

/* --- An aligned pair --------------------------------------------------- */
.collect.pair .rite { margin: .6rem 0 0; padding-left: .75rem;
                      border-left: 2px solid var(--rule); }
.collect.pair .ritelabel {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .2rem;
}
.collect .note { font-family: var(--sans); font-size: .75rem;
                 color: var(--ink-faint); margin: .5rem 0 0; }

/* --- Transverse -------------------------------------------------------- */
.transverse { margin: 0; padding: 0; list-style: none; }
.transverse li { padding: .5rem 0; border-bottom: 1px solid var(--rule); }
/* The provenance label above a quoted fragment. Defined once, globally: it
   started life scoped to .transverse and the examples panel then rendered
   "Ascension DayMercifully give us faith ..." with the title welded to the
   text. */
.src { display: block; font-family: var(--sans); font-size: .7rem;
       color: var(--ink-faint); margin-bottom: .1rem; }
.count { font-family: var(--sans); font-size: .78rem; color: var(--ink-muted);
         margin: 0 0 .75rem; }

/* --- Compose ----------------------------------------------------------- */
.stage { border: 1px solid var(--rule); border-radius: 4px;
         background: var(--paper-2); padding: 1rem; margin: 0 0 1rem; }
.stage .step { font-family: var(--sans); font-size: .7rem; letter-spacing: .08em;
               text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .2rem; }
.stage h3 { margin: 0 0 .3rem; font-size: 1.05rem; }

/* The five parts in the order the finished prayer says them, with where you
   are marked. Each carries its own part color, so the vocabulary here is the
   same vocabulary the anatomy views color-code -- the two halves of the tool
   name things the same way. */
.formmap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem;
  margin: 0 0 .9rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: .74rem;
}
.formmap .sep { color: var(--ink-faint); }
.formmap .mappart { color: var(--ink-faint); }
/* Written, so it is real. Faint until then. */
.formmap .mappart.filled { color: var(--ink-muted); }
/* Where you are. The part color plus an underline, matching the legend. */
.formmap .mappart.here {
  font-weight: 600; border-bottom: 2px solid; padding-bottom: .1rem;
}
.formmap .mappart.here.part-address     { color: var(--p-address); }
.formmap .mappart.here.part-ascription  { color: var(--p-ascription); }
.formmap .mappart.here.part-petition    { color: var(--p-petition); }
.formmap .mappart.here.part-purpose     { color: var(--p-purpose); }
.formmap .mappart.here.part-termination { color: var(--p-termination); }
.stage .ask { color: var(--ink-muted); font-size: .9rem; margin: 0 0 .75rem; }
.stage .turn { border-left: 3px solid var(--accent); padding-left: .75rem;
               margin: 0 0 .75rem; color: var(--ink); font-size: .9rem; }

.preview { border: 1px solid var(--rule); border-radius: 4px; padding: 1rem;
           margin: 0 0 1rem; background: var(--paper); }
.preview .empty { color: var(--ink-faint); font-style: italic; }
.gauge { display: flex; gap: 1rem; font-family: var(--sans); font-size: .75rem;
         color: var(--ink-muted); margin: .6rem 0 0; flex-wrap: wrap; }
.gauge .over { color: #a8492c; font-weight: 600; }
.warn { font-family: var(--sans); font-size: .78rem; color: #a8492c;
        margin: .5rem 0 0; }
.warn a { color: inherit; }

/* Examples are read-only on purpose. No insert button, no click target: the
   moment a click fills a field the tool is mad-libs and teaches nothing. */
.examples { margin: .75rem 0 0; border-top: 1px dashed var(--rule);
            padding-top: .6rem; }
.examples h4 { font-family: var(--sans); font-size: .72rem; letter-spacing: .06em;
               text-transform: uppercase; color: var(--ink-faint);
               margin: 0 0 .4rem; font-weight: 600; }
.examples ul { margin: 0; padding: 0; list-style: none;
               font-size: .85rem; color: var(--ink-muted); }
.examples li { padding: .25rem 0; border-bottom: 1px solid var(--rule);
               user-select: text; }
.examples li:last-child { border-bottom: 0; }
.examples .note { font-family: var(--sans); font-size: .7rem;
                  color: var(--ink-faint); margin: .4rem 0 0; }

.saved { margin: 0; padding: 0; list-style: none; }
.saved li { border-bottom: 1px solid var(--rule); padding: .6rem 0; }
.saved .row { display: flex; gap: .5rem; align-items: baseline;
              justify-content: space-between; }
.saved .when { font-family: var(--sans); font-size: .7rem; color: var(--ink-faint); }

.seeded { background: var(--paper-3); border: 1px solid var(--rule);
          border-radius: 4px; padding: .75rem 1rem; margin: 0 0 1.25rem;
          font-size: .9rem; }
.seeded .step { font-family: var(--sans); font-size: .7rem; letter-spacing: .08em;
                text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .3rem; }

footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule);
         font-family: var(--sans); font-size: .75rem; color: var(--ink-faint); }
footer p { margin: .3rem 0; }

.hidden { display: none !important; }

/* --- Print -------------------------------------------------------------
   No booklet imposition and no page furniture. This is the browser's own
   print, kept from embarrassing itself. The real printed artefact waits on
   the Typst export; see WORKSHOP-IDEAS.md. */
@media print {
  body { background: #fff; color: #000; padding: 0; }
  .tabs, .subtabs, .controls, .legend, .stage, .gauge, nav, footer,
  button { display: none !important; }
  .part { border-bottom: 0; color: #000 !important; }
  .collect { break-inside: avoid; }
}