/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://yourdomain.com
Description: Child theme for Twenty Twenty-Five — sharp HCI dashboard aesthetic with design tokens
Author: You
Template: twentytwentyfive
Version: 1.8.7
*/

/* =========================================================
   DESIGN TOKENS — single source of truth.
   Reuse via var(--token). Swap themes by overriding these.
   ========================================================= */

:root {
  /* --- Typography --- */
  --font-mono:  ui-monospace, "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  --font-sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: ui-serif, Georgia, "Times New Roman", serif;

  --t-xs:  0.75rem;
  --t-sm:  0.85rem;
  --t-md:  1rem;
  --t-lg:  1.25rem;
  --t-xl:  1.75rem;
  --t-2xl: 2.5rem;

  /* --- Per-section accents (do not change — site identity) --- */
  --sec-about:    #d4536e;
  --sec-blog:     #5b8aee;
  --sec-projects: #3a9d5d;
  --sec-bots:     #c0823a;
  --sec-social:   #7c5cbf;

  --accent:       #5b8aee;    /* site accent: AI links, badges, blog hover */
  --danger:       #e5484d;    /* destructive actions: delete, revoke, errors */
  --danger-hover: #c93a40;    /* armed destructive hover shade */

  /* --- Shape & borders (sharp HCI) --- */
  --radius:          2px;
  --radius-pill:     999px;
  --border-w:        1px;
  --border-w-strong: 2px;

  /* --- Motion --- */
  --ease:     cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 100ms;
  --dur:      150ms;
  --dur-slow: 250ms;

  /* --- Spacing (4px grid) --- */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem;
  --s-4: 1rem;    --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem;    --s-12: 3rem;

  /* --- LIGHT theme (default — matches device unless overridden) --- */
  --bg:       #ffffff;
  --bg-2:     #fafafa;
  --bg-3:     #f0f0f2;
  --fg:       #0f0f13;
  --fg-2:     #4a4a55;
  --fg-3:     #6e6e80;   /* AA on white (was #8a8a95 ≈ 3.4:1) */
  --border:   #e0e0e5;
  --border-2: #c8c8d0;

  /* --- Status colors (AA per theme) --- */
  --status-on:  #15803d;  /* light: 4.5:1 on white */
  --status-off: #dc2626;  /* light: 4.5:1 on white */

  /* --- T25 bridge: map new tokens onto the parent's preset variables
     so the topbar, mobile menu, and any other T25-styled chrome follow
     our theme without rewriting their rules. --- */
  --wp--preset--color--base:       var(--bg);
  --wp--preset--color--base-2:     var(--bg-2);
  --wp--preset--color--contrast:   var(--fg);
  --wp--preset--color--contrast-2: var(--fg-2);
  --wp--preset--color--contrast-3: var(--border);
}

/* ===== BREAKPOINT KEY =====
   Canonical thresholds (px). The +1 variants are deliberate: adjacent
   ranges are max-width: N / min-width: N+1 so no viewport falls in a gap
   or double-matches.
     480   small phones (single-column grids)
     700   large-mode floor (scaled-area / zoom reset)
     768   mobile (topbar, hamburger, editor chrome)
    1257   editor-page rail mode (tree.js parity: innerWidth > 1256)
    1289   page rail mode (non-editor pages)
    1471   rail hug-mode ceiling (>= 1472 hugs the content column)
*/
/* --- DARK follows device preference (unless user overrode) --- */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg:       #0f0f13;
    --bg-2:     #161620;
    --bg-3:     #1f1f2c;
    --fg:       #e8e8ed;
    --fg-2:     #b8b8c4;
    --fg-3:     #9696a4;   /* AA on dark (was #78788a) */
    --border:   #2a2a38;
    --border-2: #3a3a4a;
    --status-on:  #22C55E;  /* dark: ~8:1 */
    --status-off: #f87171;  /* dark: ~7:1 */
  }
}

/* --- Manual override (toggle button wins over device) --- */
html.dark {
  --bg:       #0f0f13;
  --bg-2:     #161620;
  --bg-3:     #1f1f2c;
  --fg:       #e8e8ed;
  --fg-2:     #b8b8c4;
  --fg-3:     #9696a4;
  --border:   #2a2a38;
  --border-2: #3a3a4a;
  --status-on:  #22C55E;
  --status-off: #f87171;
}
html.light {
  --bg:       #ffffff;
  --bg-2:     #fafafa;
  --bg-3:     #f0f0f2;
  --fg:       #0f0f13;
  --fg-2:     #4a4a55;
  --fg-3:     #6e6e80;
  --border:   #e0e0e5;
  --border-2: #c8c8d0;
  --status-on:  #15803d;
  --status-off: #dc2626;
}

html, body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
}
html {
  transition: background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}

/* Manual dark mode: gentle blue link color using section accent */
html.dark a:not([class]) { color: var(--sec-blog); }

/* --- Universal focus ring (HCI must-have) --- */
:focus-visible {
  outline: var(--border-w-strong) solid var(--sec-blog);
  outline-offset: var(--border-w-strong);
}

/* --- Skip link (a11y) --- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-2);
  z-index: 9999;
  padding: var(--s-2) var(--s-4);
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-2); }

.skip-target {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Theme toggle icon swap (CSS-driven, robust against JS race conditions) --- */
.theme-toggle .theme-icon-dark  { display: none; }
.theme-toggle .theme-icon-light { display: inline; }
html.dark .theme-toggle .theme-icon-light { display: none; }
html.dark .theme-toggle .theme-icon-dark  { display: inline; }

/* ===== HAMBURGER BUTTON (mobile) ===== */

/* Twenty Twenty-Five responsive-nav "Open menu" button — enlarge tap target */
.wp-block-navigation__responsive-container-open {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

/* Skip link: 44px hit area when focused */
.skip-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.hamburger {
  display: none;
  background: none;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: 0;                          /* let flex centering handle the inner offset */
  min-width: 44px;                     /* WCAG 2.5.8 tap target */
  min-height: 44px;
  cursor: pointer;
  color: inherit;
  font-size: 1.3rem;
  line-height: 1;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  position: relative;
  z-index: 310;                        /* above the overlay (200) + panel (300): stays toggleable when open */
}

.hamburger:hover { opacity: 1; }

/* ===== MOBILE TOP BAR ===== */
.mobile-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;   /* condensed: 6 items (logo, theme, A+, ✏️, 🌳, ☰) must fit 360px */
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--wp--preset--color--base, #fff);
  border-bottom: 1px solid var(--wp--preset--color--contrast-3, #ddd);
}

/* No admin-bar offset needed: the WP admin bar is hidden on mobile, and a
   sticky top offset would push the topbar down + overlap the title card. */

.mobile-topbar .mobile-logo {
  font-family: var(--font-mono);   /* match the desktop site title */
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  min-height: 44px;                /* WCAG 2.5.8 tap target */
}

.mobile-topbar .mobile-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle,
.size-toggle,
.icly-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;                     /* WCAG 2.5.8 tap target (was 36) */
  height: 44px;
  border: 1px solid var(--wp--preset--color--accent-6, currentColor);
  border-radius: var(--radius);
  background: var(--wp--preset--color--base);
  color: inherit;
  cursor: pointer;
  font-size: 1.1rem;
  opacity: 0.85;
  transition: opacity 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.theme-toggle:hover,
.size-toggle:hover,
.icly-edit-btn:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--wp--preset--color--base), var(--wp--preset--color--contrast) 8%);
  border-color: var(--wp--preset--color--contrast);
  box-shadow: 0 1px 4px var(--wp--preset--color--accent-6);
}

/* Desktop: floating toggle in bottom-right */
.floating-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Uniform floating stack (all 44x44, 10px gaps, bottom-up):
   theme toggle @ 1.5rem, ✏️ edit @ +44+10, A/A+ @ +44+10 */
.floating-size-toggle {
  bottom: calc(1.5rem + 44px + 10px + 44px + 10px);
}

@media (max-width: 768px) {
  .floating-toggle { display: none; }
  .icly-edit-btn { display: none !important; }  /* the topbar ✏️ replaces it on mobile */
  /* the edit modal's toggles are desktop-only too */
  .icly-editor-controls .theme-toggle,
  .icly-editor-controls .size-toggle { display: none; }
  /* the site header is hidden on mobile — the EDIT subnav pins to the top */
  body.icly-editor-page .icly-page-editor-topbar {
    top: 0;
  }
  /* the mobile subnav is taller (title + buttons wrap) — clear it fully */
  body.icly-editor-page .icly-page-editor {
    padding-top: 120px;
  }
}

/* ===== INLINE EDITOR (floating ✏️ button + modal) ===== */
.icly-edit-btn {
  position: fixed;
  bottom: calc(1.5rem + 44px + 10px);  /* 10px above the theme toggle */
  right: 1.5rem;
  z-index: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);  /* match the floating toggles */
}

/* Mobile topbar edit button — same look as the theme toggle there */
.icly-edit-topbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 44px;
  min-height: 44px;
  font-size: 1.1rem;
  line-height: 1;
  background: var(--bg);
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}

.icly-edit-topbar:hover {
  border-color: var(--border-2);
}

.icly-editor-modal-holder { position: fixed; inset: 0; z-index: 900; }

#icly-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  padding: var(--s-4);
}

#icly-editor-modal[hidden] { display: none; }

.icly-editor-card {
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.icly-editor-head {
  font-family: var(--font-mono);
  font-size: var(--t-lg);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

.icly-editor-prefix { color: var(--sec-social); font-weight: 700; }

.icly-editor-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.icly-editor-field-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--fg-3);
}

.icly-editor-field input,
.icly-editor-field textarea {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  resize: vertical;
}

/* MODE dropdown — same token treatment as the inputs; color-scheme makes
   the native popup render in the active theme (dark / light). */
.icly-editor-field select {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  color-scheme: light;
}
html.dark .icly-editor-field select {
  color-scheme: dark;
}
.icly-editor-field select:focus {
  outline: none;
  border-color: var(--border-2);
}
.icly-editor-field select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.icly-editor-field input:focus,
.icly-editor-field textarea:focus {
  outline: none;
  border-color: var(--border-2);
}

.icly-editor-hint {
  font-size: 0.75rem;
  color: var(--fg-3);
  margin: 0;
}

.icly-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
}

.icly-btn-save {
  border-color: var(--sec-projects);
  color: var(--sec-projects);
}

.icly-btn-save:hover {
  background: rgba(58, 157, 93, 0.08);
}

.icly-btn-save:disabled {
  opacity: 0.5;
  cursor: wait;
}

.icly-btn-danger {
  border-color: var(--danger);
  color: var(--danger);
}

.icly-btn-danger:hover {
  background: rgba(229, 72, 77, 0.08);
}

.icly-btn-danger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Delete confirmation strip (below the topbar on /edit/) */
.icly-delete-confirm {
  border-bottom: 1px solid var(--border);
  border-left: 2px solid var(--danger);
  padding: var(--s-3) var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  background: rgba(229, 72, 77, 0.04);
}

.icly-delete-confirm[hidden] { display: none; }

.icly-delete-text {
  margin: 0;
  font-size: 0.8rem;
  color: var(--fg-2);
}

