/* feedback.css — the public feedback page, and only what board.css
 * cannot supply itself.
 *
 * web/templates/feedback.html is a standalone document like privacy.html
 * and terms.html: it loads none of the studio, because the studio is
 * twenty-five stylesheets and a boot sequence that fetches somebody's
 * uploads. What it loads instead is three files, and this is the seam
 * between the other two:
 *
 *     legal.css       the public site's chrome — the brand header, the
 *                     footer, the type, and the palette
 *     board/board.css the board itself, unchanged, exactly as the
 *                     studio draws it
 *     this file       the tokens board.css asks for that legal.css does
 *                     not carry, and the four studio classes
 *                     board/panel.js writes into its markup
 *
 * WHY THE TOKENS ARE HERE AND NOT IN legal.css
 *
 * legal.css carries the palette for the public documents, and says in
 * its own header why that is a second copy of studio.css's rather than a
 * link to it. This is not a third copy: it is the REMAINDER. board.css
 * is built on the studio's full token set — status chips that borrow the
 * --good/--busy/--fail families, a filled button that wants --cta, a
 * focus ring — and privacy and terms have no use for any of it. Putting
 * a status chip's colour into the stylesheet for two pages of prose
 * would be carrying it for the two documents that will never draw one.
 *
 * Every value below is studio.css's, and studio.css is where they are
 * decided. When the palette moves there it moves here, the same bargain
 * legal.css already makes — see the design-token note at the top of
 * static/studio.css.
 *
 * WHY THE FOUR STUDIO CLASSES ARE COPIED RATHER THAN IMPORTED
 *
 * panel.js writes `.tile`, `.stack`, `.stackblurb` and `button.ghost`
 * into its own markup, and those live in dash.css and studio.css — two
 * files totalling a quarter of a megabyte, for four rules. They are
 * restated here at the size the board uses them. If panel.js grows a
 * fifth borrowed class it has to be added here too, and the symptom is
 * an unstyled block on the public page and nothing at all wrong in the
 * studio, which is why panel.js's docstring says it is drawn on two
 * pages.
 */

/* ---- the rest of the palette -------------------------------------- */

/* Light is the default and is declared bare, so a browser that never
 * runs the theme bootstrap lands on the brand's own surface rather than
 * on a guess. legal.css makes the same choice for the same reason. */
:root, :root[data-theme="light"]{
  --accent-hi:#8172F0; --accent-lo:#5A48D6;
  --accent-ink:#5A48D6; --accent-soft:#EDEAFD;
  --accent-line:rgba(108,92,231,.30); --on-accent:#FFFFFF;
  --ring:#4C3DBF;
  --tint:rgba(108,92,231,.07);
  --chip-bg:rgba(27,27,33,.035);
  --good-bg:#DFF9EE; --good-fg:#0E8A66; --good-br:#B9EFD9;
  --busy-bg:#FFF3DC; --busy-fg:#8A5200; --busy-br:#F0CE97;
  --fail-bg:#FDE7E5; --fail-fg:#A5231F; --fail-br:#F2C4C0;
  --shadow:0 6px 18px rgba(27,27,33,.05), 0 26px 60px rgba(27,27,33,.05);
  --shadow-sm:0 1px 2px rgba(27,27,33,.04), 0 8px 30px rgba(27,27,33,.04);
  --shadow-md:0 2px 4px rgba(27,27,33,.04), 0 12px 36px rgba(27,27,33,.07);
}

/* Dark under BOTH the media query and the explicit attribute, which is
 * legal.css's rule and the reason is the same: theme.js stamps
 * data-theme when somebody has chosen, and stamps nothing on "system". A
 * block that answered only one of the two would leave the toggle working
 * in one direction. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --accent-hi:#9A8DF5; --accent-lo:#5A48D6;
    --accent-ink:#A99BFF; --accent-soft:rgba(139,124,240,.18);
    --accent-line:rgba(139,124,240,.40); --on-accent:#FFFFFF;
    --ring:#A99BFF;
    --tint:rgba(139,124,240,.13);
    --chip-bg:rgba(255,255,255,.05);
    --good-bg:rgba(14,138,102,.20); --good-fg:#63E0B4;
    --good-br:rgba(99,224,180,.30);
    --busy-bg:rgba(255,180,61,.16); --busy-fg:#FFCD80;
    --busy-br:rgba(255,180,61,.34);
    --fail-bg:rgba(200,60,60,.20); --fail-fg:#FF9A9A;
    --fail-br:rgba(255,154,154,.32);
    --shadow:0 10px 30px rgba(0,0,0,.40), 0 30px 80px rgba(0,0,0,.30);
    --shadow-sm:0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.24);
    --shadow-md:0 2px 6px rgba(0,0,0,.36), 0 14px 36px rgba(0,0,0,.30);
  }
}
:root[data-theme="dark"]{
  --accent-hi:#9A8DF5; --accent-lo:#5A48D6;
  --accent-ink:#A99BFF; --accent-soft:rgba(139,124,240,.18);
  --accent-line:rgba(139,124,240,.40); --on-accent:#FFFFFF;
  --ring:#A99BFF;
  --tint:rgba(139,124,240,.13);
  --chip-bg:rgba(255,255,255,.05);
  --good-bg:rgba(14,138,102,.20); --good-fg:#63E0B4;
  --good-br:rgba(99,224,180,.30);
  --busy-bg:rgba(255,180,61,.16); --busy-fg:#FFCD80;
  --busy-br:rgba(255,180,61,.34);
  --fail-bg:rgba(200,60,60,.20); --fail-fg:#FF9A9A;
  --fail-br:rgba(255,154,154,.32);
  --shadow:0 10px 30px rgba(0,0,0,.40), 0 30px 80px rgba(0,0,0,.30);
  --shadow-sm:0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.24);
  --shadow-md:0 2px 6px rgba(0,0,0,.36), 0 14px 36px rgba(0,0,0,.30);
}

/* One rule for both themes: --cta resolves through --accent, which each
 * block above has already answered. Flat rather than the studio's
 * gradient because on this page it appears exactly once. */
