/* ════════════════════════════════════════════════════════════════════════
   SKINS — CSS-only visual languages on <html data-skin="…">, layered over
   the baseline above and combined freely with the tone
   <html data-theme="light|dark">. EVERY SKIN SHIPS BOTH TONES — that is the
   contract. Adding one = a row in SKINS (shell.js) + a block below; nothing
   else in the app knows skins exist.

   ── brick · "Brick & paper" (design direction 03, bv4design3.png) ──
   The block language below is shared with dracula (0.5.24): every rule that
   isn't a token or card-body palette matches both skins, and dracula.css
   only brings its own colours.
   The mockup's own line: "Hard edges, offset shadows, and bold orange blocks
   turn the brick idea into a distinct identity." So: laid blocks, not
   floating cards — ink outlines, print-block shadows that never blur,
   squared chrome, an orange header bar on every band card.
   Two skin-only tokens:
     --shadow-ink  the offset block. Dark in BOTH tones — it's a shadow.
     --on-accent   ink ON an accent fill. Near-black here: white on this
                   orange is 3.07:1 and fails AA for the 11px labels, while
                   near-black is 5.37:1 and passes. Derived per-fill in
                   chrome.js when a card's tag colours its own header bar.
   ════════════════════════════════════════════════════════════════════════ */

/* ── brick · light — paper ── */
[data-skin="brick"] {
  --bg: #ece5d4;
  --surface: #fffdf6;
  --surface-2: #e2d9c4;
  --text: #221c12;
  --text-dim: #6c604e;
  --border: #231c11;
  /* The outer frame follows the board, independently of body separators. */
  --frame-border: #231c11;
  --accent: #e85d23;
  --danger: #a3211a;
  --danger-light: #a3211a;
  --danger-dark: #e2594d;
  --on-accent: #17110a;
  --shadow-ink: #231c11;
  --radius: 2px;
}

/* ── brick · dark — blackened kraft ── */
[data-skin="brick"][data-theme="dark"] {
  --bg: #16120c;
  --surface: #211c15;
  --surface-2: #2d2720;
  --text: #f2ebda;
  --text-dim: #a3947a;
  --border: #5b4f3b;
  --frame-border: #5b4f3b;
  --accent: #f26b2e;
  --danger: #e2594d;
  --on-accent: #17110a;
  --shadow-ink: #080604;
}

/* hard edges: a brick is a brick. Chips keep their pills — they're chips. */
:is([data-skin="brick"], [data-skin="dracula"]) :is(button, input, select, textarea) { border-radius: 3px; }
/* …including the login button, whose own #authGo rule outranks the line above */
:is([data-skin="brick"], [data-skin="dracula"]) .auth-card button#authGo { border-radius: 3px; }
:is([data-skin="brick"], [data-skin="dracula"]) :is(#modalBox, .auth-card, .cat-menu, .user-menu) {
  border-radius: 4px;
  box-shadow: 5px 5px 0 var(--shadow-ink);
}

/* offset print-block shadows — hard, never blurred */
:is([data-skin="brick"], [data-skin="dracula"]) .card,
:is([data-skin="brick"], [data-skin="dracula"]) .card-tile {
  border-color: var(--frame-border);
  box-shadow: 4px 4px 0 var(--shadow-ink);
}
:is([data-skin="brick"], [data-skin="dracula"]) .card:hover,
:is([data-skin="brick"], [data-skin="dracula"]) .card-tile:hover {
  border-color: var(--accent);
  box-shadow: 6px 6px 0 var(--shadow-ink);
}

/* Bold orange header bars — the identity. A card WITH a tag takes the tag's
   colour for the bar instead (its ink is derived in chrome.js), so a board
   can break up the orange without leaving the language. */
