/* Sticky Phrases' look (themes.css): Plate, revised, chosen 2026-11-11
   from the design trials of 2026-11-06 (card catalog, natural history
   plate, penny candy, type case, sweet shop; in git history before
   2026-11-11). Tokens (--t-*), then the rules that apply them to the
   game, the header and the pack screen. Light mode: Manila 3 paper
   (paper/manila3.jpg, from brand/export), paled by a white layer per
   game; Caslon words; Alegreya SC for headings, labels, buttons and
   stamps. Dark mode: Classic dark's greys with the same type and
   stamps. The page's <html> carries data-theme="plate2" and .themed.
*/

/* ---- Tokens ------------------------------------------------------ */
html[data-theme="plate2"] {
    --t-font-body: 'Libre Caslon Text', Georgia, serif;
    --t-font-word: 'Libre Caslon Text', Georgia, serif;
    --t-word-weight: 400;
    --t-ink: #33291d; --t-ink-soft: #74664f;
    --t-paper: #f4eee0; --t-paper-border: rgba(91, 74, 50, 0.45); --t-panel-radius: 4px;
    --t-panel-shadow: 0 6px 18px rgba(40, 28, 10, 0.22);
    --t-tile-bg: #fffcf4; --t-tile-hover: #f3ead3; --t-tile-border: 1px solid rgba(59, 48, 36, 0.55); --t-tile-radius: 3px;
    --t-tile-shadow: 0 1px 2px rgba(40, 28, 10, 0.18);
    --t-entry-bg: rgba(255, 252, 244, 0.75); --t-entry-border: 1px solid #a8977a; --t-entry-line: 1px solid #a8977a; --t-entry-radius: 3px;
    --t-btn-bg: #7b2d26; --t-btn-ink: #f8efdc; --t-btn-border: 1px solid #5e211b; --t-btn-radius: 3px;
    --t-btn-shadow: 0 1px 2px rgba(40, 28, 10, 0.25);
    --t-btn2-bg: #efe6d0; --t-btn2-border: 1px solid #b3a283; --t-icon-radius: 3px;
    --t-sticky: #4d6b35; --t-sticky-bg: #dfe6c8; --t-almost: #9a6a16; --t-almost-bg: #f1e2b8;
    --t-found: #3f9443;   /* the status row's found squares: brighter than --t-sticky, to pop (2026-11-10) */
    --t-miss: #7b2d26; --t-miss-bg: #ecd3c8; --t-seg-empty: #e0d4b6; --t-chip-radius: 3px;
}
/* the label font (headings, labels, buttons, stamps) and the paper */
html[data-theme="plate2"] {
    --t-btn-font: var(--t-font-head);
    --t-badge-size: 0.85rem;   /* small caps run small */
    /* --t-head-adjust (font-size-adjust): x-height as a share of the size; Alegreya SC's own is 0.505,
       so this sets it about 23% larger */
    --t-head-adjust: 0.62; --t-font-head: 'Alegreya SC', Georgia, serif; --t-head-weight: 500; --t-label-transform: none;
    --t-head-spacing: 0.03em; --t-btn-spacing: 0.05em; --t-btn-weight: 500;
    /* Manila 3, paled by a white layer, --pp-pale (0.1 to 0.5), per game from site.js's usePaper */
    --t-paper-size: 100% 100%;
    --t-panel-image: linear-gradient(rgb(255 255 255 / var(--pp-pale, 0.35)), rgb(255 255 255 / var(--pp-pale, 0.35))), url(paper/manila3.jpg);
}

/* Plate, revised in dark mode: Classic dark's greys (no paper; the
   paper under black or grey layers read brown, 2026-11-10/11) with
   Plate, revised's type, borders and stamps; the greens, ambers and
   reds as in Classic dark */
html.dark[data-theme="plate2"] {
    --t-panel-image: none;
    --t-ink: #f3f4f6; --t-ink-soft: #b4bac4;
    --t-paper: #1f2937; --t-paper-border: #4b5563;
    --t-panel-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    --t-tile-bg: #374151; --t-tile-hover: #4b5563; --t-tile-border: 1px solid #6b7280;
    --t-tile-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    --t-node-bg: #1f2937; --t-node-ghost: #111827;
    --t-entry-bg: #111827; --t-entry-border: 1px solid #4b5563; --t-entry-line: 1px solid #6b7280;
    --t-btn-bg: #8e352d; --t-btn-ink: #fdf3e0; --t-btn-border: 1px solid #b0483d;
    --t-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --t-btn2-bg: #374151; --t-btn2-border: 1px solid #4b5563;
    --t-sticky: #4ade80; --t-sticky-bg: #14532d; --t-found: #22b33a; --t-almost: #fef3c7; --t-almost-bg: #ab6c00;
    --t-miss: #f87171; --t-miss-bg: #7f1d1d; --t-seg-empty: #4b5563;
}

