/* SAY — the margin rail: early-prototype disclosure, and a way to answer back.
 *
 * FRED, 1 Sep 2026, which is the brief for this file:
 *   "We also never say that this is a very early prototype. And there are lots of
 *    things that you won't like or are confusing. This site was built for you. Not
 *    for us. And your input is critical. And for that reason, we have built in the
 *    ability to share your comments when you have them without interrupting your
 *    train of thought and returning you to the place you started when you're done.
 *    Something like that in a sidebar, not in the main copy."
 *
 * "NOT IN THE MAIN COPY" IS THE DESIGN CONSTRAINT, and it is right. The main column
 * is written for a frightened person at two in the morning. Telling that person
 * mid-sentence that the thing they are leaning on is unfinished takes away the one
 * thing they came for. The reader who is EVALUATING the site is a different reader
 * wearing the same eyes, and the margin is where you talk to them.
 *
 * FRED, 24 April 2026, the older rule this obeys:
 *   "each page has to have a meaningful critique option. the keyword is 'meaningful'
 *    ... and every comment must be replied to."
 * And why most fail: "the comments accumulate, no one answers them, and the reader
 * who took the time to write a thoughtful critique learns that the critique went into
 * a void. After enough readers learn this, the comment box becomes decorative."
 *
 * So: no fake submit. There is no server. The panel says so.
 *
 * Tokens are the house tokens, inherited from the host page. Fallbacks are given so
 * the rail can be dropped onto a page that has not declared them yet.
 */