/* Nested-deletion warning (cascade into children) */
.icly-delete-children {
  margin: 0;
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--danger);
  background: rgba(229, 72, 77, 0.07);
  border: 1px dashed rgba(229, 72, 77, 0.5);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
}

.icly-delete-children[hidden] { display: none; }

/* Second-stage armed state — solid danger, must be clicked again */
.icly-delete-confirm .icly-btn-armed {
  background: var(--danger);
  color: #ffffff;
  border-color: var(--danger);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.icly-delete-confirm .icly-btn-armed:hover {
  background: var(--danger-hover);
  color: #ffffff;
}

.icly-delete-confirm input {
  flex: 1;
  min-width: 200px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
}

.icly-delete-confirm input:focus {
  outline: none;
  border-color: var(--danger);
}

.icly-delete-actions {
  display: flex;
  gap: var(--s-2);
}

@media (max-width: 768px) {
  .icly-delete-confirm {
    flex-direction: column;
    align-items: stretch;
  }
  .icly-delete-confirm input {
    min-width: 0;
  }
  .icly-delete-actions .icly-btn {
    flex: 1;
    min-height: 44px;
  }
}

/* Modal top-right controls: expand + close */
.icly-editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.icly-editor-controls {
  display: flex;
  gap: var(--s-2);
}

.icly-editor-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}

.icly-editor-iconbtn:hover {
  border-color: var(--border-2);
  color: var(--fg);
}

/* ===== AI PANELS (refine / research — under the editors) ===== */
.icly-ai-panels {
  margin-top: var(--s-3);
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.icly-ai-usage {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--fg-3);
  letter-spacing: 0.03em;
}

.icly-ai-panels details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.icly-ai-panels summary {
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  user-select: none;
}

.icly-ai-panels pre {
  margin: 0;
  padding: 0.5rem 0.6rem;
  border-top: 1px solid var(--border);
  white-space: pre-wrap;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--fg);
  max-height: 240px;
  overflow-y: auto;
}

.icly-ai-panels .icly-ai-sources div {
  padding: 0.5rem 0.6rem;
  border-top: 1px solid var(--border);
  line-height: 1.7;
}

.icly-ai-panels .icly-ai-sources a {
  color: var(--accent);
}

/* ===== PAGE TREE SIDEBAR (left rail) ===== */
.icly-tree-sidebar {
  position: fixed;
  top: 96px;
  /* Desktop: hug the centered content column — rail box (258px) + 24px
     gap from the content's left edge, never closer than 1.5rem to the
     viewport. Mobile switches to the drawer (left: auto) below. */
  /* the 298px constant (rail 258 + gap 40) is divided by the display
     zoom so the scaled rail lands at the same visual spot: normal mode
     has no --large-zoom (fallback 1), large mode divides by the zoom */
  left: max(1.5rem, calc((100% - var(--wp--style--global--content-size)) / 2 - (298px / var(--large-zoom, 1))));
  right: auto;
  width: 232px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  z-index: 300;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-3);
  line-height: 1.4;
}

/* The admin bar (32px, admins only) pushes page content down but NOT fixed
   elements — drop the rail below it so it keeps its gap from the header.
   WP puts the admin-bar class on <body>, not <html>. */
body.admin-bar .icly-tree-sidebar {
  top: calc(96px + 32px);
}

/* /edit/ has its own document-attached topbar (~79px). The admin bar is
   hidden there, so kill its leftover html margin-top bump (32px, which
   would leave a dead gap above the topbar) and keep the rail below it. */
html.icly-editor-html {
  margin-top: 0 !important;
}

body.icly-editor-page {
  /* height of the site header rendered above the editor topbar (desktop) */
  --icly-header-h: 71px;
}

body.icly-editor-page .icly-tree-sidebar {
  top: calc(var(--icly-header-h, 0px) + 79px + 24px);
  /* The 860px hug only fits the UNZOOMED editor column. In large mode the
     zoomed 100% shrinks the calc into the 1.5rem clamp (rail pinned to the
     left edge) while the editor shifts right — so large mode falls back to
     the base rule's 645-divided position, which lands the rail where it
     visually belongs. */
}
/* /edit/ rail position only makes sense beside the 860px column — from
   1472px up. Scoped to that range so it cannot fight the drawer rules:
   the drawer media queries' left:auto (lower specificity) must actually win,
   otherwise the rail stays pinned at the viewport edge and overlaps the
   topbar + editor fields between 1257–1471px (e.g. 1280px-wide screens). */
@media (min-width: 1472px) {
  html:not(.icly-large) body.icly-editor-page .icly-tree-sidebar {
    /* /edit/ column is 860px — hug it the same way (≥1472px rail mode) */
    left: max(1.5rem, calc((100% - 860px) / 2 - 298px));
  }
}

/* The /edit/ page's editor is bare (no card wrapper). Restore WP's original
   border BOX around the content region, themed to match the site's other
   borders (cards, topbar, rail all use --border). */
body.icly-editor-page .wp-editor-container {
  border: 1px solid var(--border);
}

/* Delete-confirm strip is open — drop the rail below it (height set by JS) */
body.icly-delete-open .icly-tree-sidebar {
  top: calc(var(--icly-header-h, 0px) + 79px + var(--icly-confirm-h, 0px) + 24px);
}

/* /edit/ has a wider (860px) column — beside the rail it only fits from
   ~1472px up (rail 282 + gap 24 + 860 = 1166 → needs (vw-860)/2 ≥ 306).
   Between the global drawer breakpoint (1289) and 1471px it uses the
   drawer instead, opened by the topbar 🌳 button. */
@media (min-width: 1257px) and (max-width: 1471px) {
  body.icly-editor-page .icly-tree-sidebar {
    top: 0;
    right: -100%;
    left: auto;
    width: min(300px, 85vw);
    height: 100vh;
    max-height: none;
    z-index: 700;
    border-radius: 0;
    border-top: none;
    border-bottom: none;
    border-right: none;
    overflow-y: auto;
    transition: right 0.25s ease;
  }

  body.icly-editor-page .icly-tree-sidebar.icly-tree-open {
    right: 0;
  }

  body.icly-editor-page .icly-tree-topbar {
    display: inline-flex;
  }
}

.icly-tree-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-2);
}

.icly-tree-head .icly-tree-prefix {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--fg-3);
}

.icly-tree-master {
  background: none;
  border: none;
  padding: 0 2px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1;
  color: var(--fg-3);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.icly-tree-master:hover {
  color: var(--fg);
}

.icly-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.icly-tree li ul {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--border); /* indent guide */
}

.icly-tree-toggle {
  background: none;
  border: none;
  padding: 0;
  margin-right: 4px;
  width: 18px;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--fg-3);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.icly-tree-toggle:hover {
  color: var(--fg);
}

/* Match the mobile nav panel on phones; compact on the desktop rail.
   font-size: inherit = exact nav-panel size on mobile; the desktop rail
   uses 0.9rem so it reads as a secondary sidebar, not body text. */
.icly-tree a.icly-tree-link {
  display: -webkit-inline-box;   /* inline-level so the ▾ toggle stays on the row */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 180px;
  vertical-align: middle;
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 0.3rem 0.4rem;
  border-radius: var(--radius);
  color: var(--fg-2);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.icly-tree a.icly-tree-link:hover {
  color: var(--fg);
  background: rgba(128, 128, 128, 0.1);
}

.icly-tree a.icly-tree-current,
html.dark .icly-tree a.icly-tree-current {
  color: var(--fg);
  font-weight: 600;
  background: rgba(128, 128, 128, 0.12);
}

/* dark-mode pinning: unclassed <a> get painted blue by an older global rule */
html.dark .icly-tree a.icly-tree-link {
  color: var(--fg-2);
}

html.dark .icly-tree a.icly-tree-link:hover {
  color: var(--fg);
}

/* Floating open button (tablets 768–1289px only — phones use the topbar
   button, desktop has the rail) + click-away overlay */
.icly-tree-fab {
  display: none;
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 600;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}

.icly-tree-fab:hover {
  border-color: var(--border-2);
}

/* Topbar tree button (mobile topbar + /edit/ topbar) — same look as the
   edit topbar button; shown only while the drawer is the active mode. */
.icly-tree-topbar {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 44px;
  min-height: 44px;
  font-size: 1.1rem;
  line-height: 1;
  background: var(--bg);
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}

.icly-tree-topbar:hover {
  border-color: var(--border-2);
}

.icly-tree-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 650;
}

.icly-tree-overlay[hidden] {
  display: none;
}

/* Mobile / narrow: rail becomes an off-canvas drawer + FAB button.
   1289px is where the desktop rail first clears the 645px content column
   unclamped (rail 232 + 24px gap + centred column) — below that the rail
   clamps to the viewport edge and can touch the content, so use the
   drawer instead. The drawer sits ABOVE the overlay (650). */
@media (max-width: 1289px) {
  .icly-tree-sidebar {
    top: 0;
    right: -100%;
    left: auto;
    width: min(300px, 85vw);
    height: 100vh;
    max-height: none;
    z-index: 700;
    border-radius: 0;
    border-top: none;
    border-bottom: none;
    border-right: none;
    overflow-y: auto;
    /* same slide speed as the mobile nav panel (0.25s ease) */
    transition: right 0.25s ease;
  }

  .icly-tree-sidebar.icly-tree-open {
    right: 0;
  }

  /* The /edit/ page's rail rules (top/left) are more specific than this
     media query — force the drawer geometry there too. Same for the
     admin-bar offset (body.admin-bar persists on phones even though the
     bar itself is hidden — without this the drawer would start 128px down). */
  body.icly-editor-page .icly-tree-sidebar,
  body.admin-bar .icly-tree-sidebar {
    top: 0;
    left: auto;
  }

  .icly-tree-fab {
    display: inline-flex;
  }

  .icly-tree-topbar {
    display: inline-flex;
  }

  /* drawer mode (mobile): match the nav panel's big readable size */
  .icly-tree a.icly-tree-link {
    font-size: inherit;
  }

  /* stack the tree button ABOVE the floating theme toggle (1.5rem),
     ✏️ edit button (+44+10) and A/A+ size toggle (+44+10) — the same
     offset the auto-drawer FAB uses, so they never overlap */
  @media (min-width: 768px) {
    .icly-tree-fab {
      bottom: calc(1.5rem + 44px + 10px + 44px + 10px + 44px + 10px);
    }
  }
}

/* Phones: the topbar 🌳 replaces the floating FAB entirely */
@media (max-width: 767px) {
  .icly-tree-fab {
    display: none;
  }
}

/* On /edit/ the topbar has its own 🌳 button — hide the FAB there */
body.icly-editor-page .icly-tree-fab {
  display: none;
}

/* ===== FULL PAGE EDITOR (/edit/) ===== */
body.icly-editor-page {
  background: var(--bg);
  color: var(--fg);
}

body.icly-editor-page #wpadminbar { display: none !important; }

.icly-page-editor {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* the document-attached EDIT bar is out of flow — keep the content below it */
  padding-top: 79px;
}