:is([data-skin="brick"], [data-skin="dracula"]) .card-head {
  background: var(--tag, var(--accent));
  color: var(--on-accent);
  border-bottom: 2px solid var(--shadow-ink);
  text-transform: uppercase;
}
:is([data-skin="brick"], [data-skin="dracula"]) .card-head .card-title {
  color: var(--on-accent); font-size: 11px; letter-spacing: 0.6px;
}
/* …but renaming types what was typed, not a shouty version of it */
:is([data-skin="brick"], [data-skin="dracula"]) .card-head .card-title-edit { text-transform: none; }
:is([data-skin="brick"], [data-skin="dracula"]) .card-head .card-badge {
  color: inherit; background: transparent; border-color: currentColor;
}
:is([data-skin="brick"], [data-skin="dracula"]) .card-head .card-tag {
  color: inherit;
  background: color-mix(in srgb, currentColor 16%, transparent);
}
:is([data-skin="brick"], [data-skin="dracula"]) .card-head .card-action {
  background: color-mix(in srgb, currentColor 15%, transparent);
  border-color: color-mix(in srgb, currentColor 38%, transparent);
  color: inherit;
}
:is([data-skin="brick"], [data-skin="dracula"]) .card-head .card-action:hover {
  background: color-mix(in srgb, currentColor 30%, transparent);
  border-color: currentColor; color: inherit;
}
:is([data-skin="brick"], [data-skin="dracula"]) .card-head .card-dot:not(.is-live):not(.is-warn) {
  background: currentColor; opacity: 0.55;
}

/* The rail IS a brick: at tile-width (the sidebar law) it reads as a solid
   orange bar down the left edge, so the chrome on it INVERTS — paper chips
   and ink blocks on orange, never orange-on-orange. Contrast held in both
   tones: ink on the rail is 5.37:1 light / 6.17:1 dark. */
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar {
  background: var(--accent);
  color: var(--on-accent);
  border-right: 2px solid var(--shadow-ink);
}
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar #newEntryBtn {
  border-radius: 3px;
  background: var(--on-accent); color: var(--accent);
  border: 1.5px solid var(--shadow-ink);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--shadow-ink) 55%, transparent);
}
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar #searchInput {
  border-radius: 3px;
  background: var(--surface); color: var(--text);
  border-color: var(--shadow-ink);
}
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .nav-item { color: var(--on-accent); border-radius: 3px; }
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar { --drop-line: var(--on-accent); }
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .nav-item:hover {
  background: color-mix(in srgb, var(--on-accent) 12%, transparent);
}
/* the active board is a paper chip — the one block on the rail that isn't */
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .nav-item.active {
  background: var(--surface); color: var(--text);
}
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .nav-item.category-drop-target {
  background: color-mix(in srgb, var(--on-accent) 14%, transparent);
  outline-color: var(--on-accent);
}
/* paper pills, not translucent ink — 11px ink on a 18%-ink tint is only
   3.86:1 and fails AA; ink on paper is 16.6:1 */
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .count,
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .nav-item.active .count {
  background: var(--surface); color: var(--text);
}
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .sidebar-foot button {
  background: var(--surface); color: var(--text);
  border-color: var(--shadow-ink);
}
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar button.user-menu-btn {
  background: transparent; border-color: transparent; color: var(--on-accent);
}
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar button.user-menu-btn:hover {
  background: color-mix(in srgb, var(--on-accent) 12%, transparent);
  border-color: transparent;
}
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .topbar-user,
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .user-caret { color: var(--on-accent); }
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar #adminBtn { color: var(--text); }