:root{
  --say-paper: var(--paper-raised, #FBFAF5);
  --say-ink:   var(--ink, #18213B);
  --say-soft:  var(--soft, #5c6274);
  --say-edge:  var(--edge, #ded5c4);
  --say-brass: var(--brass, #B8863B);
  --say-deep:  var(--brass-deep, #8A6222);
  --say-navy:  var(--navy, #1F3864);
}

/* ---- the rail ------------------------------------------------------------
 * Bottom right, quiet, out of the reading path. Never overlaps the column:
 * the full card only appears when there is genuine margin to put it in. */

#say-rail{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:60;
  font:400 15px/1.55 Georgia,'Iowan Old Style','Palatino Linotype',serif;
  max-width:15.5rem;
}
#say-rail[hidden]{display:none}

.say-note{
  display:none;
  background:var(--say-paper); color:var(--say-soft);
  border:1px solid var(--say-edge); border-left:3px solid var(--say-brass);
  border-radius:4px; padding:.85rem .95rem .8rem; margin:0 0 .5rem;
  font-size:.87rem; line-height:1.5;
}
.say-note b{font-weight:normal;color:var(--say-ink)}
@media(min-width:78rem){ .say-note{display:block} }

.say-open{
  display:block; width:100%; text-align:left;
  font:inherit; font-size:.87rem; cursor:pointer;
  color:var(--say-deep); background:var(--say-paper);
  border:1px solid var(--say-edge); border-radius:999px;
  padding:.5rem .95rem;
  box-shadow:0 2px 10px rgba(24,33,59,.07);
}
.say-open:hover,.say-open:focus-visible{color:var(--say-ink);border-color:var(--say-brass)}
@media(min-width:78rem){ .say-open{border-radius:4px} }

/* Below the margin threshold the rail has no margin to sit in and floats over the
 * bottom-right corner. Give the page room so the last line of content is never the
 * thing it covers. */
@media(max-width:77.99rem){ body{padding-bottom:3.25rem} }

/* ---- the panel -----------------------------------------------------------
 * A drawer, not a page. The page underneath is never unmounted and never
 * scrolled: closing puts the reader back on the exact line they left. */

#say-panel{
  position:fixed; inset:0; z-index:9998;
  display:flex; justify-content:flex-end;
  background:rgba(16,26,46,.42);
  font:400 17px/1.6 Georgia,'Iowan Old Style','Palatino Linotype',serif;
}
#say-panel[hidden]{display:none}

.say-scrim{flex:1 1 auto;cursor:pointer}

.say-sheet{
  flex:0 0 auto; width:min(30rem,100%);
  display:flex; flex-direction:column;
  background:var(--say-paper); color:var(--say-ink);
  border-left:1px solid var(--say-edge);
  box-shadow:-8px 0 40px rgba(0,0,0,.25);
  overflow:auto;
  padding:1.4rem 1.5rem 1.6rem;
}
.say-sheet h2{margin:0 0 .2rem;font-size:1.24rem;font-weight:400;color:var(--say-navy)}
.say-sheet p{margin:0 0 .9rem}
.say-where{
  font-size:.86rem;color:var(--say-soft);margin:0 0 1.1rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--say-edge);
}
.say-where b{font-weight:normal;color:var(--say-ink)}

.say-early{
  font-size:.94rem;line-height:1.6;color:var(--say-soft);
  padding-left:1rem;border-left:2px solid var(--say-brass);margin:0 0 1.3rem;
}
.say-early b{font-weight:normal;color:var(--say-ink)}
.say-early p{margin:0 0 .55rem}
.say-early p:last-child{margin:0}

/* Five fixed tags read as the five permitted answers unless something says otherwise.
   Fred, 1 Sep 2026: the examples are "finite and specific and our choices". One line
   costs nothing and stops the set from being a fence. */
.say-tagq{margin:0 0 .5rem;font-size:.86rem;color:var(--say-soft)}
@media (forced-colors: active){ .say-tagq{color:CanvasText} }

.say-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .9rem}
.say-tag{
  font:inherit;font-size:.88rem;cursor:pointer;
  color:var(--say-ink);background:transparent;
  border:1px solid var(--say-edge);border-radius:999px;padding:.36rem .8rem;
}
.say-tag:hover{border-color:var(--say-brass)}
.say-tag[aria-pressed="true"]{
  border-color:var(--say-brass);background:var(--say-brass);color:#fff;
}
:root[data-theme="dark"] .say-tag[aria-pressed="true"]{color:#171410}

/* ---- consent ------------------------------------------------------------
 * Default OFF, and it has to LOOK off — an opt-in that is styled to look
 * already-agreed is not an opt-in. Sits directly under the text box because
 * the permission is about that text, not about the site in general. */
.say-consent{
  display:flex; gap:.6rem; align-items:flex-start;
  margin:.85rem 0 0; font-size:.9rem; line-height:1.5; color:var(--say-soft);
  cursor:pointer;
}
.say-consent input{
  flex:0 0 auto; width:1.05rem; height:1.05rem; margin:.22rem 0 0;
  accent-color:var(--say-brass); cursor:pointer;
}
.say-consent b{font-weight:normal;color:var(--say-ink)}
@media (forced-colors: active){
  .say-consent{color:CanvasText}
  .say-consent input{outline:2px solid CanvasText;outline-offset:1px}
}

.say-sheet textarea{
  width:100%;min-height:8.5rem;padding:.85rem .95rem;
  font:inherit;font-size:1rem;line-height:1.55;
  color:var(--say-ink);background:var(--paper,#F2EFE6);
  border:1px solid var(--say-edge);border-radius:4px;resize:vertical;
}
.say-sheet textarea:focus{border-color:var(--say-brass);outline:none;
  box-shadow:0 0 0 3px rgba(184,134,59,.18)}

.say-acts{display:flex;flex-wrap:wrap;gap:.55rem;margin:1rem 0 0}
.say-acts button,.say-acts a{
  font:inherit;font-size:.95rem;cursor:pointer;text-decoration:none;
  border:1px solid var(--say-edge);border-radius:4px;padding:.6rem 1rem;
  color:var(--say-ink);background:var(--paper,#F2EFE6);
}
.say-acts button:hover,.say-acts a:hover{border-color:var(--say-brass)}
.say-back{margin-left:auto;color:var(--say-deep)!important}

.say-truth{
  margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--say-edge);
  font-size:.87rem;line-height:1.58;color:var(--say-soft);
}
.say-truth b{font-weight:normal;color:var(--say-ink)}
.say-said{margin:.7rem 0 0;font-size:.87rem;color:var(--say-deep)}
.say-said[hidden]{display:none}

@media(prefers-reduced-motion:no-preference){
  .say-sheet{animation:say-in .18s ease-out}
  @keyframes say-in{from{transform:translateX(1.5rem);opacity:.4}to{transform:none;opacity:1}}
}

@media (forced-colors: active){
  .say-note{border:2px solid CanvasText;border-left:3px solid CanvasText;color:CanvasText}
  .say-open{border:2px solid ButtonBorder;background:ButtonFace;color:LinkText;
            text-decoration:underline;box-shadow:none}
  .say-sheet{border-left:3px solid CanvasText}
  .say-early{border-left:3px solid CanvasText;color:CanvasText}
  .say-tag{border:2px solid ButtonBorder;background:ButtonFace;color:ButtonText}
  .say-tag[aria-pressed="true"]{border:3px solid Highlight;background:Highlight;color:HighlightText}
  .say-sheet textarea{border:2px solid CanvasText}
  .say-acts button,.say-acts a{border:2px solid ButtonBorder;background:ButtonFace;color:ButtonText}
  .say-truth,.say-where{color:CanvasText}
}

@media print{ #say-rail,#say-panel{display:none!important} }