.icly-page-editor-topbar {
  /* sub-navigation bar: attached below the site header in the document,
     so it scrolls away with the main navigation instead of floating below
     an already-scrolled header. It remains outside the editor div so the
     editor's large-mode transform never moves it. */
  position: absolute;
  top: var(--icly-header-h, 71px);
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;   /* title + actions as one centered group */
  gap: var(--s-2);           /* close the gap — the group stays tight */
  /* constrain the topbar content to the same 860px column as the editor,
     so title + actions line up with the content edges on wide screens */
  padding: var(--s-3) max(var(--s-4), calc((100% - 860px) / 2));
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.icly-page-editor-title {
  font-family: var(--font-mono);
  font-size: var(--t-lg);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
  white-space: nowrap;      /* single-line subnav title */
  overflow: hidden;
  text-overflow: ellipsis;
}

.icly-page-editor-parent {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--fg-3);
}

.icly-page-editor-parent a,
html.dark .icly-page-editor-parent a.icly-parent-link {
  color: var(--fg-2);
  text-decoration: underline;
}

.icly-page-editor-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: nowrap;   /* one row even at 1.5x — a wrapped row doubles the bar height */
  flex-shrink: 0;      /* keep the natural button width; the title ellipsizes instead */
}

.icly-page-editor-titles {
  min-width: 0;   /* let the h1 ellipsize instead of pushing the actions */
}

.icly-page-editor-actions .icly-btn {
  height: 36px;
  min-height: 0;
  width: auto;      /* let text + padding size the button (the .icly-tree-topbar
                       base forces width:36px/min-width:44px, which would squeeze
                       the TREE label) */
  min-width: 0;
  line-height: 1;
  padding: 0 var(--s-4);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Icon-only action buttons (➕ ⬅️ 🌳 🗑️ 💾) — fixed squares */
.icly-page-editor-actions .icly-btn-icon {
  width: 36px;
  min-width: 36px;
  padding: 0;
  font-size: 1.05rem;
}

.icly-page-editor-main {
  width: 100%;
  max-width: 860px;
  box-sizing: border-box;  /* 860 includes the horizontal padding */
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* ===== COMMENTS TOGGLE (editor page) ===== */
.icly-slug-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.icly-slug-preview {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--fg-3);
  letter-spacing: 0.03em;
  word-break: break-all;
}

.icly-comments-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}.icly-comments-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}

.icly-collab-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: var(--s-1) 0;
}

.icly-collab-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  padding: var(--s-1) 0;
  border-bottom: 1px solid var(--border);
}

.icly-collab-row:last-child {
  border-bottom: none;
}

.icly-collab-avatar img {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border-2);
}

.icly-collab-name {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icly-collab-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 1px 6px;
  margin-left: auto;
}

.icly-collab-remove {
  background: none;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.icly-collab-remove:hover,
.icly-collab-remove:focus-visible {
  color: var(--danger);
  border-color: var(--danger);
}

.icly-collab-add {
  display: flex;
  gap: var(--s-2);
  margin: var(--s-1) 0;
}

.icly-collab-add[hidden] {
  display: none;   /* the display:flex above would otherwise beat the hidden attribute */
}

.icly-collab-add {
  position: relative;
}

.icly-collab-add input {
  flex: 1;
  min-width: 0;
}

.icly-collab-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  max-height: 260px;
  overflow-y: auto;
}

.icly-collab-suggest li {
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icly-collab-suggest li.icly-collab-suggest-active {
  background: var(--accent-dim, var(--border));
  outline: 1px solid var(--border-2);
}

.icly-collab-suggest li.icly-collab-suggest-added {
  color: var(--fg-3);
}

.icly-collab-add-btn {
  min-width: 64px;
}

.icly-comments-row .icly-editor-field-label {
  min-width: 7.5rem;
}

.icly-switch {
  --on: var(--sec-projects);
  position: relative;
  width: 40px;
  height: 22px;
  padding: 0;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  flex: none;
}

.icly-switch .icly-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: var(--fg-3);
  border-radius: var(--radius);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.icly-switch[aria-checked="true"] {
  background: var(--on);
  border-color: var(--on);
}

.icly-switch[aria-checked="true"] .icly-switch-knob {
  background: #ffffff;
  transform: translateX(18px);
}

.icly-switch:hover {
  border-color: var(--fg-3);
}

.icly-comments-state {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  min-width: 2.4rem;
}

.icly-comments-state.icly-on {
  color: var(--sec-projects);
}

.icly-comments-note {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--fg-3);
}

@media (max-width: 768px) {
  .icly-comments-note {
    display: none;
  }
}

.icly-page-editor-main .icly-editor-hint {
  padding-bottom: var(--s-6);
}

@media (max-width: 768px) {
  body.icly-editor-page > .wp-block-template-part:first-child {
    display: none;
  }
  .icly-page-editor-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
    padding: var(--s-2);
  }
  .icly-page-editor-actions .icly-btn {
    height: 44px;
    min-height: 0;
    flex: 1;
  }
  .icly-page-editor-actions .icly-btn-icon {
    flex: none;
    width: 44px;
    min-width: 44px;
  }
}

/* TinyMCE inside the editor modal — sharp HCI chrome */
.icly-editor-card .wp-editor-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.icly-editor-card .wp-editor-container {
  border: none;
}

/* Toolbar row — unscoped so both the modal (inside .icly-editor-card)
   AND the full-page editor (/edit/) get the dark chrome. WP's editor CSS
   loads later and ties, hence !important. */
.mce-toolbar-grp,
.mce-menubar {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border);
}

.icly-editor-card .mce-toolbar .mce-btn {
  border-radius: var(--radius);
}

/* TinyMCE dropdowns/menus float on <body>, outside the modal — so these
   are unscoped. Safe: the inline editor is the only TinyMCE on the site.
   The skin defaults (white bg + inherited theme text) clash in dark mode,
   so both sides are pinned to the theme tokens. */
.mce-menu,
.mce-floatpanel {
  background: var(--bg) !important;
  border: 1px solid var(--border);
}

/* Image formatting toolbar (align buttons shown when clicking an image)
   and modal dialogs (link, etc.) — also float on <body> but carry
   mce-panel / mce-window instead of mce-floatpanel, so the skin's white
   background leaks through in dark mode. */
.mce-inline-toolbar-grp {
  background: var(--bg) !important;
  border: 1px solid var(--border);
}

.mce-inline-toolbar-grp .mce-arrow:after {
  border-bottom-color: var(--bg) !important;
}

.mce-inline-toolbar-grp .mce-arrow:before {
  border-bottom-color: var(--border) !important;
}

.mce-window,
.mce-window-head {
  background: var(--bg) !important;
}

.mce-window {
  border: 1px solid var(--border);
}

.mce-window-head {
  border-bottom: 1px solid var(--border) !important;
}

.mce-window .mce-title {
  color: var(--fg) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.mce-window .mce-textbox,
.mce-window .mce-listbox {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--fg) !important;
}

.mce-window .mce-label,
.mce-window .mce-text {
  color: var(--fg-2) !important;
}

.mce-window .mce-btn {
  background: var(--bg) !important;
  border-color: var(--border) !important;
}

.mce-window .mce-btn button {
  color: var(--fg) !important;
}