/* ---- Rules (both modes) ------------------------------------------ */
html.themed[data-theme="plate2"] {
    --sp-font: var(--t-font-word);

    & body { font-family: var(--t-font-body); color: var(--t-ink); }
    & .font-sans { font-family: var(--t-font-body); }

    /* panels */
    & #top-bar { background: var(--t-paper); border-color: var(--t-paper-border); border-radius: var(--t-panel-radius); }
    & .panel-paper { background: var(--t-paper) !important; background-image: var(--t-panel-image, none) !important;
        border-color: var(--t-paper-border) !important; border-radius: var(--t-panel-radius) !important;
        box-shadow: var(--t-panel-shadow) !important; }
    & :is(#top-settings-menu, #top-mode-menu, #status-list) { background: var(--t-paper); border: 1px solid var(--t-paper-border);
        border-radius: var(--t-panel-radius); }
    & :is(.set-row, #top-mode-menu button) { border-radius: var(--t-panel-radius); }
    & :is(.set-row b, #top-mode-menu b) { color: var(--t-ink); }

    /* type: headings, labels, text */
    & :is(.sum-head h2, #pack-title, #chain-graph-title, #submitted-heading, #right-results-box h4,
          #instructions-container h1, #instructions-content .ins-head) {
        font-family: var(--t-font-head); font-weight: var(--t-head-weight, 700); font-variant: var(--t-head-variant, normal);
        letter-spacing: var(--t-head-spacing, normal); color: var(--t-ink) !important;
        font-size-adjust: var(--t-head-adjust, none); font-feature-settings: var(--t-head-features, normal); -webkit-text-stroke: var(--t-head-stroke, 0); }
    /* the game's own terms in the instructions: the label face, in their own colours (Sticky, Almost sticky, Not sticky) */
    & #instructions-content .term { font-family: var(--t-font-head); font-weight: var(--t-head-weight, 700); font-variant: var(--t-head-variant, normal);
        letter-spacing: var(--t-head-spacing, normal); font-size-adjust: var(--t-head-adjust, none);
        font-feature-settings: var(--t-head-features, normal); -webkit-text-stroke: var(--t-head-stroke, 0); }
    /* the results as the Phrases entered stamps print them: bold */
    & #instructions-content .term:is(.stickiness-sticky, .stickiness-almost, .text-red-800) { font-weight: 700; }
    & #instructions-content .mode-term { color: var(--t-ink); }   /* as the Modes heading */
    /* the mode menu's names: the label face */
    & #top-mode-menu b + span { color: var(--t-ink-soft); }
    & #top-mode-menu b { font-family: var(--t-font-head); font-weight: var(--t-head-weight, 700); font-variant: var(--t-head-variant, normal);
        letter-spacing: var(--t-head-spacing, normal); font-size-adjust: var(--t-head-adjust, none);
        font-feature-settings: var(--t-head-features, normal); -webkit-text-stroke: var(--t-head-stroke, 0); }
    & :is(#sticky-status-label, #misses-status-label, .sum-label, #history-wrap > p, .tile-mode, .tile-size) {
        font-family: var(--t-font-head); font-weight: var(--t-head-weight, 700); color: var(--t-ink-soft) !important; letter-spacing: 0.08em;
        text-transform: var(--t-label-transform, uppercase); font-variant: var(--t-head-variant, normal);
        font-size-adjust: var(--t-head-adjust, none); font-feature-settings: var(--t-head-features, normal); -webkit-text-stroke: var(--t-head-stroke, 0); }
    & :is(.text-gray-500, .text-gray-600, .text-gray-700, #pack-stats, .sum-note, .sum-none, #chain-hint, #chain-count) { color: var(--t-ink-soft) !important; }
    & .italic { font-style: normal; }   /* the serifs' italics are too ornate for notes and placeholders */
    /* the game talking to the player (the heading, the tutorial's lines, the chain's prompt): the body face, plain */
    & #call-to-action, & #call-to-action span { font-family: var(--t-font-body); font-weight: 400; font-variant: normal;
        letter-spacing: normal; color: var(--t-ink) !important; }
    & #call-to-action span { color: var(--t-ink-soft) !important; }
    & :is(.text-gray-800, .text-gray-900, .sum-words, #sticky-count-display) { color: var(--t-ink) !important; }

    /* the board's words, and the graph board's nodes */
    & #word-buttons-container .word-button { background: var(--t-tile-bg) !important; border: var(--t-tile-border) !important;
        border-radius: var(--t-tile-radius) !important; box-shadow: var(--t-tile-shadow) !important; color: var(--t-ink) !important;
        font-family: var(--t-font-word); font-weight: var(--t-word-weight, 600); }
    & #word-buttons-container .word-button:hover:not(.off) { background: var(--t-tile-hover) !important; }
    & #word-buttons-container .word-button.drag-from { outline: 3px solid var(--t-sticky); outline-offset: 1px; }
    & #word-buttons-container .word-button.drag-to { outline: 3px solid var(--t-ink); outline-offset: 1px; }
    & #chain-graph .node rect { fill: var(--t-node-bg, #fffdf6); stroke: var(--t-sticky); }
    & #chain-graph .node text { fill: var(--t-ink); font-weight: var(--t-word-weight, 600); }
    & #chain-graph :is(.edge) { stroke: var(--t-sticky); }
    & #chain-graph .chev { fill: var(--t-sticky); }
    & #chain-graph .node.ghost rect { fill: var(--t-node-ghost, rgba(255, 253, 246, 0.6)); stroke: var(--t-ink-soft); }
    & .board-graph #chain-graph .node.ghost rect { fill: var(--t-node-bg, #fffdf6); stroke: var(--t-ink-soft); stroke-dasharray: none; }
    & .board-graph #chain-graph .node.ghost text { fill: var(--t-ink); }

    /* the phrase box */
    & #current-bigram { background: var(--t-entry-bg) !important; border: var(--t-entry-border) !important;
        border-bottom: var(--t-entry-line) !important; border-radius: var(--t-entry-radius) !important;
        box-shadow: none !important; color: var(--t-ink); font-family: var(--t-font-word); font-weight: var(--t-word-weight, 600); }

    /* buttons: primary (Enter, Next game) and secondary */
    & :is(#submit-btn, #next-game-btn, .sum-next) { background: var(--t-btn-bg) !important; color: var(--t-btn-ink) !important;
        border: var(--t-btn-border) !important; border-radius: var(--t-btn-radius) !important; box-shadow: var(--t-btn-shadow) !important;
        font-family: var(--t-btn-font); font-weight: var(--t-btn-weight, 700); letter-spacing: var(--t-btn-spacing, normal);
        text-transform: var(--t-btn-transform, none); font-variant: var(--t-head-variant, normal);
        font-size-adjust: var(--t-head-adjust, none); font-feature-settings: var(--t-head-features, normal); -webkit-text-stroke: var(--t-head-stroke, 0); }
    & :is(#submit-btn, #next-game-btn, .sum-next):hover:not(:disabled) { filter: brightness(1.08); }
    & :is(#shuffle-btn, #retry-btn, .sum-back, .top-btn, #share-btn, .sum-share button) {
        background: var(--t-btn2-bg) !important; border: var(--t-btn2-border) !important; color: var(--t-ink) !important;
        border-radius: var(--t-btn-radius) !important; font-family: var(--t-btn-font); font-weight: var(--t-btn-weight, 600);
        font-variant: var(--t-head-variant, normal);
        font-size-adjust: var(--t-head-adjust, none); font-feature-settings: var(--t-head-features, normal); -webkit-text-stroke: var(--t-head-stroke, 0); }
    & .top-icon { border-radius: var(--t-icon-radius) !important; }
    & :is(#shuffle-btn, #retry-btn, .sum-back, .top-btn, #share-btn, .sum-share button):hover { filter: brightness(0.96); }
    & #give-up-btn { color: var(--t-ink-soft); }

    /* results */
    & .progress-seg { background: var(--t-seg-empty); border-radius: var(--t-chip-radius); }
    & .progress-seg.found { background: var(--t-found, var(--t-sticky)) !important; }
    & .progress-seg.filling::after { background: var(--t-found, var(--t-sticky)); }
    & .miss-dot { background: var(--t-ink-soft); }
    & .miss-dot.used { background: var(--t-seg-empty); }
    & .bg-stickiness-sticky { background-color: var(--t-sticky-bg) !important; }
    & .bg-stickiness-almost { background-color: var(--t-almost-bg) !important; }
    & .bg-stickiness-none { background-color: var(--t-miss-bg) !important; }
    & #right-results-box li { border-radius: var(--t-chip-radius) !important; box-shadow: none !important; }
    & .stickiness-sticky { color: var(--t-sticky); }
    & .stickiness-almost { color: var(--t-almost); }
    & :is(.stickiness-none, .text-red-800) { color: var(--t-miss) !important; }
    & .hchip { border-radius: var(--t-chip-radius); font-family: var(--t-font-word); }
    & .hchip.sticky { background: var(--t-sticky-bg) !important; color: var(--t-sticky) !important; border-color: var(--t-sticky) !important; }
    & .hchip.almost { background: var(--t-almost-bg) !important; color: var(--t-almost) !important; border-color: var(--t-almost) !important; }
    & .hchip.miss { background: var(--t-miss-bg) !important; color: var(--t-miss) !important; border-color: var(--t-miss) !important; }
    & .hchip.unfound { color: var(--t-ink-soft); border-color: var(--t-ink-soft); }

    /* pack screen */
    & .tile-open { background: var(--t-tile-bg); border: var(--t-tile-border); border-radius: var(--t-panel-radius);
        box-shadow: var(--t-tile-shadow); color: var(--t-ink); }
    & .tile-open:hover { background: var(--t-tile-hover); }
    & .tile-num { font-family: var(--t-font-head); font-weight: var(--t-head-weight, 700); color: var(--t-ink);
        font-size-adjust: var(--t-head-adjust, none); font-feature-settings: var(--t-head-features, normal); -webkit-text-stroke: var(--t-head-stroke, 0); }
    & .tile-status { font-family: var(--t-font-body); }
    & .unplayed .tile-status { color: var(--t-ink-soft); }
    & .playing .tile-open { background: var(--t-almost-bg); outline: 2px solid var(--t-almost); outline-offset: 2px; }
    & .playing .tile-status { color: var(--t-almost); }
    & .has-art .tile-text { background: color-mix(in srgb, var(--t-paper) 85%, transparent); border-radius: var(--t-panel-radius); }
    & .has-art:is(.won, .perfect) .tile-text { background: color-mix(in srgb, var(--t-sticky-bg) 88%, transparent); }
    & .has-art.lost .tile-text { background: color-mix(in srgb, var(--t-seg-empty) 88%, transparent); }
    & :is(#board-min-btn, #board-min-label) { color: var(--t-ink-soft); font-family: var(--t-font-body); }
    & :is(.won, .perfect) .tile-open { background: var(--t-sticky-bg); }
    & .perfect .tile-open { outline: 2px solid var(--t-sticky); outline-offset: 2px; }
    & :is(.won, .perfect) .tile-status { color: var(--t-sticky); }
    & .lost .tile-open { background: var(--t-seg-empty); }
    & .lost .tile-status { color: var(--t-miss); }
}

/* the paper, and a stamp for each phrase's result */
html[data-theme="plate2"] {
    & #top-bar .top-btn { background: var(--t-tile-bg) !important; }   /* as light as the word boxes */
    & :is(.panel-paper, #top-bar) { background-image: var(--t-panel-image) !important; background-size: var(--t-paper-size) !important;
        background-position: center !important; }
    & [data-role="level-badge"] { font-family: var(--t-font-head); font-variant: var(--t-head-variant, normal);
        text-transform: var(--t-label-transform, uppercase); font-size: var(--t-badge-size); font-size-adjust: var(--t-head-adjust, none); font-feature-settings: var(--t-head-features, normal);
        -webkit-text-stroke: var(--t-head-stroke, 0); border: 1.5px solid currentColor; border-radius: 3px;
        /* small caps have no ascenders, so a centred line box reads low: a shorter line and room below lift
           them to the middle, the box the same height */
        line-height: 0.97em; padding: 0 0.3rem 0.21em; opacity: 0.85; }
    /* almost, in the entry box: as the almost sticky stamp prints it (lowercase, bold) */
    & .close-msg { font-family: var(--t-font-head); font-variant: var(--t-head-variant, normal); font-weight: 700;
        text-transform: lowercase; font-size-adjust: var(--t-head-adjust, none);
        font-feature-settings: var(--t-head-features, normal); -webkit-text-stroke: var(--t-head-stroke, 0); }
    & :is(#share-btn, .sum-share button, .sum-back) { font-size: 1rem; }
}
/* the menus' hover and chosen rows: manila, not grey */
html[data-theme="plate2"]:not(.dark) {
    & :is(#top-mode-menu button:hover, .set-row:hover, .status-col:hover, .status-col[aria-expanded="true"]) { background: #f3e6cd; }
    & #top-mode-menu button[aria-checked="true"] { background: #ead6b0; }
}
html[data-theme="plate2"] {
    & .tile-num::before { content: 'No. '; font-size: 0.65em; }
    @media (max-width: 640px) { & .tile-num::before { content: none; } }   /* on a phone the number alone: more of the art shows */
}
/* Plate, revised in dark mode: a finished tile's label on a solid enough dark veil */
html.dark[data-theme="plate2"] {
    & .has-art .tile-text { background: rgba(31, 41, 55, 0.88) !important; }
    & .has-art:is(.won, .perfect) .tile-text { background: rgba(20, 83, 45, 0.9) !important; }
}