:root{
  --cta:linear-gradient(135deg,var(--accent),var(--accent-lo));
  --r-md:14px; --r-tile:20px; --pad-tile:24px; --gap-grid:1rem;
}

/* ---- the column ---------------------------------------------------- */

/* legal.css sizes .legal for prose — 760px, which is a measure chosen so
 * a paragraph of a privacy policy is readable. A board is cards rather
 * than sentences, and its cards carry a vote button down the left, so
 * this widens the same wrapper to the 840px .stack uses in the studio.
 * The board then has the same measure on both pages, which is the whole
 * reason it is one stylesheet and one module. */
.legal.legal-board{max-width:880px}

/* ---- what panel.js borrows from the studio ------------------------- */

.stack{display:flex; flex-direction:column; gap:var(--gap-grid);
       max-width:840px}
.tile{background:var(--surface); border-radius:var(--r-tile);
      box-shadow:var(--shadow-sm); padding:var(--pad-tile)}
.stack .tile > h2{font:700 16px/1.3 Manrope, Inter, sans-serif;
      margin:0 0 6px; letter-spacing:-.2px}
.stackblurb{color:var(--text-secondary); font-size:13.5px; line-height:1.55;
      margin:0 0 16px; max-width:62ch}
button.ghost{background:var(--surface); border:1px solid var(--border-2);
      color:var(--text); font:600 13.5px/1 Inter, sans-serif;
      padding:10px 18px; border-radius:var(--r-md); cursor:pointer;
      width:max-content; transition:all .3s ease-out}
button.ghost:hover{border-color:var(--accent); transform:translateY(-1px)}

/* legal.css styles every <p> for prose — 16px with a 16px bottom margin
 * — and the board's cards set their own. The two that do not are the
 * paragraph inside a reply and the one in the "as shown" block, which
 * would inherit the prose margin and open a gap inside a card. Said once
 * here rather than as a change to board.css, because in the studio there
 * is no element rule to undo. */
.bd-card p:last-child, .bd-reply p, .bd-asshown p{margin-bottom:0}

/* ---- the page's own head ------------------------------------------- */

/* The document gets an h1 the way the two policies do, and panel.js's
 * .bd-head tile keeps its own heading under the tabs. They are not the
 * same heading and should not be collapsed into one: the h1 names the
 * page, the tile names the TAB, and on the other two tabs it reads
 * "Your posts" and "Queue". Hiding it on the board tab would mean
 * hiding those too, for the sake of one repeated word.
 *
 * The lede under the h1 says the one thing this page has to say that
 * the studio's copy of the board does not — that reading it is free and
 * posting is not. */
.boardlede{color:var(--text-secondary); font-size:15px; margin:0 0 36px;
      max-width:62ch}

/* ---- the confirmation after a post --------------------------------- */

/* board/page.js's stand-in for the studio's toast. Bottom-centre rather
 * than the studio's corner: there is no job rail on this page to avoid,
 * and the message is a paragraph rather than a word — it says a person
 * reads every post and it may take a day or two, which is the whole
 * answer to "did that work". Wide enough to read as a sentence and
 * pinned above the fold on a phone. */
.bdtoast{
  position:fixed; left:50%; bottom:24px; z-index:50;
  transform:translate(-50%, 12px);
  max-width:min(520px, calc(100vw - 32px));
  background:var(--surface); color:var(--text);
  border:1px solid var(--border-2); border-radius:var(--r-md);
  box-shadow:var(--shadow); padding:14px 18px;
  font-size:14px; line-height:1.5;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease-out, transform .25s ease-out;
}
.bdtoast.on{opacity:1; transform:translate(-50%, 0)}

/* Somebody who has asked for less motion still gets the message; what
 * they do not get is the slide. */
@media (prefers-reduced-motion: reduce){
  .bdtoast{transition:opacity .25s ease-out; transform:translate(-50%, 0)}
}