.mce-tooltip-inner {
  background: var(--bg-2) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.mce-tooltip-arrow {
  border-bottom-color: var(--bg-2) !important;
}

.mce-menu-item {
  background: transparent !important;
  color: var(--fg) !important;
}

.mce-menu-item .mce-text {
  color: inherit !important;
}

.mce-menu-item:hover,
.mce-menu-item.mce-selected {
  background: var(--bg-2) !important;
  color: var(--fg) !important;
}

.mce-btn button,
.mce-menubtn button {
  color: var(--fg);
}

.mce-btn .mce-caret {
  border-top-color: var(--fg-3);
}

/* Toolbar button faces (the dropdown trigger, format buttons) — WP's editor
   CSS loads later and ties, so these need !important to win. */
.mce-toolbar .mce-btn,
.mce-toolbar .mce-menubtn {
  background: var(--bg) !important;
  border: 1px solid transparent !important;
}

.mce-toolbar .mce-btn:hover,
.mce-toolbar .mce-menubtn:hover,
.mce-toolbar .mce-btn.mce-active {
  background: var(--bg-2) !important;
  border-color: var(--border) !important;
}

/* Visual / Code tab buttons — pinned to the LEFT side.
   Active tab = page background (merges with the editor below, like a file
   tab); inactive tab = muted tone. */
.wp-editor-tabs {
  float: left !important;
}

.wp-editor-tabs .wp-switch-editor {
  background: var(--bg-2) !important;
  color: var(--fg-3) !important;
  border: 1px solid var(--border) !important;
  border-bottom: none !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  margin: 0 4px 0 0 !important;
}

.html-active .wp-switch-editor.switch-html,
.tmce-active .wp-switch-editor.switch-tmce {
  background: var(--bg) !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
}

/* QuickTags toolbar (code mode) */
.quicktags-toolbar {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 4px !important;
}

.quicktags-toolbar .button {
  background: var(--bg) !important;
  color: var(--fg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  padding: 3px 10px !important;
  margin: 2px !important;
}

.quicktags-toolbar .button:hover {
  color: var(--fg) !important;
  border-color: var(--border-2) !important;
}

/* HTML-mode textarea must fill the editor container. NO display override
   here — visibility is owned by the wrap's html-active/tmce-active classes
   (forcing display:block broke the Visual/Code tab switching). */
#icly-editor-content,
.wp-editor-area {
  width: 100% !important;
  box-sizing: border-box;
}

.html-active .wp-editor-area {
  display: block !important;
}

.tmce-active .wp-editor-area {
  display: none !important;
}

.icly-editor-card .wp-editor-area {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  padding: var(--s-3);
}

/* ===== SIDEBAR OVERLAY ===== */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  opacity: 0;
  pointer-events: none;            /* invisible = non-interactive until opened */
  transition: opacity 0.25s;
}

.sidebar-overlay.open {
  opacity: 1;
  pointer-events: auto;            /* only block taps when menu is actually open */
}

/* ===== MOBILE MENU PANEL (slides from right) ===== */
.mobile-menu-panel {
  display: none;
  position: fixed;
  right: -280px;
  top: 0;
  bottom: 0;
  width: 280px;
  box-sizing: border-box;            /* include padding in width so right:-280px fully hides it */
  z-index: 300;
  padding: 1.5rem;
  background: var(--wp--preset--color--base, #fff);
  border-left: 1px solid var(--wp--preset--color--contrast-3, #ddd);
  box-shadow: -2px 0 12px rgba(0,0,0,0.1);
  transition: right 0.25s ease;
  overflow-y: auto;
}

.mobile-menu-panel.open { right: 0; }

.icly-menu-close {
  position: sticky;
  top: 0;
  z-index: 1;
  float: right;
  width: 44px;
  height: 44px;
  margin: -0.75rem -0.75rem 0.5rem 0;   /* offset the panel's 1.5rem padding */
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity var(--dur) var(--ease);
}

.icly-menu-close:hover,
.icly-menu-close:focus-visible {
  opacity: 1;
  outline: 2px solid var(--fg);
  outline-offset: 1px;
}

.mobile-menu-panel .mobile-nav-section {
  margin-bottom: 1.5rem;
}

.mobile-menu-panel .mobile-nav-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.5;
  margin-bottom: 0.5rem;
}

.mobile-menu-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mobile-menu-panel a {
  display: flex;
  align-items: center;
  min-height: 44px;                /* WCAG 2.5.8 tap target */
  padding: 0.4rem 0.5rem;
  text-decoration: none;
  color: inherit;
  opacity: 0.7;
  border-radius: 4px;
}

/* Pin the color so html.dark a:not([class]) can't paint panel links blue */
html.dark .mobile-menu-panel a { color: var(--fg); }

.mobile-menu-panel a:hover { opacity: 1; background: rgba(128,128,128,0.1); }

/* Show mobile elements below 768px */
@media (max-width: 768px) {
  .mobile-topbar,
  .hamburger,
  .sidebar-overlay,
  .mobile-menu-panel { display: flex; }

  .mobile-menu-panel { display: block; }

  /* Hide the desktop header entirely — the mobile topbar replaces it */
  header.wp-block-template-part { display: none !important; }

  /* Admin bar is useless chrome on a phone — hide it entirely.
     (Admins still reach wp-admin by URL.) */
  #wpadminbar { display: none !important; }
  html { margin-top: 0 !important; }

  /* Mobile topbar touch targets (≥44x44) */
  .mobile-topbar .theme-toggle,
  .mobile-topbar .hamburger {
    min-width: 44px;
    min-height: 44px;
  }

  /* Avoid duplicate site title / hidden hamburger from the desktop header */
  .wp-block-site-title,
  .wp-block-navigation__responsive-container-open { display: none !important; }
}

/* ===== FRONTEND PROFILE PAGE ===== */

.icly-profile-body {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.icly-profile-avatar img {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  width: 64px;
  height: 64px;
  display: block;
}

.icly-profile-name {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.icly-profile-note {
  display: block;
  font-size: 0.85rem;
  color: var(--fg-3);
  margin-top: var(--s-1);
}

.icly-profile-danger {
  border-top: 1px solid var(--border);
  padding-top: var(--s-4);
}

.icly-profile-danger h3 {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--danger);
  margin: 0 0 var(--s-2);
}

.icly-profile-danger p {
  font-size: 0.9rem;
  color: var(--fg-2);
  max-width: 520px;
}

.icly-btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--fg);
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}

.icly-btn:hover { border-color: var(--border-2); }

.icly-btn-danger {
  border-color: var(--danger);
  color: var(--danger);
}

.icly-btn-danger:hover {
  background: rgba(229, 72, 77, 0.08);
}

.icly-revoke-confirm {
  margin-top: var(--s-3);
}

.icly-revoke-confirm p {
  font-size: 0.9rem;
  color: var(--fg-2);
}

.icly-revoke-confirm-row {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}

.icly-revoke-confirm input {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  width: 200px;
}

.icly-revoke-confirm input:focus {
  outline: none;
  border-color: var(--border-2);
}

.icly-revoke-confirm .icly-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.icly-revoke-confirm .icly-btn:disabled:hover {
  background: none;
}

/* ===== IMAGES IN CONTENT — centered by default =====
   wp:image blocks render as full-width figures; center the image inside
   them so small GIFs don't sit at the figure's left edge.
   Figures with an explicit alignment class (alignleft/alignright/aligncenter,
   set via the block editor or figure markup) are left free. */
.wp-block-image:not(.alignleft):not(.alignright):not(.aligncenter) {
  text-align: center;
}

.wp-block-image img {
  display: inline-block;
}

/* bare <img class="aligncenter"> from classic-editor markup (the About GIF):
   the block theme has no styling for that class, so center it explicitly */
.entry-content img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Proportional scaling (em): content images size relative to the text, so
   an image keeps the same visual weight on every device — desktop, mobile
   and the editors (which share the base font). 22em ≈ 484px at the desktop
   22px base; the fluid clamp scales it down with the text on smaller
   screens; min(100%) still caps it to the column. Small images (GIFs at
   natural size) are untouched. */
.entry-content img {
  /* Column-share cap: image = 75% of the text column on EVERY device, so
     the layout pattern (image vs surrounding text) is identical — the
     mobile "full-screen" and desktop "tiny" extremes both disappear.
     !important: the editor bakes an inline max-width:100% into the markup. */
  max-width: min(100%, 75%) !important;
  height: auto;
}

.entry-content img.alignleft {
  float: left;
  margin-right: 1rem;
  margin-bottom: 0.5rem;
}

.entry-content img.alignright {
  float: right;
  margin-left: 1rem;
  margin-bottom: 0.5rem;
}

.entry-content img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.5rem;
}

/* Content tables (editor-inserted <table>) — 1px grid, tinted header
   row; the mobile linear-zoom view scales them with the text column. */
.entry-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 19px;
  font-size: 0.95em;
}

.entry-content th,
.entry-content td {
  border: 1px solid var(--border, rgba(128, 128, 128, 0.35));
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.entry-content th {
  background: rgba(128, 128, 128, 0.12);
}

.entry-content tbody tr:nth-child(even) {
  background: rgba(128, 128, 128, 0.05);
}

/* Linear scaling on narrow screens: instead of reflowing (which breaks the
   pattern — text shrinks 17% but the column shrinks 49%, images follow the
   column, floats get abandoned), the mobile view renders the DESKTOP 645px
   content area and scales the whole thing down with zoom. Image, text and
   spacing all shrink by the SAME factor, so the layout pattern is
   pixel-identical to desktop (and to both editors). The fluid clamps are
   pinned to their desktop values inside the zoomed area so nothing
   double-scales. */
/* Narrow screens: the ARTICLE (title card + post content) renders the
   desktop 645px layout and scales down with zoom — image, text and spacing
   shrink by the same factor, so the article is a pixel-identical scaled
   copy of the desktop view. Section cards (SIBLINGS/CHILDREN, home cards)
   and the comments stay RESPONSIVE — they are components, not article
   content. */
@media (max-width: 700px) {
  .icly-scaled-area:not(.wp-block-template-part) {
    width: 645px;
    zoom: clamp(0.42, calc((100vw - 60px) / 645px), 1);
    font-size: 22px;
  }
  /* pin the ARTICLE headings to their desktop sizes; the section cards
     (wp-block-section) stay responsive, so their inner headings are
     excluded from the pinning */
  .icly-scaled-area:not(.wp-block-template-part) h2:not(.section-head):not(.wp-block-section h2) { font-size: 32px; }
  .icly-scaled-area:not(.wp-block-template-part) h3:not(.section-head):not(.wp-block-section h3) { font-size: 22px; }
  .icly-scaled-area:not(.wp-block-template-part) h4:not(.section-head):not(.wp-block-section h4) { font-size: 18px; }
}

.icly-scaled-area .wp-block-post-content {
  /* the post-content's has-global-padding added ~50px/side once it sat
     inside the scaled-area wrapper — the article shrank to 545px while
     the editors render 645px. The wrapper already IS the column. */
  padding-left: 0;
  padding-right: 0;
}

/* ===== LARGE DISPLAY MODE (html.icly-large, like Wikipedia's option) =====
   Desktop: LINEAR-SCALE the whole article (zoom), NOT font doubling —
   text, images, spacing and floats all scale by the same factor, so the
   layout pattern is identical, just bigger. 1.5x when the viewport fits
   it, otherwise scaled to fit. The article, the section cards
   (SIBLINGS/CHILDREN), the comments section and the page tree rail all
   share the factor; the article + cards + comments shift right so the
   scaled rail still fits in the left gutter. */
@media (min-width: 701px) {
  html.icly-large {
    --large-zoom: min(1.5, max(1, calc((100vw - 60px) / 645px)));
  }
  html.icly-large .icly-scaled-area,
  html.icly-large .wp-block-section {
    zoom: var(--large-zoom);
  }
  /* The edit surface scales as ONE unit: the /edit/ page and the modal
     card (topbar, fields, tinymce frame) — not just the content. */
  html.icly-large body.icly-editor-page .icly-page-editor,
  html.icly-large body.icly-editor-page .icly-page-editor-topbar,
  html.icly-large .icly-editor-card {
    zoom: var(--large-zoom);
  }
  /* the absolute offset renders x zoom: top:71px would land at 107 —
     divide so the subnav starts exactly below the 71px site header. The
     subnav also utilises the FULL viewport width in large mode (no 860px
     column constraint), so the title gets the whole width minus the actions. */
  html.icly-large body.icly-editor-page .icly-page-editor-topbar {
    top: calc(var(--icly-header-h, 71px) / var(--large-zoom));
    padding: var(--s-3) var(--s-4);
  }
  /* Keep the absolute offset aligned below the unzoomed site header. */
  html.icly-large body.icly-editor-page .icly-page-editor-topbar {
    top: calc(var(--icly-header-h, 71px) / var(--large-zoom));
  }
  /* The card's max-height is NOT divided by the zoom (only the width is),
     so cap it explicitly: the rendered height lands back at ~85vh, the
     top (close + toggles) stays visible, and the card's own
     overflow-y:auto scrolls the 1.5x content. */
  html.icly-large .icly-editor-card {
    max-height: calc(85vh / var(--large-zoom));
  }
  /* The USERS page scales as one unit too. Its wrap is a 920px component
     (vs the 645px article), so it gets its own fit clamp: up to 1.5x on
     wide screens, scaled-to-fit below — same philosophy as the article. */
  html.icly-large .icly-users-wrap {
    zoom: min(1.5, max(1, calc((100vw - 60px) / 920px)));
  }
  /* Rail-mode widths (>=1290px the rail is a static left rail; below it is
     an off-canvas drawer). The rail stays at its NORMAL size and position
     (a scaled rail cannot fit the left gutter beside the scaled article —
     it clamps to the screen edge). The article + section cards shift with
     a transform (150 layout px, renders as 150 x zoom) to clear it.
     Zoom keeps the article centered on its layout box and margins on a
     zoomed element are inert, hence the transform. */
  @media (min-width: 1290px) {
    html.icly-large {
      /* leave room for the 258px rail + gaps */
      --large-zoom: min(1.5, max(1, calc((100vw - 306px) / 645px)));
    }
    html.icly-large body.icly-has-tree .icly-scaled-area,
    html.icly-large body.icly-has-tree .wp-block-section {
      transform: translateX(100px);   /* ~97-104 layout px needed across the rail range */
    }
    /* NOT .icly-comments: the inner block lives inside the template-part
       wrapper, which already carries .icly-scaled-area and shifts with it
       — adding the transform again double-shifted the comments ~150px right */
    /* the rail scales too; its position comes from the base rule, which
       now divides the 298px constant by the zoom itself */
    html.icly-large body.icly-has-tree .icly-tree-sidebar {
      zoom: var(--large-zoom);
    }

    html.icly-large body.icly-editor-page .icly-tree-sidebar {
      zoom: var(--large-zoom);
    }

    /* Static-rail widths on /edit/ (the editor rail is a drawer below
       1472px): the zoomed rail (36-422 at 1440, 60-446 at 1684) overlaps
       the editor's fields, and the editor has no room left of it. Push
       the whole editor right (225 rendered = 150 layout x zoom) so the
       fields clear the rail, counter-shift the action buttons back so
       they stay on screen, and cap the main column so its right edge
       does not overflow the viewport. */
    @media (min-width: 1472px) {
      html.icly-large body.icly-editor-page {
        overflow-x: clip;   /* the shifted full-width editor would otherwise widen the scroll area */
      }
      /* the EDIT bar is a sub-navigation bar: it sits OUTSIDE the editor
         div in the template, so the editor shift never touches it */
      html.icly-large body.icly-editor-page .icly-page-editor {
        transform: translateX(165px);   /* 248 rendered — clears the rail with a gap */
      }
      html.icly-large body.icly-editor-page .icly-page-editor-main {
        max-width: calc(1200px / var(--large-zoom));
      }
      /* the rail's fixed top renders x zoom too: drop it below the ZOOMED
         single-row subnav (71 + 99 + 24) with the same division; the
         drawer range below 1472 keeps its top:0 */
      html.icly-large body.icly-editor-page .icly-tree-sidebar {
        top: calc((var(--icly-header-h, 0px) + 99px + 24px) / var(--large-zoom));
      }
    }
  }
}

/* Mobile: back to the plain responsive article (fluid sizes, no zoom)
   with images/gifs CENTER-aligned. */
@media (max-width: 700px) {
  html.icly-large .icly-scaled-area:not(.wp-block-template-part) {
    width: auto;
    zoom: 1;
    font-size: revert;          /* the theme's fluid mobile size */
  }
  html.icly-large .icly-scaled-area:not(.wp-block-template-part) h1 { font-size: revert; }
  html.icly-large .icly-scaled-area:not(.wp-block-template-part) h2:not(.section-head) { font-size: revert; }
  html.icly-large .icly-scaled-area:not(.wp-block-template-part) h3:not(.section-head) { font-size: revert; }
  html.icly-large .icly-scaled-area:not(.wp-block-template-part) h4:not(.section-head) { font-size: revert; }
  /* center-aligned images on mobile (no floats in large mode) */
  html.icly-large .icly-scaled-area:not(.wp-block-template-part) img.alignleft,
  html.icly-large .icly-scaled-area:not(.wp-block-template-part) img.alignright {
    float: none;
    display: block;
    margin: 0 auto 0.5rem;
  }
}

/* ===== LARGE RAIL FIT FALLBACK =====
   A+ uses the rail only while the rendered gutter fits. tree.js adds this
   class when the zoomed rail would intrude into the article, turning it into
   the same off-canvas drawer used at narrower widths. */
body.icly-tree-auto-drawer .icly-tree-sidebar {
  top: 0;
  right: -100%;
  left: auto;
  width: min(300px, 85vw);
  height: 100vh;
  max-height: none;
  z-index: 700;
  border-radius: 0;
  border-top: none;
  border-bottom: none;
  border-right: none;
  overflow-y: auto;
  transition: right 0.25s ease;
}

body.icly-tree-auto-drawer .icly-tree-sidebar.icly-tree-open {
  right: 0;
}

body.icly-tree-auto-drawer .icly-tree-fab {
  display: inline-flex;
  /* Keep the tree button above the existing theme, edit, and A+ stack. */
  bottom: calc(1.5rem + 44px + 10px + 44px + 10px + 44px + 10px);
}

html.icly-large body.icly-tree-auto-drawer .icly-tree-sidebar {
  zoom: 1;
}

/* The rail is no longer beside the article in drawer mode, so undo the
   desktop-only shift and let the scaled article use its normal column. */
html.icly-large body.icly-tree-auto-drawer .icly-scaled-area,
html.icly-large body.icly-tree-auto-drawer .wp-block-section {
  transform: none;
}

/* ===== CONTENT PROSE — justified body text, 1.5 line spacing =====
   Matches the editor's defaults (justify + line-height 1.5). */

/* Page title: fill the content column like the paragraphs, so the heading
   shares the same left edge as the body text (docs-style). */
.wp-block-post-title {
  width: 100%;
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
}

body.home .wp-block-post-content p,
body.page .wp-block-post-content p,
.single .entry-content p {
  text-align: justify;
  line-height: 1.5;
}

/* ===== SECTION BLOCK STYLING (sharp HCI) ===== */
.wp-block-section {
  background: var(--bg);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-8);
  margin-bottom: var(--s-8);
  transition: border-color var(--dur) var(--ease);
}