/* ── brick rail: the tree furniture ──
   The rail is a solid accent brick, so anything ON it speaks --on-accent ink.
   The baseline rules reach for --text-dim and --border, which are board values
   and would vanish on this orange. Ink at 55–60% reads on the rail AND on the
   paper chip an active row becomes, so one value serves both. */
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .sb-label {
  color: var(--on-accent);
}
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .sb-rule {
  background: color-mix(in srgb, var(--on-accent) 60%, transparent);
  opacity: 1;
}
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .nav-item[data-depth]:not([data-depth="0"])::before,
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .nav-item[data-depth]:not([data-depth="0"])::after {
  background: color-mix(in srgb, var(--on-accent) 55%, transparent);
  opacity: 1;
}
/* the active branch is solid ink — --shadow-ink is dark in BOTH tones, so it
   reads on the orange rail and on the paper chip alike */
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .nav-item.active-branch[data-depth]:not([data-depth="0"])::before,
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .nav-item.active-branch[data-depth]:not([data-depth="0"])::after {
  background: var(--shadow-ink);
}
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .nav-caret {
  color: var(--on-accent);
  border-radius: 2px;
}
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .nav-caret:hover {
  background: color-mix(in srgb, var(--on-accent) 16%, transparent);
}
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .nav-item.active .nav-caret { color: var(--accent); }

/* Every independently themed body uses the same kraft/paper palette.
   --border stays quiet for internal rules; --frame-border owns the edge. */
[data-skin="brick"] :is(.card-note, .card-table, .card-checklist, .card-snippet,
  .card-embed, .card-credential, .card-music, .card-media, .card-terminal,
  .card-rss, .card-server) {
  --bg: #16120c; --surface: #211c15; --surface-2: #2d2720;
  --text: #e8e0cd; --text-dim: #a3947a; --border: #3b3226;
}
[data-skin="brick"] :is(.card-note-light, .card-table-light, .card-snippet-light,
  .card-checklist-light, .card-embed-light, .card-credential-light,
  .card-music-light, .card-media-light, .card-terminal-light, .card-rss-light,
  .card-calendar-light, .card-server-light) {
  --bg: #ece5d4; --surface: #fffdf6; --surface-2: #e2d9c4;
  --text: #221c12; --text-dim: #6c604e; --border: #cfc3a8;
}

/* The admin panel (admin.css) is an ops surface, but it should still wear the
   skin. admin.css loads AFTER this file and hardcodes its own radii, so these
   need the extra class to win on specificity rather than on source order.
   Tabs keep their square bottom edge — they're tabs. */
:is([data-skin="brick"], [data-skin="dracula"]) :is(.adm-head, .adm-actions) button { border-radius: 3px; }
:is([data-skin="brick"], [data-skin="dracula"]) .adm-tabs button { border-radius: 3px 3px 0 0; }
:is([data-skin="brick"], [data-skin="dracula"]) .adm-table select { border-radius: 3px; }
:is([data-skin="brick"], [data-skin="dracula"]) .adm-stat {
  border-radius: 3px;
  box-shadow: 3px 3px 0 var(--shadow-ink);
}

/* rail furniture on the orange brick: logo, heading controls, avatar */
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .sb-brand img { filter: brightness(0); }
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .sb-brand { color: var(--on-accent); }
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar :is(.sb-quota, .sb-add) { color: var(--on-accent); }
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .sb-add { border-color: color-mix(in srgb, var(--on-accent) 60%, transparent); }
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .user-avatar { background: var(--on-accent); color: var(--accent); }

/* ── 0.5.23 polish: the draft (briks.at/draft/ui-polish.png) ── */
/* Add Brik is a paper block on the rail: ink label, orange "+" stamp, key hint */
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar #newEntryBtn {
  background: var(--surface); color: var(--text);
  border: 2px solid var(--shadow-ink);
  box-shadow: 3px 3px 0 var(--shadow-ink);
}
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar #newEntryBtn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow-ink); }
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar #newEntryBtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow-ink); }
:is([data-skin="brick"], [data-skin="dracula"]) .nb-plus {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  background: var(--accent); color: var(--on-accent); border: 1.5px solid var(--shadow-ink); font-weight: 800;
}
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar #searchInput { border-width: 2px; }
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .sb-search { color: var(--text-dim); }
/* the active category sits raised, like a card */
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .nav-item.active::before { display: none; }
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .nav-item.active {
  border: 2px solid var(--shadow-ink);
  box-shadow: 3px 3px 0 var(--shadow-ink);
  font-weight: 700;
}
/* square markers instead of loose text rows (top level only; subcategories keep their tree lines) */
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .nav-item[data-depth="0"] .nav-slot::before {
  content: ''; width: 9px; height: 9px; border: 1.5px solid currentColor; opacity: .7;
}
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .nav-item.active .nav-slot::before { background: var(--accent); opacity: 1; }
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .sidebar-foot .sb-gear { background: transparent; border-color: transparent; color: var(--on-accent); }
:is([data-skin="brick"], [data-skin="dracula"]) #sidebar .sidebar-foot .sb-gear:hover { background: color-mix(in srgb, var(--on-accent) 12%, transparent); }

