/* Plithos shared UI: command palette and dark mode. Loaded by all four pages. The three app pages each define the same set of custom properties in :root, so overriding them here re-themes everything at once. Where a page hardcodes a color instead of using a token, it is patched explicitly below. */ /* ---------------------------------------------------------------- dark mode */ /* Dark theme: the Great Schema. Gray wool, bone lettering, and the deep red of the analavos. Two earlier attempts read as pink, then as orange, and the reason is arithmetic rather than taste. On a dark ground no genuinely deep red clears WCAG AA at body-text size - the brand porphyry manages 1.5:1 - so any red light enough to read has been desaturated into pink, and correcting the hue away from pink walks it into orange. There is no readable red on this background. So accent *text* carries no hue at all: it is bone, one step brighter than the body, and links are distinguished by a red underline rather than by color. The red itself stays completely true and is used where it has no contrast burden - underlines, borders, rules, and filled pills with bone on top at 6.7:1. The grays are neutral, not warm, so nothing casts orange. */ :root[data-theme="dark"]{ --desk:#1f1f1e; --leaf:#272726; --rail:#2e2e2c; --ink:#e4e2dc; --ink-soft:#bcbab3; --muted:#8d8b85; --rule:#3a3936; --porphyry:#f2f0ea; --porphyry-deep:#ffffff; --gold:#b0a898; --pl-red:#a03546; /* the true brand red - fills and rules only */ color-scheme:dark; } /* Pages that hardcode the parchment color in a translucent masthead. */ :root[data-theme="dark"] .masthead{background:rgba(31,31,30,.93)} :root[data-theme="dark"] header{background:var(--leaf)} /* Links are bone like everything else, so they need the underline to be identifiable. This is where the real red actually shows. */ :root[data-theme="dark"] a[href]{ text-decoration:underline; text-decoration-color:var(--pl-red); text-decoration-thickness:1px; text-underline-offset:3px; } :root[data-theme="dark"] a[href]:hover{text-decoration-color:var(--ink)} :root[data-theme="dark"] nav a[href], :root[data-theme="dark"] a[href].pl-launch, :root[data-theme="dark"] .secbtn, :root[data-theme="dark"] .pbtn{text-decoration:none} /* Anything filled with the accent keeps the real red and bone on top of it, rather than inheriting the gold that the accent token now carries. */ :root[data-theme="dark"] nav a[aria-current=page], :root[data-theme="dark"] .tg.on, :root[data-theme="dark"] .seg button[aria-pressed="true"], :root[data-theme="dark"] .export button:hover{background:var(--pl-red);color:var(--ink);border-color:var(--pl-red)} :root[data-theme="dark"] .ccopt.on .ccchk{background:var(--pl-red);border-color:var(--pl-red)} :root[data-theme="dark"] .sortgrp button.on{background:var(--ink);color:#1f1f1e} :root[data-theme="dark"] .secbtn.on{color:var(--porphyry);border-inline-start-color:var(--pl-red)} :root[data-theme="dark"] img{opacity:.92} /* The jurisdiction name under the badge hardcodes the brand red, which sits at 1.5:1 on a dark ground. The heraldic emblems above it keep their true colors - those are the jurisdictions' own, not ours to re-tint. */ :root[data-theme="dark"] .jurisbadge .jb-name{color:var(--porphyry)} /* The wordmark hardcodes its colors as SVG presentation attributes: the "P" glyph is stroked in porphyry and "lithos" filled in near-black, both of which vanish on a dark background. CSS beats presentation attributes. */ :root[data-theme="dark"] .brandmark text{fill:var(--ink)} :root[data-theme="dark"] .brandmark g{stroke:var(--pl-red)} /* Days belonging to the neighboring month. The light theme grays them with a hardcoded near-white panel, which is a bright hole in a dark grid. */ :root[data-theme="dark"] .out{background:#1a1a19;color:var(--muted)} /* ------------------------------------------------- wordmark in RTL languages */ /* The wordmark is one SVG holding the "P" glyph and the word "lithos". Under the SVG inherits the direction, the Latin is laid out right-to-left from its x anchor, and the word collapses on top of the glyph and runs off the edge. A brand name is not translated text - pin it to LTR. Same for the Latin tagline. */ .brandmark, .brandmark text{direction:ltr;unicode-bidi:isolate} .brandtagline, .tagline{unicode-bidi:isolate} /* index.html reorders the brand to the far side in RTL, which puts it in the top-left in Arabic while every other page keeps it top-right. The wordmark is the home button, so it must sit in the same corner the reader's eye starts from, on every page and in every language. html[dir=rtl] outranks the page's own [dir=rtl] rule. */ html[dir=rtl] .brand{order:0} /* Keep the home affordance obvious. */ .brand[role=link]:hover .brandmark{opacity:.82} .brand[role=link]:focus-visible{outline:2px solid var(--porphyry);outline-offset:4px;border-radius:6px} /* --------------------------------------------------------- language picker */ .pl-hidden-select{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .pl-lang{position:relative;display:inline-block} .pl-langbtn{ display:inline-flex;align-items:center;gap:9px;cursor:pointer; font-family:var(--serif,Georgia,serif);font-size:15px;color:var(--ink); background:var(--leaf);border:1px solid var(--rule);border-radius:9px;padding:7px 11px; } .pl-langbtn:hover{border-color:var(--porphyry)} .pl-langbtn:focus-visible{outline:2px solid var(--porphyry);outline-offset:2px} .pl-caret{font-size:10px;color:var(--muted)} .pl-langmenu{ position:absolute;z-index:200;inset-inline-start:0;top:calc(100% + 5px); background:var(--leaf);border:1px solid var(--rule);border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,.16);padding:5px;max-height:60vh;overflow-y:auto;min-width:190px; } .pl-langmenu[hidden]{display:none} .pl-langopt{ display:flex;align-items:center;gap:9px;width:100%;text-align:start;cursor:pointer; font-family:var(--serif,Georgia,serif);font-size:15px;color:var(--ink); background:none;border:0;border-radius:7px;padding:7px 9px;white-space:nowrap; } .pl-langopt:hover{background:var(--rail)} .pl-langbtn .langflag,.pl-langopt .langflag{ width:21px;height:14px;flex:0 0 auto;border:1px solid var(--rule);border-radius:2px;display:block; } /* ------------------------------------------------------------- theme toggle */ .pl-theme{ font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);background:none; border:1px solid var(--rule);border-radius:7px;padding:6px 9px;cursor:pointer; line-height:1;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px; } .pl-theme:hover{color:var(--porphyry);border-color:var(--porphyry)} .pl-theme:focus-visible{outline:2px solid var(--porphyry);outline-offset:2px} /* ------------------------------------------------------------- search launcher */ .pl-launch{ font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:var(--muted); background:var(--leaf);border:1px solid var(--rule);border-radius:8px; padding:7px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:9px; line-height:1;flex:0 0 auto; } .pl-launch:hover{border-color:var(--porphyry);color:var(--porphyry)} .pl-launch:focus-visible{outline:2px solid var(--porphyry);outline-offset:2px} .pl-launch kbd{ font-family:inherit;font-size:10px;letter-spacing:.06em;color:var(--muted); border:1px solid var(--rule);border-radius:4px;padding:2px 5px;background:var(--rail); } @media(max-width:640px){.pl-launch .pl-launch-kbd{display:none}} /* -------------------------------------------------------------- the palette */ .pl-ov{ position:fixed;inset:0;z-index:9000;background:rgba(18,17,15,.5); backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center; padding:9vh 16px 16px; } .pl-ov[hidden]{display:none} .pl-panel{ width:100%;max-width:640px;background:var(--leaf);border:1px solid var(--rule); border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.30);overflow:hidden; display:flex;flex-direction:column;max-height:78vh; } .pl-head{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--rule)} .pl-head svg{flex:0 0 auto;color:var(--muted)} #pl-input{ flex:1 1 auto;border:none;outline:none;background:none; font-family:var(--serif,Georgia,serif);font-size:17px;color:var(--ink);min-width:0; } #pl-input::placeholder{color:var(--muted)} .pl-esc{ font-family:var(--mono,ui-monospace,monospace);font-size:10px;letter-spacing:.08em; color:var(--muted);border:1px solid var(--rule);border-radius:4px;padding:3px 6px; background:none;cursor:pointer;flex:0 0 auto; } .pl-results{overflow-y:auto;padding:6px 0 8px;-webkit-overflow-scrolling:touch} .pl-group{ font-family:var(--mono,ui-monospace,monospace);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);padding:11px 17px 5px; } .pl-hit{ display:flex;align-items:baseline;gap:10px;width:100%;text-align:start; padding:8px 17px;border:0;background:none;cursor:pointer;color:inherit; font-family:var(--serif,Georgia,serif);font-size:15.5px; } .pl-hit:hover,.pl-hit.on{background:var(--rail)} .pl-hit.on{box-shadow:inset 3px 0 0 var(--porphyry)} .pl-name{color:var(--ink);flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pl-meta{ font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;color:var(--muted); flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .pl-day{ font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;color:var(--porphyry); flex:0 0 auto; } .pl-star{color:var(--gold);flex:0 0 auto;font-size:12px} /* A tag is a way through the shelf rather than a thing to read, so it is set the way the shelf sets its own chips: an outlined pill, not a title. */ .pl-tag .pl-name{ font-family:var(--mono,ui-monospace,monospace);font-size:12px; border:1px solid var(--rule);border-radius:999px;padding:2px 10px; color:var(--porphyry); } .pl-tag:hover .pl-name,.pl-tag.on .pl-name{border-color:var(--porphyry)} .pl-empty{padding:26px 17px;color:var(--muted);font-size:15px;text-align:center} .pl-foot{ border-top:1px solid var(--rule);padding:8px 16px;display:flex;gap:16px;flex-wrap:wrap; font-family:var(--mono,ui-monospace,monospace);font-size:10px;letter-spacing:.07em; text-transform:uppercase;color:var(--muted); } .pl-foot b{font-weight:500;color:var(--ink-soft)} @media(max-width:560px){ .pl-ov{padding:0} .pl-panel{max-width:none;max-height:100vh;height:100%;border-radius:0;border:0} .pl-foot{display:none} } @media(prefers-reduced-motion:no-preference){ .pl-panel{animation:pl-in .13s ease-out} @keyframes pl-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} }