.wp-block-section:hover { border-color: var(--border-2); }

/* Section head: mono prefix + title + right-aligned meta.
   Use on the bot status (and any future) section. */
.wp-block-section .section-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-3) 0;
  font-family: var(--font-mono);
  font-size: var(--t-lg);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg);
  line-height: 1.2;
}

.wp-block-section .section-head .prefix {
  color: var(--section-fg, var(--fg-2));
  font-weight: 700;
}

.wp-block-section .section-head .meta {
  margin-left: auto;
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  font-family: var(--font-mono);
}

.wp-block-section .section-head a.meta,
.wp-block-section .section-head a.meta-link {
  margin-left: auto;   /* push to the right edge of the card header */
  text-decoration: none;
  color: var(--section-fg, var(--fg-3));
  font-weight: 600;
  transition: opacity var(--dur) var(--ease);

  padding: 12px 8px;
  margin: -12px -8px -12px auto;  /* ~40px hit area; left:auto keeps the right-edge push */
}

.wp-block-section .section-head a.meta:hover,
.wp-block-section .section-head a.meta-link:hover {
  opacity: 0.7;
}

.wp-block-section .section-desc {
  margin: 0 0 var(--s-3) 0;
  color: var(--fg-2);
  font-size: var(--t-sm);
}

.wp-block-navigation a[aria-current="page"] {
  border-bottom: 2px solid var(--fg);
  padding-bottom: 2px;
}

/* ===== NAV AUTH ITEM — hover dropdown (Profile / Logout) ===== */
.icly-nav-auth {
  position: relative;
}

.icly-nav-auth .icly-auth-trigger {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.icly-nav-auth img {
  border-radius: var(--radius);
  vertical-align: middle;
  width: 28px;
  height: 28px;
}

.icly-nav-auth .icly-auth-name {
  font-size: 0.85rem;
  font-weight: 600;
}

.icly-nav-auth .icly-auth-caret {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--fg-3);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.icly-nav-auth:hover .icly-auth-caret,
.icly-nav-auth:focus-within .icly-auth-caret,
.icly-nav-auth.icly-auth-open .icly-auth-caret {
  color: var(--fg);
  transform: rotate(180deg);
}

/* Dropdown panel */
.icly-nav-dropdown {
  position: absolute;
  top: calc(100% + var(--s-2));
  right: 0;
  min-width: 210px;                /* no wrapped items (was 150) */
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-1) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  /* above the page-tree rail (300) if they ever overlap */
  z-index: 310;
}

.icly-nav-auth:hover .icly-nav-dropdown,
.icly-nav-auth:focus-within .icly-nav-dropdown,
.icly-nav-auth.icly-auth-open .icly-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.icly-nav-dropdown-item {
  display: block;
  padding: var(--s-2) var(--s-4);
  font-size: 0.85rem;
  color: var(--fg-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.icly-nav-dropdown-item:hover {
  background: var(--bg-2);
  color: var(--fg);
}

/* ===== SITE TITLE (header) — foreground color, not T25's blue =====
   The html.dark a:not([class]) rule below would otherwise paint the
   unclassed title link with --sec-blog, so both modes are pinned. */
.wp-block-site-title a,
html.dark .wp-block-site-title a {
  color: var(--fg);
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: color var(--dur) var(--ease);
}

.wp-block-site-title a:hover,
html.dark .wp-block-site-title a:hover {
  color: var(--fg-2);
}

/* ===== FOOTER LIVE STATS ===== */
.icly-stats {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  text-align: center;
  padding: var(--s-1) var(--s-6) var(--s-4);
}

/* ===== MINIMAL FOOTER =====
   Overrides the T25 default footer (site title, nav links, credits).
   Just a tiny mono line at the bottom — clean, no noise.
   The <hr> (border) spans the same width as the section cards by
   centering the div with a max-width equal to content + section
   padding. */
.icly-footer {
  margin: var(--s-6) auto 0;  /* --s-6 matches section-to-section gap */
  max-width: calc(var(--wp--style--global--content-size) + 2 * var(--s-8) + 2 * var(--border-w));
  border-top: var(--border-w) solid var(--border);
  /* Horizontal padding matches the section cards' --s-8 (2rem).
     The block's inline padding-top/bottom are left as-is from T25. */
  padding-right: var(--s-8);
  padding-left: var(--s-8);
}

/* Remove T25's large padding-bottom from the content wrapper on home/page,
   so the footer sits right after the last section instead of ~70px below. */
body.home main.wp-block-group > .wp-block-group:last-of-type,
body.page main.wp-block-group > .wp-block-group:last-of-type {
  padding-bottom: 0 !important;
}

.icly-footer .is-style-icly-footer-text {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--fg-3);
  letter-spacing: 0.04em;
  margin: 0;
  padding: 0;
  background: none;
}

/* Hide the T25 default footer in case the template-part override
   doesn't take effect (e.g. after theme updates).  We target the
   <footer> element specifically so we don't accidentally hide the
   <header> through the :last-of-type selector issue (different tag
   types each count as "last of type"). */
body.home footer.wp-block-template-part > .wp-block-group:not(.icly-footer),
body.page footer.wp-block-template-part > .wp-block-group:not(.icly-footer) {
  display: none !important;
}

/* ===== MAIN CONTENT SPACING — title sits tight under the header ===== */
/* The users page keeps the default template spacing (title sits lower) —
   every other page template gets its spacing zeroed by these rules. */
body.home main.wp-block-group,
body.page:not(.page-template-page-users-php) main.wp-block-group {
  margin-top: 0 !important;
}
body.home main.wp-block-group > .wp-block-group,
body.page:not(.page-template-page-users-php) main.wp-block-group > .wp-block-group {
  padding-top: 0 !important;
}

/* ===== PAGE TITLE — treat as a page label, not a section card =====
   Biggest element on the page in font size, but the card shrinks
   to fit the text. Reads as a "page header" label above the
   full-width section cards, instead of competing with them. */
body.home .wp-block-post-title,
body.page .wp-block-post-title {
  background: var(--bg);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-6);   /* 1rem 1.5rem — comfortable, not chunky */
  margin-top: var(--s-4);
  margin-bottom: var(--s-6);
  font-family: var(--font-mono);
  font-size: 2.25rem;               /* 36px — 1.8× the section heads */
  font-weight: 700;
  text-transform: none;             /* title case, not uppercase */
  letter-spacing: -0.01em;
  color: var(--fg);
  line-height: 1.15;
  width: fit-content;               /* shrink to text width */
  max-width: min(100%, var(--wp--style--global--content-size)); /* never under the tree rail */
  transition: border-color var(--dur) var(--ease);
}

body.home .wp-block-post-title:hover,
body.page .wp-block-post-title:hover {
  border-color: var(--border-2);
}

/* ===== BOT STATUS CARDS (sharp HCI) ===== */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.status-card-link {
  display: block;
  color: inherit;
  border-radius: var(--radius);
}