/* one head height everywhere; the status chip reads as ink on the bar */
:is([data-skin="brick"], [data-skin="dracula"]) .card-head .card-status { color: inherit; }

/* bookmark monograms are little bricks */
:is([data-skin="brick"], [data-skin="dracula"]) .bookmark-mono { border: 2px solid var(--shadow-ink); border-radius: 2px; }

/* tables: kraft stripes, an ink rule over the total */
:is([data-skin="brick"], [data-skin="dracula"]) .tbl tfoot td { border-top-color: var(--shadow-ink); }
:is([data-skin="brick"], [data-skin="dracula"]) .srv-setup { border: 1.5px solid var(--shadow-ink); border-radius: 2px; box-shadow: 2px 2px 0 var(--shadow-ink); }

/* dialogs are bricks too: orange title bar and a kraft footer */
:is([data-skin="brick"], [data-skin="dracula"]) #modalBox { padding: 0; border: 2px solid var(--shadow-ink); }
:is([data-skin="brick"], [data-skin="dracula"]) .modal-head {
  margin: 0; padding: 6px 8px 6px 16px; background: var(--accent); color: var(--on-accent);
  border-bottom: 2px solid var(--shadow-ink);
  text-transform: uppercase; letter-spacing: .6px; font-size: 13px;
}
:is([data-skin="brick"], [data-skin="dracula"]) .modal-head button { color: var(--on-accent); }
:is([data-skin="brick"], [data-skin="dracula"]) .modal-head #modalClose { background: var(--surface); color: var(--text); border: 1.5px solid var(--shadow-ink); border-radius: 2px; padding: 2px 8px; }
:is([data-skin="brick"], [data-skin="dracula"]) #modalBody { padding: 16px; }
:is([data-skin="brick"], [data-skin="dracula"]) #modalError { margin: 0 16px 12px; }
:is([data-skin="brick"], [data-skin="dracula"]) .modal-foot { margin: 0; padding: 10px 16px; background: var(--surface-2); border-top: 2px solid var(--shadow-ink); }
:is([data-skin="brick"], [data-skin="dracula"]) .modal-foot button { border: 1.5px solid var(--shadow-ink); border-radius: 2px; box-shadow: 2px 2px 0 var(--shadow-ink); font-weight: 700; }
:is([data-skin="brick"], [data-skin="dracula"]) #modalCancel { background: var(--surface); }
:is([data-skin="brick"], [data-skin="dracula"]) :is(.form-grid input, .form-grid textarea, .form-grid select, .icon-field) { border: 2px solid var(--shadow-ink); background: var(--surface); border-radius: 2px; }
:is([data-skin="brick"], [data-skin="dracula"]) .icon-field input { border: 0; }
:is([data-skin="brick"], [data-skin="dracula"]) :is(.form-grid input, .form-grid textarea, .auth-card input):focus {
  outline: none; border-color: var(--shadow-ink); box-shadow: 3px 3px 0 var(--accent);
}
:is([data-skin="brick"], [data-skin="dracula"]) .ne-tabs button { border: 1.5px solid var(--shadow-ink); border-radius: 2px; }
:is([data-skin="brick"], [data-skin="dracula"]) .ne-tabs button.active { box-shadow: 3px 3px 0 var(--shadow-ink); }
:is([data-skin="brick"], [data-skin="dracula"]) .ne-icon { border: 1.5px solid var(--shadow-ink); border-radius: 2px; }