.status-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  font-family: var(--font-mono);
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.status-card-link:hover .status-card {
  border-color: var(--sec-bots);
  background: var(--bg-3);
}

.status-card-link:active .status-card {
  transform: translateY(1px);
}

.status-card-link:focus-visible {
  outline: var(--border-w-strong) solid var(--sec-bots);
  outline-offset: var(--border-w-strong);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  background: var(--fg-3);
}

.status-dot.online {
  background: var(--status-on);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-on) 30%, transparent);
}

.status-dot.offline {
  background: var(--status-off);
}

.status-dot.checking {
  background: #F59E0B;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.status-info { min-width: 0; }

.status-info .status-name {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-info .status-text {
  display: block;
  font-size: var(--t-xs);
  color: var(--fg-3);
}

.status-info .status-text.online  { color: var(--status-on); }
.status-info .status-text.offline { color: var(--status-off); }

.status-meta {
  text-align: right;
  font-size: var(--t-xs);
  color: var(--fg-3);
  line-height: 1.3;
  white-space: nowrap;
}

.status-meta .status-latency {
  display: block;
  font-weight: 600;
  color: var(--fg-2);
}

.status-meta .status-checked {
  display: block;
  color: var(--fg-3);
}

.icly-legal-updated {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  margin: 0 0 var(--s-6);
}

.icly-modified-line {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  margin: var(--s-2) 0 0;
}

/* ===== PAGE MODE BADGE (PRIVATE / UNLISTED) ===== */
.icly-mode-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.5;
  padding: 0.1em 0.55em;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  vertical-align: 0.3em;
  margin-left: 0.6em;
  white-space: nowrap;
}
.icly-mode-badge.icly-mode-private {
  color: #e5484d;
  background: rgba(229, 72, 77, 0.1);
}
.icly-mode-badge.icly-mode-unlisted {
  color: var(--accent);
  background: rgba(91, 138, 238, 0.1);
}
/* tree rail + project cards (SIBLINGS / CHILDREN): compact chip */
.icly-tree .icly-mode-badge,
.project-card-body .icly-mode-badge {
  font-size: 0.55rem;
  padding: 0 0.45em;
  margin-left: 0.4em;
  vertical-align: 0.18em;
}

.icly-heading-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -12px -12px -12px 0;    /* zero layout footprint: padding 12px is
                                     cancelled by the negative margins, and
                                     no left margin — the heading must wrap
                                     exactly as if the button weren't there */
  padding: 12px;                 /* ~24px hit area, layout unchanged */
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.72em;
  line-height: 1;
  color: var(--fg-3);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}

.entry-content h2:hover .icly-heading-link,
.entry-content h3:hover .icly-heading-link,
.entry-content h4:hover .icly-heading-link,
.icly-heading-link:focus-visible {
  opacity: 0.85;
}

.icly-heading-link:hover,
.icly-heading-link.copied {
  opacity: 1;
  color: var(--sec-projects);
}

/* the glyph carries the visual gap (inside the zero-width button it
   overflows harmlessly instead of reserving layout space) */
.icly-heading-glyph {
  margin-left: 8px;
}

/* ✓ is a text glyph — render it larger so it visually matches the 🔗 emoji
   (0.72em * 1.33 against the heading's font-size) */
.icly-heading-link.copied {
  font-size: 0.96em;
  line-height: 1;
}

/* the 🔗 emoji's ink sits a few px below the text baseline — raise only the
   emoji state to match the text/tick. (Headless measurement impossible: no
   color-emoji font; tuned between 'slightly low' at 0 and 'too high' at
   -0.18em per user feedback.) */
.icly-heading-link .icly-heading-glyph {
  display: inline-block;
}

.icly-heading-link:not(.copied) .icly-heading-glyph {
  transform: translateY(-0.13em);
}

/* touch devices: no hover — keep the button visible */
@media (hover: none) {
  .icly-heading-link { opacity: 0.5; }
}

/* ===== PROJECT TREE ===== */
.project-tree {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
}

/* Top-level projects: card grid */
.project-tree-root {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-3);
  align-items: start;
}

.project-item {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--wp--preset--color--contrast-3, #ddd);
  border-radius: var(--radius);
  background: var(--bg);
}

.project-item h2 { font-size: 0.9rem; margin: 0; }

/* Whole card is the link */
.project-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  text-decoration: none;
  color: inherit;
}

.project-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.project-card-meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}

.project-card-new {
  color: var(--sec-about);
  border: 1px solid color-mix(in srgb, var(--sec-about) 55%, transparent);
  background: color-mix(in srgb, var(--sec-about) 8%, transparent);
  border-radius: var(--radius);
  padding: 1px 5px;
  font-weight: 700;
  font-size: 0.6rem;
}

.project-card-link h2 {
  transition: color var(--dur) var(--ease);
}

.project-go {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  opacity: 0.5;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.project-card-link:hover h2 { color: var(--section-fg, var(--sec-projects)); }

.project-card-link:hover .project-go {
  opacity: 1;
  transform: translateX(2px);
}

/* Nested (grandchild) levels: indented stack, smaller cards */
.project-item-sub > .project-tree {
  margin-top: var(--s-2);
  margin-left: var(--s-2);
  padding-left: var(--s-3);
  border-left: 1px solid var(--wp--preset--color--contrast-3, #ddd);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.project-item-sub {
  padding: var(--s-2) var(--s-3);
}

.project-item-sub h2 {
  font-size: 0.8rem;
}

/* ===== BLOG LIST ===== */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.blog-item {
}

.blog-item h2 {
  font-size: 1rem;
  margin: 0 0 0.3rem;
  font-weight: 600;
  line-height: 1.3;
}

.blog-item h2 a {
  text-decoration: none;
  color: inherit;
}

.blog-item h2 a:hover {
  color: var(--accent);
}

.blog-date {
  font-size: 0.8rem;
  opacity: 0.5;
}

.view-all {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ===== SOCIAL LINKS ===== */
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.social-links a {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--wp--preset--color--contrast-3, #ddd);
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.85rem;
  opacity: 0.8;
}

.social-links a:hover { opacity: 1; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .project-list { grid-template-columns: 1fr; }
  .status-grid { grid-template-columns: 1fr; }
  .wp-block-section { padding: var(--s-4); }
  .status-card { grid-template-columns: auto 1fr; }
  .status-card .status-meta { display: none; }   /* save space on mobile; keep name+state only */
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .status-dot.checking { animation: none; opacity: 1; }
}

/* =========================================================
   COMMENTS — page section (rendered when comments are open)
   ========================================================= */
.icly-comments {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-6) var(--s-6);
  background: var(--bg-2);
  max-width: 100%;
  box-sizing: border-box;
}

.icly-comments .icly-comments-head {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 var(--s-2);
}

.icly-comments .icly-accent {
  color: var(--sec-social);
}

.icly-comments .wp-block-comments-title {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  margin: 0 0 var(--s-5);
}

/* list */
.icly-comments .wp-block-comment-template,
.icly-comments li.comment > ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.icly-comments .icly-comment {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}

.icly-comments .wp-block-avatar {
  flex: none;
}

.icly-comments .wp-block-avatar img {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  object-fit: cover;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--bg-3);
}

.icly-comments .icly-comment-body {
  min-width: 0;
  flex: 1;
}

.icly-comments .icly-comment-meta {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.icly-comments .icly-comment-author {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--fg);
}

.icly-comments .icly-comment-author a {
  color: inherit;
  text-decoration: none;
}

.icly-comments .icly-comment-author a:hover {
  text-decoration: underline;
}

.icly-comments .icly-comment .icly-comment-date {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--fg-3);
}

.icly-comments .icly-comment .icly-comment-date a {
  color: inherit;
  text-decoration: none;
}

.icly-comments .icly-comment .icly-comment-date a:hover {
  text-decoration: underline;
}

.icly-comments .icly-comment-content {
  margin: var(--s-1) 0 0;
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.icly-comments .icly-comment-content p {
  margin: 0 0 0.5em;
}

.icly-comments .icly-comment-content p:last-child {
  margin-bottom: 0;
}

.icly-comments .icly-comment-actions {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-1);
}

/* On phones the action row (votes + approve/reject + edit/reply/delete) is
   too wide for one line — let it wrap instead of overflowing the viewport.
   Beats the block's is-nowrap container rule (higher specificity). */
@media (max-width: 480px) {
  .icly-comments .icly-comment-actions {
    flex-wrap: wrap;
    row-gap: var(--s-1);
  }
}

.icly-comments .icly-comment .icly-comment-actions a {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--sec-projects);
  text-decoration: none;
}

.icly-comments .icly-comment .icly-comment-actions a:hover {
  text-decoration: underline;
}

/* Deleted comments (revoked accounts) — Reddit style.
   The whole row is hidden by PHP when it has no replies; placeholders that
   keep thread context render with no avatar and muted text. The > child
   scoping keeps nested (still-live) replies unaffected. */
.icly-comments .icly-comment-deleted > .icly-comment > .wp-block-avatar {
  display: none;
}

.icly-comments .icly-comment-deleted > .icly-comment .icly-comment-author {
  color: var(--fg-3);
  font-style: italic;
}

.icly-comments .icly-comment-deleted > .icly-comment .icly-comment-content {
  color: var(--fg-3);
  font-style: italic;
}

.icly-comments .icly-comment-deleted > .icly-comment .wp-block-comment-edit-link,
.icly-comments .icly-comment-deleted > .icly-comment .wp-block-comment-reply-link {
  display: none;
}

/* Own comments of regular users: the wp-admin Edit link is useless to them
   (they never see wp-admin) — hide it; Delete takes its place. */
.icly-comments .icly-comment-own > .icly-comment .wp-block-comment-edit-link {
  display: none;
}

.icly-comments .icly-comment-own > .icly-comment .icly-comment-actions {
  gap: var(--s-3);
}

/* Thread collapse toggle (injected by comments.js) — matches the tree */
.icly-comments .icly-comment-toggle {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  width: 18px;
  flex: none;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--fg-3);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.icly-comments .icly-comment-toggle:hover {
  color: var(--fg);
}

.icly-comments li.icly-comment-collapsed > ol {
  display: none;
}

/* Author-name toggle: the name is a bigger click target for collapsible
   threads (marked by JS when the comment has replies). */
.icly-comments .icly-comment-meta .icly-comment-author.icly-comment-author-toggle {
  cursor: pointer;
}

.icly-comments .icly-comment-meta .icly-comment-author.icly-comment-author-toggle:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

/* Vote cluster (injected by comments.js) — ▲ score ▼ */
.icly-comments .icly-comment-votes {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-right: var(--s-2);
  margin-right: var(--s-1);
  border-right: 1px solid var(--border);
}

/** Keyboard focus indicators (WCAG 2.4.7) */
.icly-comments .icly-vote-btn:focus-visible,
.icly-nav-dropdown-item:focus-visible,
.wp-block-site-title a:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.icly-comments .icly-vote-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0 2px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1;
  color: var(--fg-3);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.icly-comments .icly-vote-btn:hover:not(:disabled) {
  color: var(--fg);
}

.icly-comments .icly-vote-btn.icly-vote-up.icly-voted {
  color: var(--sec-projects);
}

.icly-comments .icly-vote-btn.icly-vote-down.icly-voted {
  color: var(--danger);
}

.icly-comments .icly-vote-btn:disabled {
  cursor: default;
}

.icly-comments .icly-vote-score {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--fg-2);
  min-width: 1.6em;
  text-align: center;
}

.icly-comments .icly-votes-readonly .icly-vote-btn {
  opacity: 0.55;
}

/* Inline edit (own comments of regular users, injected by comments.js) */
.icly-comments .icly-comment-edit-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--fg-2);
  cursor: pointer;
  text-decoration: none;
}

.icly-comments .icly-comment-edit-btn:hover {
  text-decoration: underline;
  color: var(--fg);
}

.icly-comments .icly-comment-edit-box {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 90px;
  margin: var(--s-2) 0 0;
  padding: var(--s-2) var(--s-3);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  line-height: 1.5;
  resize: vertical;
}

.icly-comments .icly-comment-edit-box:focus {
  outline: none;
  border-color: var(--fg-3);
}

.icly-comments .icly-comment-edit-row {
  margin-top: var(--s-2);
}

.icly-comments .icly-comment-edit-save {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--s-3);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.icly-comments .icly-comment-edit-save:hover:not(:disabled) {
  border-color: var(--sec-projects);
  color: var(--sec-projects);
}

.icly-comments .icly-comment-edit-save:disabled {
  opacity: 0.6;
  cursor: default;
}

/* "· edited" marker next to the date */
.icly-comments li.icly-comment-edited > .icly-comment .icly-comment-date::after {
  content: " · edited";
  color: var(--fg-3);
}

/* Self-delete button (injected by comments.js) */
.icly-comments .icly-comment-delete-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--danger);
  cursor: pointer;
  text-decoration: none;
}

.icly-comments .icly-comment-delete-btn:hover {
  text-decoration: underline;
}

.icly-comments .icly-comment-delete-btn.icly-armed {
  background: var(--danger);
  color: #ffffff;
  padding: 2px 8px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}

.icly-comments .icly-comment-delete-btn.icly-armed:hover {
  background: var(--danger-hover);
}

.icly-comments .icly-comment-delete-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* nested replies: the block emits a bare <ol> (no class) */
.icly-comments li.comment > ol {
  margin-top: var(--s-4);
  padding-left: var(--s-4);
  border-left: 1px solid var(--border);
  gap: var(--s-4);
}

/* pagination */
.icly-comments .wp-block-comments-pagination {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

.icly-comments .icly-comment + .wp-block-comments-pagination a {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--fg-2);
  text-decoration: none;
}

.icly-comments .icly-comment + .wp-block-comments-pagination a:hover {
  color: var(--fg);
  text-decoration: underline;
}

/* form */
.icly-comments .comment-respond {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}

.icly-comments .comment-respond .comment-reply-title {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 var(--s-3);
}

.icly-comments .comment-respond .comment-reply-title small {
  margin-left: var(--s-2);
}

.icly-comments .comment-respond .comment-reply-title a {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--fg-3);
  text-decoration: none;
}

.icly-comments .comment-respond .comment-reply-title a:hover {
  color: var(--fg);
}

.icly-comments .comment-respond .logged-in-as {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--fg-3);
  margin: 0 0 var(--s-3);
}

.icly-comments .comment-respond .logged-in-as a {
  color: var(--fg-2);
}

.icly-comments .comment-respond .logged-in-as a:hover {
  color: var(--fg);
}

.icly-comments .comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  padding: var(--s-3);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  line-height: 1.5;
  resize: vertical;
}

.icly-comments .comment-form textarea:focus {
  outline: none;
  border-color: var(--fg-3);
}

.icly-comments .comment-form .form-submit input[type="submit"] {
  margin-top: var(--s-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 var(--s-4);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.icly-comments .comment-form .form-submit input[type="submit"]:hover {
  border-color: var(--sec-projects);
  color: var(--sec-projects);
  background: var(--bg);
}

.icly-comments .icly-comment-error {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--danger);
  background: rgba(229, 72, 77, 0.07);
  border: 1px dashed rgba(229, 72, 77, 0.5);
  border-radius: var(--radius);
  padding: var(--s-3);
  margin: 0 0 var(--s-3);
}

.icly-comments .icly-comment-error[hidden] {
  display: none;
}

.icly-comments .must-log-in {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--fg-2);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius);
  padding: var(--s-4);
  margin: var(--s-4) 0 0;
  display: flex;
  gap: var(--s-2);
}

.icly-comments .comment-respond .must-log-in a {
  color: var(--sec-projects);
  text-decoration: none;
}

.icly-comments .comment-respond .must-log-in a:hover {
  text-decoration: underline;
}

/* comment count in the head row */
.icly-comments .wp-block-comments-title::before {
  content: "· ";
}

.icly-comments {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-6) var(--s-6);
  background: var(--bg-2);
  max-width: 100%;
  box-sizing: border-box;
}

.icly-comments .icly-comments-head {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 var(--s-2);
}

.icly-comments .icly-accent {
  color: var(--sec-social);
}

.icly-comments .wp-block-comments-title {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  margin: 0 0 var(--s-5);
}

/* list */
.icly-comments .wp-block-comment-template,
.icly-comments li.comment > ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.icly-comments .icly-comment {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}

.icly-comments .wp-block-avatar {
  flex: none;
}

.icly-comments .wp-block-avatar img {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  object-fit: cover;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--bg-3);
}

.icly-comments .icly-comment-body {
  min-width: 0;
  flex: 1;
}

.icly-comments .icly-comment-meta {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.icly-comments .icly-comment-author {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--fg);
}

.icly-comments .icly-comment-author a {
  color: inherit;
  text-decoration: none;
}

.icly-comments .icly-comment-author a:hover {
  text-decoration: underline;
}

.icly-comments .icly-comment .icly-comment-date {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--fg-3);
}

.icly-comments .icly-comment .icly-comment-date a {
  color: inherit;
  text-decoration: none;
}

.icly-comments .icly-comment .icly-comment-date a:hover {
  text-decoration: underline;
}

.icly-comments .icly-comment-content {
  margin: var(--s-1) 0 0;
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.icly-comments .icly-comment-content p {
  margin: 0 0 0.5em;
}

.icly-comments .icly-comment-content p:last-child {
  margin-bottom: 0;
}

.icly-comments .icly-comment-actions {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-1);
}

/* On phones the action row (votes + approve/reject + edit/reply/delete) is
   too wide for one line — let it wrap instead of overflowing the viewport.
   Beats the block's is-nowrap container rule (higher specificity). */
@media (max-width: 480px) {
  .icly-comments .icly-comment-actions {
    flex-wrap: wrap;
    row-gap: var(--s-1);
  }
}

.icly-comments .icly-comment .icly-comment-actions a {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--sec-projects);
  text-decoration: none;
}

.icly-comments .icly-comment .icly-comment-actions a:hover {
  text-decoration: underline;
}

/* Deleted comments (revoked accounts) — Reddit style.
   The whole row is hidden by PHP when it has no replies; placeholders that
   keep thread context render with no avatar and muted text. The > child
   scoping keeps nested (still-live) replies unaffected. */
.icly-comments .icly-comment-deleted > .icly-comment > .wp-block-avatar {
  display: none;
}

.icly-comments .icly-comment-deleted > .icly-comment .icly-comment-author {
  color: var(--fg-3);
  font-style: italic;
}

.icly-comments .icly-comment-deleted > .icly-comment .icly-comment-content {
  color: var(--fg-3);
  font-style: italic;
}

.icly-comments .icly-comment-deleted > .icly-comment .wp-block-comment-edit-link,
.icly-comments .icly-comment-deleted > .icly-comment .wp-block-comment-reply-link {
  display: none;
}

/* Own comments of regular users: the wp-admin Edit link is useless to them
   (they never see wp-admin) — hide it; Delete takes its place. */
.icly-comments .icly-comment-own > .icly-comment .wp-block-comment-edit-link {
  display: none;
}

.icly-comments .icly-comment-own > .icly-comment .icly-comment-actions {
  gap: var(--s-3);
}

/* Thread collapse toggle (injected by comments.js) — matches the tree */
.icly-comments .icly-comment-toggle {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  width: 18px;
  flex: none;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--fg-3);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.icly-comments .icly-comment-toggle:hover {
  color: var(--fg);
}

.icly-comments li.icly-comment-collapsed > ol {
  display: none;
}

/* Author-name toggle: the name is a bigger click target for collapsible
   threads (marked by JS when the comment has replies). */
.icly-comments .icly-comment-meta .icly-comment-author.icly-comment-author-toggle {
  cursor: pointer;
}

.icly-comments .icly-comment-meta .icly-comment-author.icly-comment-author-toggle:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

/* Vote cluster (injected by comments.js) — ▲ score ▼ */
.icly-comments .icly-comment-votes {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-right: var(--s-2);
  margin-right: var(--s-1);
  border-right: 1px solid var(--border);
}

.icly-comments .icly-vote-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0 2px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1;
  color: var(--fg-3);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.icly-comments .icly-vote-btn:hover:not(:disabled) {
  color: var(--fg);
}

.icly-comments .icly-vote-btn.icly-vote-up.icly-voted {
  color: var(--sec-projects);
}

.icly-comments .icly-vote-btn.icly-vote-down.icly-voted {
  color: var(--danger);
}

.icly-comments .icly-vote-btn:disabled {
  cursor: default;
}

.icly-comments .icly-vote-score {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--fg-2);
  min-width: 1.6em;
  text-align: center;
}

.icly-comments .icly-votes-readonly .icly-vote-btn {
  opacity: 0.55;
}

/* Inline edit (own comments of regular users, injected by comments.js) */
.icly-comments .icly-comment-edit-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--fg-2);
  cursor: pointer;
  text-decoration: none;
}

.icly-comments .icly-comment-edit-btn:hover {
  text-decoration: underline;
  color: var(--fg);
}

.icly-comments .icly-comment-edit-box {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 90px;
  margin: var(--s-2) 0 0;
  padding: var(--s-2) var(--s-3);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  line-height: 1.5;
  resize: vertical;
}

.icly-comments .icly-comment-edit-box:focus {
  outline: none;
  border-color: var(--fg-3);
}

.icly-comments .icly-comment-edit-row {
  margin-top: var(--s-2);
}

.icly-comments .icly-comment-edit-save {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--s-3);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.icly-comments .icly-comment-edit-save:hover:not(:disabled) {
  border-color: var(--sec-projects);
  color: var(--sec-projects);
}

.icly-comments .icly-comment-edit-save:disabled {
  opacity: 0.6;
  cursor: default;
}

/* "· edited" marker next to the date */
.icly-comments li.icly-comment-edited > .icly-comment .icly-comment-date::after {
  content: " · edited";
  color: var(--fg-3);
}

/* Self-delete button (injected by comments.js) */
.icly-comments .icly-comment-delete-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--danger);
  cursor: pointer;
  text-decoration: none;
}

.icly-comments .icly-comment-delete-btn:hover {
  text-decoration: underline;
}

.icly-comments .icly-comment-delete-btn.icly-armed {
  background: var(--danger);
  color: #ffffff;
  padding: 2px 8px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}