/* settings wears the skin: hard edges, orange title bar, kraft tab column */
:is([data-skin="brick"], [data-skin="dracula"]) .settings-box { border: 2px solid var(--shadow-ink); border-radius: 4px; box-shadow: 6px 6px 0 var(--shadow-ink); }
:is([data-skin="brick"], [data-skin="dracula"]) .settings-head { background: var(--accent); color: var(--on-accent); border-bottom: 2px solid var(--shadow-ink); padding-top: 8px; padding-bottom: 8px; }
:is([data-skin="brick"], [data-skin="dracula"]) .settings-head h1 { font-size: 14px; text-transform: uppercase; letter-spacing: .8px; }
:is([data-skin="brick"], [data-skin="dracula"]) .settings-head .settings-email { color: var(--on-accent); }
:is([data-skin="brick"], [data-skin="dracula"]) .settings-head .settings-close { background: var(--surface); color: var(--text); border: 1.5px solid var(--shadow-ink); border-radius: 2px; }
:is([data-skin="brick"], [data-skin="dracula"]) .v5-page .settings-tab[aria-selected="true"] { border: 2px solid var(--shadow-ink); border-left-width: 2px; box-shadow: 3px 3px 0 var(--shadow-ink); }
:is([data-skin="brick"], [data-skin="dracula"]) .v5-panel { border: 2px solid var(--shadow-ink); border-radius: 2px; box-shadow: 4px 4px 0 var(--shadow-ink); }
:is([data-skin="brick"], [data-skin="dracula"]) .look-seg button { border: 1.5px solid var(--shadow-ink); border-radius: 2px; }
:is([data-skin="brick"], [data-skin="dracula"]) .look-seg button.active { background: var(--accent); color: var(--on-accent); font-weight: 700; }
:is([data-skin="brick"], [data-skin="dracula"]) .look-swatches button { border-radius: 2px; }
:is([data-skin="brick"], [data-skin="dracula"]) .look-swatches button.active { border: 2px solid var(--accent); }
:is([data-skin="brick"], [data-skin="dracula"]) .look-chip { border: 1.5px solid var(--shadow-ink); border-radius: 2px; }

/* log in: an orange-headed brick on a faint laid-brick wall */
:is([data-skin="brick"], [data-skin="dracula"]) #authView {
  background-color: var(--bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px);
  background-size: 64px 32px;
}
:is([data-skin="brick"], [data-skin="dracula"]) .auth-card { padding: 0; gap: 0; border: 2px solid var(--shadow-ink); overflow: hidden; }
:is([data-skin="brick"], [data-skin="dracula"]) .auth-head {
  justify-content: flex-start; padding: 14px 18px;
  background: var(--accent); color: var(--on-accent); border-bottom: 2px solid var(--shadow-ink);
}
:is([data-skin="brick"], [data-skin="dracula"]) .auth-head img { filter: brightness(0); }
:is([data-skin="brick"], [data-skin="dracula"]) .auth-tagline { color: var(--on-accent); opacity: .8; }
:is([data-skin="brick"], [data-skin="dracula"]) #authBody { padding: 20px 18px; }
:is([data-skin="brick"], [data-skin="dracula"]) .auth-card input { background: #fff; border: 2px solid var(--shadow-ink); border-radius: 2px; }
:is([data-skin="brick"], [data-skin="dracula"])[data-theme="dark"] .auth-card input { background: var(--surface-2); }
:is([data-skin="brick"], [data-skin="dracula"]) .auth-card button[type=submit] {
  background: var(--shadow-ink); color: var(--surface); border-radius: 2px;
  box-shadow: 3px 3px 0 var(--accent);
}
:is([data-skin="brick"], [data-skin="dracula"])[data-theme="dark"] .auth-card button[type=submit] { background: var(--text); color: var(--bg); }