.icly-comments .icly-comment-delete-btn.icly-armed:hover {
  background: var(--danger-hover);
}

.icly-comments .icly-comment-delete-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* nested replies: the block emits a bare <ol> (no class) */
.icly-comments li.comment > ol {
  margin-top: var(--s-4);
  padding-left: var(--s-4);
  border-left: 1px solid var(--border);
  gap: var(--s-4);
}

/* pagination */
.icly-comments .wp-block-comments-pagination {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

.icly-comments .icly-comment + .wp-block-comments-pagination a {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--fg-2);
  text-decoration: none;
}

.icly-comments .icly-comment + .wp-block-comments-pagination a:hover {
  color: var(--fg);
  text-decoration: underline;
}

/* form */
.icly-comments .comment-respond {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}

.icly-comments .comment-respond .comment-reply-title {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 var(--s-3);
}

.icly-comments .comment-respond .comment-reply-title small {
  margin-left: var(--s-2);
}

.icly-comments .comment-respond .comment-reply-title a {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--fg-3);
  text-decoration: none;
}

.icly-comments .comment-respond .comment-reply-title a:hover {
  color: var(--fg);
}

.icly-comments .comment-respond .logged-in-as {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--fg-3);
  margin: 0 0 var(--s-3);
}

.icly-comments .comment-respond .logged-in-as a {
  color: var(--fg-2);
}

.icly-comments .comment-respond .logged-in-as a:hover {
  color: var(--fg);
}

.icly-comments .comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  padding: var(--s-3);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  line-height: 1.5;
  resize: vertical;
}

.icly-comments .comment-form textarea:focus {
  outline: none;
  border-color: var(--fg-3);
}

.icly-comments .comment-form .form-submit input[type="submit"] {
  margin-top: var(--s-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 var(--s-4);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.icly-comments .comment-form .form-submit input[type="submit"]:hover {
  border-color: var(--sec-projects);
  color: var(--sec-projects);
  background: var(--bg);
}

.icly-comments .icly-comment-error {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--danger);
  background: rgba(229, 72, 77, 0.07);
  border: 1px dashed rgba(229, 72, 77, 0.5);
  border-radius: var(--radius);
  padding: var(--s-3);
  margin: 0 0 var(--s-3);
}

.icly-comments .icly-comment-error[hidden] {
  display: none;
}

.icly-comments .must-log-in {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--fg-2);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius);
  padding: var(--s-4);
  margin: var(--s-4) 0 0;
  display: flex;
  gap: var(--s-2);
}

.icly-comments .comment-respond .must-log-in a {
  color: var(--sec-projects);
  text-decoration: none;
}

.icly-comments .comment-respond .must-log-in a:hover {
  text-decoration: underline;
}

/* comment count in the head row */
.icly-comments .wp-block-comments-title::before {
  content: "· ";
}

/* =========================================================
   USERS PAGE (/users/) — admin user management
   ========================================================= */
.icly-users-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--s-4);
  box-sizing: border-box;
}

.icly-users-title {
  font-family: var(--font-mono);
  font-size: var(--t-lg);
  letter-spacing: 0.04em;
  margin: 0 0 var(--s-5);
}

.icly-users-title .icly-accent {
  color: var(--sec-social);
}

.icly-users-total {
  font-size: var(--t-xs);
  color: var(--fg-3);
  font-weight: 400;
  letter-spacing: 0.08em;
  margin-left: var(--s-2);
}

/* nav gating: only mods+admins see the USERS link */
body:not(.icly-can-moderate) .wp-block-navigation a[href$="/users/"] {
  display: none;
}

.icly-users-search {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}

.icly-users-search input[type="search"] {
  flex: 1;
  min-width: 220px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
}

.icly-users-search input[type="search"]:focus {
  outline: none;
  border-color: var(--fg-3);
}

.icly-users-search-results {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--fg-3);
  letter-spacing: 0.06em;
}

.icly-users-search-results a {
  color: var(--fg-2);
  margin-left: var(--s-2);
}

.icly-users-pagination {
  display: flex;
  gap: var(--s-2);
  margin: var(--s-4) 0;
  flex-wrap: wrap;
}

.icly-users-page {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--fg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-1) var(--s-3);
  text-decoration: none;
  min-width: 28px;
  text-align: center;
  box-sizing: border-box;
}

.icly-users-page:hover {
  border-color: var(--fg-3);
  color: var(--fg);
}

.icly-users-page-current {
  border-color: var(--fg-3);
  color: var(--fg);
  background: var(--bg-3);
}

/* mobile: rows become stacked cards */
@media (max-width: 768px) {
  /* display:block on tr overrides the [hidden] attribute — keep confirm
     rows collapsed until an action opens them */
  .icly-users-table tr.icly-users-confirm-row[hidden] {
    display: none;
  }
  .icly-users-table thead {
    display: none;
  }
  .icly-users-table,
  .icly-users-table tbody,
  .icly-users-table tr,
  .icly-users-table td {
    display: block;
    width: 100%;
  }
  .icly-users-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--s-3);
    padding: var(--s-2) var(--s-2) var(--s-3);
    box-sizing: border-box;
  }
  .icly-users-table td {
    border: none;
    padding: var(--s-1) var(--s-2);
  }
  .icly-users-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: var(--fg-3);
    margin-bottom: 2px;
  }
  .icly-users-actions {
    white-space: normal;
  }
  .icly-users-actions .icly-btn {
    margin-top: var(--s-1);
  }
  .icly-users-confirm-row td {
    padding: var(--s-1) 0;
  }
  .icly-users-confirm-row td::before {
    content: none;
  }
}

.icly-users-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
}

.icly-users-table th {
  text-align: left;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  border-bottom: 1px solid var(--border-2);
  padding: var(--s-2) var(--s-3);
}

.icly-users-table td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.icly-users-user {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.icly-users-user img {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  flex: none;
}

.icly-users-name {
  font-weight: 700;
  color: var(--fg);
}

.icly-users-login {
  color: var(--fg-3);
  font-size: var(--t-xs);
}

.icly-users-mono {
  color: var(--fg-2);
  font-size: var(--t-xs);
}

.icly-users-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 2px 8px;
}

.icly-users-badge-admin { color: var(--sec-about); border-color: var(--sec-about); }
.icly-users-badge-mod   { color: var(--sec-blog); border-color: var(--sec-blog); }
.icly-users-badge-user  { color: var(--fg-3); }
.icly-users-badge-you   { color: var(--sec-projects); border-color: var(--sec-projects); }

.icly-users-none {
  color: var(--fg-3);
  font-size: var(--t-xs);
}

.icly-users-badge-suspended {
  color: var(--danger);
  border-color: var(--danger);
  margin-left: var(--s-2);
}

.icly-users-duration {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-1) var(--s-2);
}

.icly-users-actions {
  white-space: nowrap;
}

.icly-btn-sm {
  height: 28px;
  font-size: var(--t-xs);
  padding: 0 var(--s-3);
}

.icly-users-confirm-row td {
  background: rgba(229, 72, 77, 0.04);
  border-bottom: 1px solid var(--border);
}

.icly-users-confirm {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.icly-users-confirm-label {
  font-size: var(--t-xs);
  color: var(--fg-2);
  flex: 1;
  min-width: 220px;
}

.icly-users-confirm input {
  flex: 1;
  min-width: 200px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-1) var(--s-2);
}

.icly-users-confirm input:focus {
  outline: none;
  border-color: var(--danger);
}

/* Role + PINNED chips — real spans injected after the author name
   (order: name → role → PINNED). Identical metrics so they align perfectly;
   the meta row is flex-baseline aligned. */
.icly-comments .icly-comment-role,
.icly-comments .icly-comment-pin-chip {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: 1px 5px;
  margin-left: 4px;
  white-space: nowrap;
}

.icly-comments .icly-comment-role.icly-role-admin { color: var(--sec-about); }
.icly-comments .icly-comment-role.icly-role-mod   { color: var(--sec-blog); }
.icly-comments .icly-comment-role.icly-role-me    { color: var(--sec-projects); }
.icly-comments .icly-comment-pin-chip             { color: var(--sec-blog); }

/* the core flex layout adds its own gap — drop it, margins control spacing */
.icly-comments .icly-comment-meta { gap: 0; }
.icly-comments .icly-comment-meta .icly-comment-date { margin-left: 10px; }

/* =========================================================
   PENDING comments — chip + moderator approve/reject
   ========================================================= */
.icly-comments li.icly-comment-moderatable:not(.icly-comment-by-me) > .icly-comment .comment-awaiting-moderation {
  /* the author-directed "Your comment is awaiting moderation" note is wrong
     on other people's pending rows — moderators get the PENDING chip */
  display: none;
}

.icly-comments li.icly-comment-unapproved > .icly-comment .icly-comment-meta::after {
  content: "PENDING";
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 1px 6px;
}

.icly-comments .icly-comment-pin-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--fg-2);
  cursor: pointer;
  text-decoration: none;
}

.icly-comments .icly-comment-pin-btn:hover:not(:disabled) {
  text-decoration: underline;
  color: var(--fg);
}

.icly-comments .icly-comment-pin-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* pinned comment: chip + subtle highlight */
.icly-comments li.icly-comment-pinned > .icly-comment {
  background: rgba(90, 138, 238, 0.05);
  border: 1px solid rgba(90, 138, 238, 0.35);
  border-radius: var(--radius);
  padding: var(--s-3);
}



.icly-comments .icly-comment-moderate-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--sec-projects);
  cursor: pointer;
  text-decoration: none;
}

.icly-comments .icly-comment-moderate-btn.icly-moderate-reject {
  color: var(--danger);
}

.icly-comments .icly-comment-moderate-btn:hover {
  text-decoration: underline;
}

.icly-comments .icly-comment-moderate-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Profile page — linked accounts */
.icly-profile-links {
  margin-top: var(--s-4);
  border-top: 1px solid var(--border);
  padding-top: var(--s-3);
}

.icly-profile-links h3 {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
}

.icly-profile-link-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-1) 0;
}

/* the base .icly-btn is inline-block — center the label inside the button
   (and the button against the row text) like the rest of the site's buttons */
.icly-profile-link-row .icly-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icly-profile-link-name {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  min-width: 5rem;
}

.icly-profile-link-ok {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--fg-3);
}

.icly-users-sub {
  color: var(--fg-3);
  font-size: 0.65rem;
}

/* Profile page — inline OAuth error */
.icly-profile-error {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--danger);
  border: 1px dashed rgba(229, 72, 77, 0.55);
  background: rgba(229, 72, 77, 0.06);
  border-radius: var(--radius);
  padding: var(--s-3);
  margin-bottom: var(--s-4);
}

/* Desktop /edit/ rail mode: the topbar 🌳 also carries .icly-btn, whose
   display:inline-block (later in the file) beats the base
   .icly-tree-topbar{display:none} — leaving a dead button that only opens
   the overlay ("gray screen"). Hide it above the drawer range; the drawer
   media queries below 1472px restore it. */
@media (min-width: 1472px) {
  body.icly-editor-page .icly-tree-topbar {
    display: none;
  }
}