:root {
  --black: #060605;
  --card: #121110;
  --card-2: #1a1916;
  --stroke: #2b2a26;
  --white: #f6f4ee;
  --grey: #8c8a82;
  --coral: #fdc300;
  --coral-dark: #e0ab00;
  /* Same brand yellow, but legible as TEXT on this theme's background —
     #fdc300 itself is only for fills/borders/buttons (things with room to
     not need to pass text-contrast rules). */
  --coral-text: #fdc300;
  --sage: #cdd6c2;
  --olive: #928f2f;
  --lavender: #aa9fd0;
  --mint: #a8d1ba;
  --danger: #e5484d;
  --ok: #7be0a0;
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-pill: 14px;
  font-size: 16px;
}

/* Light mode — same warm/editorial palette, surfaces and ink swapped.
   Toggled via data-theme on <html>; see the inline script in layout_top.php.
   Absence of the attribute (or data-theme="dark") keeps the default dark look above. */
:root[data-theme="light"] {
  --black: #faf8f3;
  --card: #ffffff;
  --card-2: #f1efe6;
  --stroke: #ddd7c9;
  --white: #18150f;
  --grey: #6d6a61;
  --coral: #fdc300;
  --coral-dark: #e0ab00;
  /* Bright yellow text fails contrast on this theme's near-white
     background — same hue, darkened, for anywhere coral is actual text. */
  --coral-text: #8a6a00;
  --sage: #cdd6c2;
  --olive: #726f26;
  --lavender: #7c6fb0;
  --mint: #6fa787;
}

/* Brand fonts — self-hosted, licensed for this private/password-gated site only. */
@font-face {
  font-family: 'Circular Std';
  src: url('/assets/fonts/CircularStd-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Circular Std';
  src: url('/assets/fonts/CircularStd-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Circular Std';
  src: url('/assets/fonts/CircularStd-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Leitura News';
  src: url('/assets/fonts/LeituraNews-Roman.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

html, body { height: 100%; }
body {
  background: var(--black);
  color: var(--white);
  font-family: 'Circular Std', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  /* Keeps the footer pinned to the bottom of the viewport on short pages,
     instead of floating up right under a short amount of content. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, .brand, .btn, .badge-pill, .eyebrow { font-family: 'Circular Std', system-ui, sans-serif; }
.mono, table.list, table.props, .item-detail, code, pre { font-family: 'Circular Std', sans-serif; }
.serif, .section-subtitle, .login-wrap .tagline, .content p, .content li, .content blockquote {
  font-family: 'Leitura News', Georgia, serif;
}

a { color: var(--coral-text); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--black);
  border-bottom: 1px solid var(--stroke);
  padding: 0.9rem 1.5rem;
  flex-wrap: wrap;
}
.topbar .brand {
  font-weight: 700;
  color: var(--white);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.brand-logo {
  height: 24px;
  width: auto;
  display: block;
}
/* Two real logo files (white/black) swapped per theme — default (dark)
   shows the white one, light mode shows the black one. */
.brand-logo-light { display: none; }
:root[data-theme="light"] .brand-logo-dark { display: none; }
:root[data-theme="light"] .brand-logo-light { display: block; }
.topbar nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.topbar nav a {
  color: var(--grey);
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-pill);
  padding: 0.45rem 1rem;
}
.topbar nav a:hover { color: var(--white); border-color: var(--white); text-decoration: none; }
.topbar .spacer { flex: 1; }
.topbar .search input {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-pill);
  min-width: 200px;
  /* Always white, not theme-relative — deliberately fixed so it doesn't
     turn near-black in dark mode. Text is a fixed dark ink to match,
     not a theme token, so it's never yellow-on-white either. */
  background: #fff;
  color: #18150f;
  font-family: 'Circular Std', sans-serif;
}
.topbar .search input::placeholder { color: #8c8a82; }
.online-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--grey);
  white-space: nowrap;
}
.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  animation: online-pulse 1.8s ease-in-out infinite;
}
@keyframes online-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.topbar-weather {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--grey);
  white-space: nowrap;
}
.topbar-birthday {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--grey);
  white-space: nowrap;
}
.topbar-birthday .birthday-past { opacity: 0.55; }
.topbar-birthday .birthday-today { color: var(--coral-text); font-weight: 700; }
.topbar-coffee {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--grey);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .user { color: var(--grey); font-size: 0.85rem; }
.topbar .logout { font-size: 0.85rem; color: var(--grey); }
.topbar .logout:hover { color: var(--coral-text); }

.container {
  max-width: min(1600px, 96vw);
  margin: 0 auto;
  padding: 2rem 1.25rem 5rem;
  flex: 1 0 auto;
  width: 100%;
}

.card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.1rem;
}

h2 { font-weight: 700; letter-spacing: -0.01em; }
.section-subtitle { color: var(--grey); font-size: 1.05rem; margin: -0.5rem 0 1.2rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.9rem; }
.grid a.tile {
  display: block;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-left: 4px solid var(--tile-accent, var(--coral));
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  color: var(--white);
}
.grid a.tile:hover { border-color: var(--coral); border-left-color: var(--tile-accent, var(--coral)); text-decoration: none; }
.grid a.tile strong { font-family: 'Circular Std', sans-serif; font-weight: 900; font-size: 1.05rem; }
.grid a.tile .count { color: var(--grey); font-size: 0.82rem; margin-top: 0.3rem; }

/* Consistent vertical rhythm between dashboard sections */
.section-block, .folder-grid { margin-bottom: 2rem; }

/* Dashboard layout: folder grid + the "quick reference" sidebar side by side */
.dashboard-main { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; }
.dashboard-folders { flex: 1 1 auto; min-width: 0; }
.dashboard-folders .folder-grid { margin-bottom: 0; }
.dashboard-reference {
  flex: 0 0 320px;
  width: 320px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 1rem;
}
.dashboard-reference-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0.6rem;
}
.reference-list { display: flex; flex-direction: column; gap: 0.6rem; }
.reference-item {
  display: block;
  background: var(--card-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.reference-item[open] { border-radius: var(--radius-lg); }
.reference-item:hover { border-color: var(--coral); }
.reference-item summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.reference-item summary::-webkit-details-marker { display: none; }
.reference-item summary::before {
  content: '+';
  color: var(--coral-text);
  font-weight: 900;
  width: 1em;
}
.reference-item[open] summary::before { content: '\2212'; }
.reference-item-body { padding: 0 1rem 1rem; font-size: 0.9rem; }
.reference-item-body :first-child { margin-top: 0; }
.reference-item-body :last-child { margin-bottom: 0; }
.reference-item-link {
  padding: 0.85rem 1rem;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
}
.reference-item-link:hover { color: var(--coral-text); }

/* Announcement ticker at the top of the sidebar (assets/ticker.js) */
.ticker {
  background: var(--coral);
  color: #060605;
  border-radius: var(--radius-pill);
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.4rem;
}
.ticker-viewport { overflow: hidden; }
.ticker-track { display: flex; width: max-content; max-width: none; }
.ticker-group { display: inline-flex; align-items: center; flex: none; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em; }
.ticker-item { white-space: nowrap; }
.ticker-sep { margin: 0 0.9rem; opacity: 0.55; font-size: 0.7em; }
/* Until the script runs (or if it can't): plain wrapped text, no motion */
.ticker:not(.ticker-running) .ticker-track { width: auto; }
.ticker:not(.ticker-running) .ticker-group { flex-wrap: wrap; row-gap: 0.2rem; }
.ticker:not(.ticker-running) .ticker-item { white-space: normal; }
.ticker-running .ticker-track { animation: ticker-scroll var(--ticker-duration, 20s) linear infinite; }
.ticker-running:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(var(--ticker-shift, 0px) * -1)); }
}
.ticker-admin-link { display: block; text-align: right; font-size: 0.75rem; margin-bottom: 0.9rem; }

/* Weekly lunch menu: a collapsed pill that expands to the uploaded image */
.lunch-menu { margin-bottom: 1.1rem; }
.lunch-menu-img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.reference-item-meta { margin-left: auto; font-weight: 400; font-size: 0.75rem; color: var(--grey); }

/* Staff directory dropdown: searchable name + phone list */
.staff-directory { margin-top: 0.6rem; }
.staff-filter {
  width: 100%;
  margin: 0 0 0.6rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--white);
  font: inherit;
  font-size: 0.85rem;
}
.staff-filter:focus { outline: 2px solid var(--coral); outline-offset: 1px; }
.staff-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.staff-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--stroke);
  font-size: 0.85rem;
}
.staff-list li:last-child { border-bottom: 0; }
.staff-list li[hidden] { display: none; }
.staff-name { color: var(--white); min-width: 0; overflow-wrap: anywhere; }
.staff-name:hover { color: var(--coral-text); }
.staff-phone { white-space: nowrap; color: var(--coral-text); }
/* Keyboard shortcuts dropdown: description left, keycaps right-aligned.
   Long key combos drop under their description instead of squeezing it. */
.reference-item-body .shortcut-app {
  margin: 1.3rem 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--grey);
}
.reference-item-body .shortcut-group:first-of-type .shortcut-app { margin-top: 0.5rem; }
.shortcut-group[hidden] { display: none; }
.staff-list.shortcut-list { max-height: none; overflow: visible; }
.staff-list.shortcut-list li {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  padding: 0.7rem 0;
  font-size: 0.92rem;
  line-height: 1.35;
}
.shortcut-desc { flex: 1 1 6rem; min-width: 0; overflow-wrap: anywhere; }
.kbd-group { margin-left: auto; flex: none; }
.kbd-caps { display: inline-flex; gap: 0.25rem; align-items: center; }
.kbd-or { color: var(--grey); font-size: 0.8rem; margin: 0 0.05rem; }
kbd {
  font-family: 'Circular Std', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  min-width: 1.8rem;
  text-align: center;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--stroke);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--card);
  color: var(--white);
  white-space: nowrap;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Keyboard users get a clear ring on every dropdown header */
.reference-item summary:focus-visible { outline: 2px solid var(--coral); outline-offset: -2px; border-radius: inherit; }
.staff-who { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.staff-company { color: var(--grey); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Logo/avatar thumbnail used on the collaborators admin page */
.contact-logo {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: var(--card-2);
  border: 1px solid var(--stroke);
}
.contact-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: var(--coral-text);
}

/* Formatting toolbar above any markdown textarea (assets/markdown-toolbar.js) */
.md-toolbar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.5rem; }
.md-toolbar-btn {
  background: var(--card-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  color: var(--white);
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.md-toolbar-btn:hover { border-color: var(--coral); color: var(--coral-text); }
.md-toolbar-color { width: 36px; height: 32px; padding: 2px; border: 1px solid var(--stroke); border-radius: var(--radius-md); background: var(--card-2); cursor: pointer; }

/* Folder cards: image/color header, title, then a short preview list */
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }
.folder-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.folder-card:hover { border-color: var(--coral); }
.folder-card-top {
  display: block;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  overflow: hidden;
  isolation: isolate;
}
.folder-card-top::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 60%);
}
.folder-card-title {
  position: relative;
  z-index: 2;
  /* Brand yellow, not a theme token — this sits on a fixed
     black-to-transparent scrim over a photo (see .folder-card-top::before),
     which doesn't flip with light/dark mode, so the text can't either.
     (Not --coral-text: this is large/bold display type on a dark scrim,
     not small body text on a light surface, so the bright brand yellow
     itself reads fine here.) */
  color: var(--coral);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  font-family: 'Circular Std', sans-serif;
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
/* Animated "glow" art for folder cards without an uploaded picture: a dark
   base tinted with the folder's colour, a halo in that colour, and a glowing
   brand-yellow core that slowly drifts and breathes, with film grain on top.
   Colours (--art-c1..5: halo, mid glow, base, core, hot spot) are computed
   per folder in index.php. Four compositions (v0-v3) move the glow around so
   cards don't look alike: --x/--y = where the glow sits, in % of the card. */
.folder-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--art-c3, #260600); --x: 72%; --y: 96%; }
.folder-art i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  aspect-ratio: 1;
  border-radius: 50%;
  will-change: transform;
  animation-delay: var(--art-delay, 0s);
}
.folder-art .b1 { width: 150%; background: radial-gradient(closest-side, var(--art-c1) 0%, color-mix(in srgb, var(--art-c1) 62%, transparent) 38%, color-mix(in srgb, var(--art-c1) 18%, transparent) 72%, transparent 100%); animation: art-drift-1 17s ease-in-out infinite alternate; }
.folder-art .b2 { width: 96%;  background: radial-gradient(closest-side, var(--art-c2) 0%, color-mix(in srgb, var(--art-c2) 70%, transparent) 40%, color-mix(in srgb, var(--art-c2) 20%, transparent) 75%, transparent 100%); animation: art-drift-2 14s ease-in-out infinite alternate; }
.folder-art .b3 { width: 54%;  background: radial-gradient(closest-side, var(--art-c4) 0%, var(--art-c4) 48%, color-mix(in srgb, var(--art-c4) 40%, transparent) 78%, transparent 100%); animation: art-drift-3 12s ease-in-out infinite alternate; }
.folder-art .b4 { width: 26%;  background: radial-gradient(closest-side, var(--art-c5) 0%, color-mix(in srgb, var(--art-c5) 55%, transparent) 55%, transparent 100%); animation: art-drift-4 10s ease-in-out infinite alternate; }
/* v1: big orb top-right */
.folder-art.v1 { --x: 80%; --y: 12%; }
.folder-art.v1 .b3 { width: 66%; }
/* v2: horizon band across the upper third */
.folder-art.v2 { --x: 50%; --y: 36%; }
.folder-art.v2 .b1 { width: 170%; aspect-ratio: 2.4 / 1; }
.folder-art.v2 .b2 { width: 130%; aspect-ratio: 3 / 1; }
.folder-art.v2 .b3 { width: 135%; aspect-ratio: 6 / 1; }
.folder-art.v2 .b4 { width: 80%;  aspect-ratio: 8 / 1; }
/* v3: orb high on the left */
.folder-art.v3 { --x: 16%; --y: 22%; }
.folder-art.v3 .b3 { width: 60%; }
.folder-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.32;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* WebGL version (assets/folder-fluid.js) draws into this canvas and, once it is
   running, replaces the CSS gradient above; without WebGL the CSS one stays. */
.folder-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.folder-card-top.gl-on .folder-art { display: none; }
/* the canvas is rendered small (soft), so grain is laid over it at full resolution */
.folder-card-top.gl-on::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.26;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* lighter scrim than on photos: just enough to keep the yellow title readable */
.folder-card-top.has-art::before { background: linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,0) 48%); }
@keyframes art-drift-1 { from { transform: translate(0, 0) scale(1); }      to { transform: translate(4%, -3%) scale(1.1); } }
@keyframes art-drift-2 { from { transform: translate(0, 0) scale(1); }      to { transform: translate(-5%, -4%) scale(1.14); } }
@keyframes art-drift-3 { from { transform: translate(0, 3%) scale(1); }     to { transform: translate(3%, -7%) scale(1.1); } }
@keyframes art-drift-4 { from { transform: translate(0, 0) scale(1); }      to { transform: translate(-5%, -6%) scale(1.22); } }
@media (prefers-reduced-motion: reduce) { .folder-art i { animation: none; } }

.folder-card-body { padding: 0.9rem 1.1rem 1rem; display: flex; flex-direction: column; flex: 1; }
.folder-preview-list { list-style: none; margin: 0; padding: 0; }
.folder-preview-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--stroke); font-size: 0.9rem; }
.folder-preview-list li:last-child { border-bottom: none; }
.folder-preview-list a { color: var(--white); }
.folder-preview-list a:hover { color: var(--coral-text); text-decoration: none; }
.folder-card-footer { margin-top: auto; padding-top: 0.7rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }

.table-scroll { overflow-x: auto; margin-bottom: 1rem; border: 1px solid var(--stroke); border-radius: var(--radius-md); }
table.list, table.props {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
}
table.list { min-width: max-content; }
table.list th, table.list td, table.props th, table.props td {
  border-bottom: 1px solid var(--stroke);
  padding: 0.65rem 0.8rem;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  font-size: 0.88rem;
}
table.props { font-family: 'Circular Std', sans-serif; border: 1px solid var(--stroke); border-radius: var(--radius-md); overflow: hidden; }
table.props td { white-space: normal; font-family: 'Circular Std', sans-serif; }
table.list th { color: var(--grey); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; background: var(--card-2); }
table.props th { width: 180px; color: var(--grey); font-weight: 600; }
table.list tr:hover td { background: var(--card-2); }

.btn {
  display: inline-block;
  background: var(--coral);
  color: var(--black);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.15rem;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 900;
}
.btn:hover { background: var(--coral-dark); text-decoration: none; color: var(--black); }
.btn.secondary { background: transparent; color: var(--white); border: 1px solid var(--stroke); }
.btn.secondary:hover { border-color: var(--coral); color: var(--coral-text); background: transparent; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger:hover { background: #c93e42; }

.form-row { margin-bottom: 1.15rem; }
.form-row label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.85rem; color: var(--grey); text-transform: uppercase; letter-spacing: 0.03em; }
.form-row input[type=text], .form-row input[type=url], .form-row input[type=password],
.form-row input[type=number], .form-row input[type=date], .form-row input[type=email],
.form-row input[type=search], .form-row textarea, .form-row select {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  font-family: 'Circular Std', sans-serif;
  font-size: 0.95rem;
  background: var(--card-2);
  color: var(--white);
}
.form-row select { border-radius: var(--radius-md); }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline: 2px solid var(--coral); outline-offset: 1px; }
.form-row textarea { min-height: 220px; font-family: 'Circular Std', sans-serif; font-size: 0.9rem; }
.kv-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.kv-row input { flex: 1; }

.content h1, .content h2, .content h3 { margin-top: 1.4em; font-family: 'Circular Std', sans-serif; }
.content { font-family: 'Circular Std', sans-serif; }
.content p, .content li { font-size: 1.05rem; line-height: 1.7; }
.code-block-wrap { position: relative; }
.code-block-wrap pre { padding-right: 4.75rem; }
.code-copy-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: var(--card);
  border: 1px solid var(--stroke);
  color: var(--grey);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
  font-family: 'Circular Std', sans-serif;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
}
.code-copy-btn:hover { border-color: var(--coral); color: var(--white); }
.code-copy-btn.copied { border-color: var(--ok); color: var(--ok); }
.content pre { background: var(--card-2); color: var(--white); padding: 1rem; border-radius: var(--radius-md); overflow-x: auto; border: 1px solid var(--stroke); }
.content code { background: var(--card-2); padding: 0.15em 0.4em; border-radius: 6px; font-family: 'Circular Std', sans-serif; }
.content pre code { background: none; padding: 0; }
.content blockquote { border-left: 3px solid var(--coral); margin: 0.8em 0; padding: 0.3em 1.1em; color: var(--grey); }
.content img { max-width: 100%; border-radius: var(--radius-md); }
.content .table-scroll { margin: 0.8em 0; }
.content table { border-collapse: collapse; width: 100%; }
.content table th, .content table td { border: 1px solid var(--stroke); padding: 0.5rem 0.7rem; white-space: nowrap; }
.content table th { background: var(--card-2); }

.breadcrumbs { color: var(--grey); font-size: 0.85rem; margin-bottom: 1.2rem; font-family: 'Circular Std', sans-serif; }
.breadcrumbs a { color: var(--grey); }
.breadcrumbs a:hover { color: var(--coral-text); }
.muted { color: var(--grey); }
.actions { display: flex; gap: 0.6rem; margin: 1.2rem 0; flex-wrap: wrap; align-items: center; }
.actions-left, .actions-right { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
/* Pushes the pinned-pages row to the far right, without changing .actions
   itself — other pages put plain buttons directly in .actions (no
   left/right wrapper divs) and must keep their normal left-aligned flow. */
.actions-right { margin-left: auto; }
.pin-btn { font-size: 0.82rem; padding: 0.45rem 0.9rem; }
.flash {
  background: var(--sage);
  color: #14130f;
  border: none;
  padding: 0.8rem 1.15rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.1rem;
  font-weight: 500;
}
.flash.error { background: var(--danger); color: #fff; }

.login-wrap { max-width: 380px; margin: 4.5rem auto; }
.login-wrap h1 {
  text-align: center;
  font-size: 1.5rem;
  font-family: 'Circular Std', sans-serif;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.login-wrap h1::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }
.login-wrap .tagline {
  text-align: center;
  color: var(--grey);
  font-size: 1.05rem;
  margin: 0.3rem 0 2rem;
}

/* Dashboard modules: weather / map / calendar / spotify / video / artist */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.1rem;
  margin-bottom: 2rem;
}
.module-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}
.module-card h4 {
  margin: 0 0 0.8rem;
  font-family: 'Circular Std', sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey);
  font-weight: 700;
}
.module-card.wide { grid-column: 1 / -1; overflow-x: auto; }
.module-card.wide iframe { width: 100% !important; min-width: 1000px; border: none; border-radius: var(--radius-md); }

.weather-display { display: flex; align-items: center; gap: 1rem; flex: 1; }
.weather-display.compact { flex: 0 0 auto; }
.weather-display .emoji { font-size: 2.6rem; line-height: 1; }
.weather-display .temp { font-family: 'Circular Std', sans-serif; font-size: 2rem; font-weight: 700; }
.weather-display .temp.names { font-size: 1.2rem; line-height: 1.3; }
.weather-display .label { color: var(--grey); font-size: 0.85rem; }
.weather-display .wind { color: var(--grey); font-size: 0.8rem; margin-top: 0.2rem; font-family: 'Circular Std', sans-serif; }

.module-card .map-frame, .module-card .calendar-frame {
  border: none;
  border-radius: var(--radius-md);
  width: 100%;
  flex: 1;
  min-height: 220px;
}

.video-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius-md); overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

.artist-card { display: flex; gap: 1rem; align-items: center; flex: 1; }
.artist-card img { width: 64px; height: 64px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; background: var(--card-2); }
.artist-card .name { font-family: 'Circular Std', sans-serif; font-weight: 700; font-size: 1.05rem; }
.artist-card .note { color: var(--grey); font-size: 0.85rem; margin-top: 0.2rem; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: var(--card);
  color: var(--white);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.theme-toggle:hover { border-color: var(--white); }
.theme-toggle.floating { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 10; }

/* Footer */
footer.site-footer {
  border-top: 1px solid var(--stroke);
  margin-top: 3rem;
  padding: 1.5rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: min(1600px, 96vw);
  margin-left: auto;
  margin-right: auto;
}
footer.site-footer a { color: var(--grey); }
footer.site-footer a:hover { color: var(--coral-text); }
footer.site-footer .socials { display: flex; gap: 0.9rem; align-items: center; }
footer.site-footer .socials a { font-size: 1.3rem; line-height: 1; }

/* Mobile (phones). Header becomes: row 1 = logo, links, dark-mode toggle;
   row 2 = search; row 3+ = status badges, username, log out. Desktop keeps
   the original DOM order (untouched) — everything below is under 640px only. */
@media (max-width: 640px) {
  .topbar { gap: 0.5rem 0.8rem; padding: 0.6rem 0.9rem; }
  .brand-logo { height: 20px; }
  .topbar nav { flex-wrap: nowrap; }
  .topbar nav a { padding: 0.4rem 0.8rem; font-size: 0.8rem; white-space: nowrap; }
  .topbar nav .nav-label { display: none; }
  .topbar .search input { min-width: 0; width: 100%; padding: 0.5rem 0.9rem; }
  .online-badge, .topbar-weather, .topbar-birthday { font-size: 0.78rem; gap: 0.3rem; }
  .topbar .user, .topbar .logout { font-size: 0.8rem; }
  .topbar .spacer { display: none; }
  .topbar .brand { order: 1; }
  .topbar nav { order: 2; }
  .topbar .theme-toggle { order: 3; margin-left: auto; width: 38px; height: 38px; }
  .topbar .search { order: 4; flex: 1 1 100%; }
  .online-badge { order: 5; }
  .topbar-weather { order: 6; }
  .topbar-coffee { order: 7; max-width: 160px; font-size: 0.78rem; }
  .topbar-birthday { order: 8; white-space: normal; }
  .topbar .user { order: 9; margin-left: auto; }
  .topbar .logout { order: 10; }

  .container { padding: 1.25rem 1rem 3rem; }
  .card { padding: 1.1rem; }
  .login-wrap { margin: 2rem auto; }
  .actions { gap: 0.5rem; }
  .actions-right { margin-left: 0; }
  .btn { padding: 0.7rem 1.1rem; }
  .pin-btn { padding: 0.55rem 0.9rem; }
  table.props th { width: 38%; }

  /* 16px inputs: anything smaller makes iPhones zoom the page on focus */
  .form-row input[type=text], .form-row input[type=url], .form-row input[type=password],
  .form-row input[type=number], .form-row input[type=date], .form-row input[type=email],
  .form-row input[type=search], .form-row textarea, .form-row select,
  .kv-row input, .staff-filter, .fmt-search, .topbar .search input { font-size: 16px; }

  .folder-grid { gap: 0.8rem; }
  .folder-card-top { aspect-ratio: 16 / 9; padding: 0.8rem; }
  .folder-card-title { font-size: 1.15rem; }
  .folder-preview-list li { padding: 0.55rem 0; }
  .module-grid { gap: 0.8rem; }

  /* Quick-reference sidebar goes above the folder grid on mobile, full width. */
  .dashboard-main { flex-direction: column; align-items: stretch; gap: 1rem; }
  .dashboard-reference { order: 1; width: auto; flex: 0 0 auto; padding: 0.8rem; }
  .dashboard-folders { order: 2; width: 100%; }
  .reference-item summary { padding: 0.95rem 1rem; }
  .staff-list { max-height: 280px; }
  .staff-list li { padding: 0.65rem 0; }

  /* Easier-to-hit formatting toolbar */
  .md-toolbar-btn { padding: 0.5rem 0.8rem; font-size: 0.9rem; }
  .md-toolbar-color { width: 42px; height: 38px; }
}

/* Birthday overlay: confetti + the name(s), shown once per IP per day */
.birthday-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.72);
  animation: birthday-fade 0.35s ease both;
}
.birthday-overlay[hidden] { display: none; }
.birthday-overlay canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.birthday-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: min(520px, 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(253, 195, 0, 0.35);
  text-align: center;
  padding: 2.4rem 1.5rem 2rem;
  color: #fff;
  animation: birthday-pop 0.55s cubic-bezier(0.2, 1.2, 0.3, 1) both;
}
.birthday-content { position: relative; z-index: 2; }
.birthday-emoji { font-size: 3rem; line-height: 1; }
.birthday-kicker { margin: 0.7rem 0 0.2rem; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #ffe66b; }
.birthday-names { margin: 0 0 1.6rem; font-size: clamp(2rem, 8vw, 3.2rem); line-height: 1.1; font-weight: 900; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); overflow-wrap: anywhere; }
.birthday-close {
  background: #fff;
  color: #18150f;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.75rem 1.6rem;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.birthday-close:hover { background: #ffe66b; }
.birthday-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes birthday-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes birthday-pop { from { opacity: 0; transform: translateY(18px) scale(0.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .birthday-overlay, .birthday-card { animation: none; } }

/* Stærðir og safe zones guide (storlir.php) */
.fmt-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fmt-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: 0.85rem; color: var(--grey); margin: 1rem 0; }
.fmt-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 0.4rem; box-sizing: border-box; }
.fmt-swatch-unsafe { background: rgba(229, 72, 77, 0.5); }
.fmt-swatch-outline { border: 2px dashed var(--coral-text); }
.fmt-controls { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.4rem; }
.fmt-search {
  max-width: 420px;
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--white);
  font: inherit;
}
.fmt-search:focus { outline: 2px solid var(--coral); outline-offset: 1px; }
.fmt-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fmt-chip {
  background: var(--card-2);
  border: 1px solid var(--stroke);
  color: var(--white);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.85rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.fmt-chip:hover { border-color: var(--coral); }
.fmt-chip.active { background: var(--coral); border-color: var(--coral); color: #060605; font-weight: 700; }
.fmt-section { margin-bottom: 2rem; }
.fmt-section[hidden], .fmt-card[hidden] { display: none; }
.fmt-section-title { margin: 0 0 0.8rem; font-size: 1.25rem; }
.fmt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.fmt-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  scroll-margin-top: 90px;
}
.fmt-card:target { border-color: var(--coral); box-shadow: 0 0 0 2px var(--coral); }
.fmt-preview { background: var(--card-2); padding: 1rem; display: flex; justify-content: center; align-items: center; min-height: 150px; }
.fmt-svg { display: block; height: auto; }
.fmt-canvas { fill: var(--card); stroke: var(--grey); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fmt-unsafe { opacity: 0.5; }
.fmt-unsafe rect { fill: #e5484d; }
.fmt-safe-outline { fill: none; stroke: var(--coral-text); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.fmt-label { fill: var(--grey); font-weight: 700; }
.fmt-body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.fmt-title { margin: 0; font-size: 1.05rem; font-weight: 900; }
.fmt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.fmt-size {
  background: var(--coral);
  color: #060605;
  border: 0;
  border-radius: var(--radius-md);
  padding: 0.25rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.fmt-size:hover { background: var(--coral-dark); }
.fmt-size.copied { background: var(--card-2); color: var(--coral-text); outline: 1px solid var(--coral); }
.fmt-ratio { color: var(--grey); font-size: 0.85rem; }
.fmt-badge { font-size: 0.72rem; border: 1px solid var(--stroke); color: var(--grey); border-radius: var(--radius-pill); padding: 0.1rem 0.5rem; cursor: help; }
.fmt-safe, .fmt-notes { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; }
.fmt-safe li, .fmt-notes li { margin: 0.1rem 0; }
.fmt-notes { color: var(--grey); }
.fmt-edit { font-size: 0.8rem; margin-top: auto; }
.fmt-disclaimer { margin-top: 1rem; }
.fmt-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 1rem; }

@media (max-width: 640px) {
  /* Platform filters become one swipeable row instead of three wrapped rows */
  .fmt-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -1rem; padding: 0 1rem 0.25rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .fmt-chips::-webkit-scrollbar { display: none; }
  .fmt-chip { flex: none; padding: 0.5rem 0.95rem; }
  .fmt-grid { grid-template-columns: 1fr; }
  .fmt-preview { min-height: 0; }
  .fmt-size { padding: 0.45rem 0.8rem; }
  .fmt-form-grid { grid-template-columns: 1fr 1fr; }
}

/* Skjalareglur (reglur.php): Finder-style window, file-name pattern, builder */
:root { --seg-1: #7480e6; --seg-2: #b872c9; --seg-3: #3fc07a; --seg-4: #b9b9b9; --seg-5: #5ba0e8; --seg-6: #8c8a82; }
:root[data-theme="light"] { --seg-1: #4553b8; --seg-2: #8e4aa3; --seg-3: #1f9457; --seg-4: #6d6a61; --seg-5: #2f74c0; --seg-6: #6d6a61; }
.seg-1 { color: var(--seg-1); } .seg-2 { color: var(--seg-2); } .seg-3 { color: var(--seg-3); }
.seg-4 { color: var(--seg-4); } .seg-5 { color: var(--seg-5); } .seg-6 { color: var(--seg-6); }
.is-missing { opacity: 0.4; }

.rules-window { border: 1px solid var(--stroke); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; margin-top: 1.2rem; }
.rules-titlebar { display: flex; align-items: center; gap: 0.8rem; padding: 0.65rem 0.9rem; background: var(--card-2); border-bottom: 1px solid var(--stroke); }
.rules-lights { display: inline-flex; gap: 0.4rem; }
.rules-lights i { display: block; width: 11px; height: 11px; border-radius: 50%; }
.rules-lights i:nth-child(1) { background: #ff5f57; }
.rules-lights i:nth-child(2) { background: #febc2e; }
.rules-lights i:nth-child(3) { background: #28c840; }
.rules-title { flex: 1; text-align: center; font-size: 0.85rem; color: var(--grey); margin-right: 3.1rem; }
.rules-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.rules-sidebar { background: var(--card-2); border-right: 1px solid var(--stroke); padding: 0.9rem 0.6rem; }
.rules-side-label { margin: 0 0.6rem 0.35rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); }
.rules-nav { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.7rem; border-radius: var(--radius-md); color: var(--white); font-size: 0.92rem; }
.rules-nav:hover { background: var(--stroke); text-decoration: none; }
.rules-nav.is-active { background: var(--coral); color: #060605; font-weight: 700; }
.rules-main { padding: 1.4rem 1.6rem; min-width: 0; }
.rules-pane[hidden] { display: none; }
.rules-h { margin: 0 0 0.3rem; font-size: 1.15rem; }
.rules-sub { margin: 1.4rem 0 0.5rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grey); font-weight: 700; }

.name-pattern { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.4rem 0.6rem; margin: 1.5rem 0 0.6rem; }
.seg-col { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; min-width: 0; }
.seg { font-size: 1.5rem; line-height: 1.2; }
.seg-line { width: 1px; height: 26px; background: var(--grey); opacity: 0.6; }
.seg-cap { font-size: 0.78rem; color: var(--white); line-height: 1.25; }
.seg-dash { font-size: 1.5rem; line-height: 1.2; color: var(--white); }
.name-example { font-size: 1.5rem; margin: 1rem 0 0.4rem; line-height: 1.35; overflow-wrap: anywhere; }
.seg-sep { color: var(--grey); }

.rules-card { margin-top: 1.4rem; }
.rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 1rem; }
.rules-hint { margin: 0.3rem 0 0; font-size: 0.78rem; color: var(--grey); }
.rules-hint.is-bad { color: var(--danger); opacity: 1; }
.rules-output { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; background: var(--card-2); border: 1px solid var(--stroke); border-radius: var(--radius-md); padding: 0.8rem 1rem; margin-top: 0.6rem; }
.rules-out-name { flex: 1 1 260px; min-width: 0; font-size: 1.05rem; overflow-wrap: anywhere; background: none; padding: 0; }
.rules-path { font-size: 0.9rem; }
.rules-save { margin-top: 1.4rem; padding-top: 0.1rem; border-top: 1px solid var(--stroke); }
.rules-tree { list-style: none; margin: 0 0 0.6rem; padding: 0; font-size: 0.92rem; }
.rules-tree li { padding: 0.15rem 0; overflow-wrap: anywhere; }

.rules-check-input { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--stroke); border-radius: var(--radius-md); background: var(--card-2); color: var(--white); font: inherit; font-size: 1rem; }
.rules-check-input:focus { outline: 2px solid var(--coral); outline-offset: 1px; }
.rules-check { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.rules-check li { display: grid; grid-template-columns: 1.4rem 6.5rem minmax(0, 13rem) 1fr; gap: 0.2rem 0.6rem; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--stroke); font-size: 0.9rem; }
.rules-check li.all-ok { display: block; color: var(--ok); font-weight: 700; border-bottom: 0; }
.chk-mark { font-weight: 900; }
.rules-check li.ok .chk-mark { color: var(--ok); }
.rules-check li.warn .chk-mark { color: var(--coral-text); }
.rules-check li.bad .chk-mark { color: var(--danger); }
.chk-label { color: var(--grey); }
.chk-value { overflow-wrap: anywhere; }

.abbr-search { margin: 0.8rem 0 1.2rem; max-width: 420px; }
.abbr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.6rem 2rem; }
.abbr-block[hidden] { display: none; }
.abbr-cat { margin: 0 0 0.5rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--grey); font-weight: 700; }
.abbr-list { list-style: none; margin: 0; padding: 0; }
.abbr-list li[hidden] { display: none; }
.abbr-list li:nth-child(odd) { background: var(--card-2); border-radius: 6px; }
.abbr-row { display: grid; grid-template-columns: 4.2rem 1fr; gap: 0.8rem; width: 100%; text-align: left; background: none; border: 0; color: var(--white); font: inherit; padding: 0.55rem 0.7rem; cursor: pointer; border-radius: 6px; }
.abbr-row:hover { background: var(--stroke); }
.abbr-row:focus-visible { outline: 2px solid var(--coral); }
.abbr-code { font-weight: 900; letter-spacing: 0.02em; }
.abbr-row.copied .abbr-name { color: var(--ok); }

@media (max-width: 640px) {
  .rules-body { grid-template-columns: 1fr; }
  .rules-sidebar { border-right: 0; border-bottom: 1px solid var(--stroke); display: flex; gap: 0.3rem; overflow-x: auto; padding: 0.5rem; }
  .rules-side-label { display: none; }
  .rules-nav { flex: none; white-space: nowrap; }
  .rules-main { padding: 1rem; }
  .rules-title { margin-right: 0; }
  .seg, .seg-dash { font-size: 1.15rem; }
  .name-example { font-size: 1.1rem; }
  .rules-check li { grid-template-columns: 1.4rem minmax(0, 1fr); }
  .rules-check .chk-value, .rules-check .chk-msg { grid-column: 2; }
  .rules-check .chk-label { grid-column: 2; }
}

/* Skjalareglur: summary card, examples, key folders, Finder columns, checklists */
.rules-gold { background: var(--card-2); border: 1px solid var(--stroke); border-radius: var(--radius-md); padding: 1rem 1.2rem; }
.rules-gold ul { margin: 0; padding-left: 1.2rem; columns: 2 280px; column-gap: 2rem; }
.rules-gold li { margin: 0.2rem 0; break-inside: avoid; }
.rules-examples { margin: 0.4rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; }
.rules-examples li { margin: 0.25rem 0; overflow-wrap: anywhere; }
.rules-check-row { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; font-size: 0.92rem; cursor: pointer; }
.rules-check-row input { width: auto; }
.rules-nav-link { color: var(--grey); }

.key-folders { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.8rem; margin-top: 0.8rem; }
.key-folder { background: var(--card-2); border: 1px solid var(--stroke); border-radius: var(--radius-md); padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.88rem; }
.key-folder strong { font-size: 1rem; color: var(--coral-text); }
.key-folder code { font-size: 0.8rem; color: var(--grey); }

.finder-cols { display: flex; overflow-x: auto; border: 1px solid var(--stroke); border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--card-2); min-height: 260px; max-height: 420px; }
.finder-col { flex: 0 0 210px; border-right: 1px solid var(--stroke); overflow-y: auto; padding: 0.3rem; }
.finder-col ul { list-style: none; margin: 0; padding: 0; }
.finder-item { display: flex; align-items: center; gap: 0.45rem; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; color: var(--white); font: inherit; font-size: 0.88rem; padding: 0.38rem 0.5rem; cursor: pointer; }
.finder-item:hover { background: var(--stroke); }
.finder-item:focus-visible { outline: 2px solid var(--coral); }
.finder-item.is-selected { background: var(--coral); color: #060605; font-weight: 700; }
.fi-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fi-chev { opacity: 0.7; }
.ph { font-style: italic; color: var(--seg-5); }
.finder-item.is-selected .ph { color: inherit; }
.finder-path { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; border: 1px solid var(--stroke); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); padding: 0.55rem 0.8rem; background: var(--card); }
.finder-path-text { font-size: 0.85rem; color: var(--grey); min-width: 0; overflow-wrap: anywhere; }

.check-switch { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 1rem; }
.check-tab { background: var(--card-2); border: 1px solid var(--stroke); color: var(--white); border-radius: var(--radius-pill); padding: 0.4rem 0.95rem; font: inherit; font-size: 0.88rem; cursor: pointer; }
.check-tab:hover { border-color: var(--coral); }
.check-tab.is-active { background: var(--coral); border-color: var(--coral); color: #060605; font-weight: 700; }
.check-list[hidden] { display: none; }
.check-list ul { list-style: none; margin: 0; padding: 0; }
.check-list li label { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.65rem 0.4rem; border-bottom: 1px solid var(--stroke); cursor: pointer; font-size: 0.95rem; }
.check-list li input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--coral); flex: none; }
.check-list li input:checked + span { color: var(--grey); text-decoration: line-through; }
.check-notes { margin-top: 0.8rem !important; padding: 0.8rem 1rem !important; background: var(--card-2); border: 1px solid var(--stroke); border-radius: var(--radius-md); }
.check-notes li { padding: 0.15rem 0; font-size: 0.9rem; }
.check-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; }
@media (max-width: 640px) {
  .finder-col { flex-basis: 170px; }
  .rules-gold ul { columns: 1; }
}

/* Circular Std turns "1080x1920" into "1080×1920" — wrong for file names, which must use a plain x */
.rules-window { font-feature-settings: "calt" 0, "liga" 0; font-variant-ligatures: none; }

/* Source label on each size card (Úr skjölum okkar / Staðfest / Óstaðfest) */
.fmt-badge-team { color: var(--ok); border-color: var(--ok); }
.fmt-badge-verified { color: var(--coral-text); border-color: var(--coral); }

/* a size mentioned inside a card's notes (e.g. the MP4 export size) is click-to-copy too */
.fmt-size-inline { padding: 0.05rem 0.45rem; font-size: inherit; border-radius: 6px; }

/* Tæki og búnaður (graejur.php) */
.eq-mine { margin-top: 1.2rem; }
.eq-mine-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.eq-mine-list { list-style: none; margin: 0; padding: 0; }
.eq-mine-list > li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.7rem 0; border-top: 1px solid var(--stroke); }
.eq-mine-main { display: flex; align-items: flex-start; gap: 0.7rem; min-width: 0; }
.eq-ico { font-size: 1.4rem; line-height: 1.2; }
.eq-mine-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.eq-small { padding: 0.35rem 0.8rem; font-size: 0.8rem; }
.eq-sub { font-size: 0.8rem; margin-top: 0.1rem; overflow-wrap: anywhere; }
.eq-tag { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.05rem 0.45rem; border: 1px solid var(--stroke); border-radius: 6px; background: var(--card-2); }
.eq-report { display: inline-block; }
.eq-report summary { list-style: none; cursor: pointer; display: inline-block; }
.eq-report summary::-webkit-details-marker { display: none; }
.eq-report[open] { display: block; width: 100%; margin-top: 0.5rem; }
.eq-report textarea { width: 100%; min-height: 70px; margin: 0.4rem 0; padding: 0.55rem 0.7rem; border: 1px solid var(--stroke); border-radius: var(--radius-md); background: var(--card-2); color: var(--white); font: inherit; font-size: 0.9rem; }
.eq-missing { margin-top: 0.8rem; font-size: 0.9rem; }
.eq-missing summary { color: var(--coral-text); }

.eq-controls { display: flex; flex-direction: column; gap: 0.7rem; margin: 1.4rem 0 0.4rem; }
.eq-filters { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.eq-filters select { padding: 0.5rem 0.7rem; border: 1px solid var(--stroke); border-radius: var(--radius-md); background: var(--card); color: var(--white); font: inherit; font-size: 0.9rem; max-width: 100%; }
.eq-table td { white-space: normal; }
.eq-table tr[hidden] { display: none; }
.eq-status { display: inline-block; font-size: 0.78rem; padding: 0.1rem 0.55rem; border-radius: 999px; border: 1px solid var(--stroke); }
.eq-s-use { color: var(--ok); border-color: var(--ok); }
.eq-s-stock { color: var(--coral-text); border-color: var(--coral); }
.eq-s-repair { color: var(--danger); border-color: var(--danger); }
.eq-s-retired { color: var(--grey); }
.eq-conf { display: inline-block; font-size: 0.78rem; white-space: nowrap; }
.eq-conf-ok { color: var(--ok); }
.eq-conf-warn { color: var(--coral-text); }
.eq-conf-bad { color: var(--danger); }
.eq-old { color: var(--coral-text); font-weight: 700; }
.eq-warn { color: var(--coral-text); cursor: help; }
.eq-report-row, .eq-owner-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.7rem 0; border-top: 1px solid var(--stroke); }
.eq-owner-row select { padding: 0.45rem 0.6rem; border: 1px solid var(--stroke); border-radius: var(--radius-md); background: var(--card-2); color: var(--white); font: inherit; max-width: 100%; }

@media (max-width: 640px) {
  .eq-table-wrap { border: 0; }
  .eq-table { min-width: 0; }
  .eq-table thead { display: none; }
  .eq-table, .eq-table tbody, .eq-table tr, .eq-table td { display: block; width: 100%; }
  .eq-table tr { border: 1px solid var(--stroke); border-radius: var(--radius-md); margin-bottom: 0.6rem; padding: 0.5rem 0; background: var(--card); }
  .eq-table td { border: 0; padding: 0.2rem 0.9rem; }
  .eq-table td::before { content: attr(data-label); display: inline-block; min-width: 5rem; color: var(--grey); font-size: 0.75rem; }
  .eq-table tr[hidden] { display: none; }
}

/* Næsti frídagur (sidebar): next day off + the year's public holidays */
.dayoff-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; margin-bottom: 0.8rem; }
.dayoff-next strong { font-size: 1.05rem; }
.dayoff-tag { background: var(--coral); color: #060605; border-radius: var(--radius-pill); padding: 0.1rem 0.55rem; font-size: 0.75rem; font-weight: 700; }
.dayoff-list li { gap: 0.8rem; }
.dayoff-list em { font-style: normal; opacity: 0.6; font-size: 0.8em; }
.dayoff-list .is-past { opacity: 0.4; }
.dayoff-list .is-next .dayoff-name { color: var(--coral-text); font-weight: 700; }

/* ---- Staðan: status widget, board and office screen (assets/status.js) ---- */
:root {
  --st-free: #4cd68b;
  --st-busy: #fdc300;
  --st-swamped: #ff5a5f;
  --st-away: #8c8a82;
}
.st-widget { display: block; }
.st-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.st-compact .st-buttons { grid-template-columns: repeat(2, 1fr); }
.st-btn {
  font: inherit; font-weight: 700; font-size: 0.85rem; color: var(--white);
  background: var(--card-2); border: 1.5px solid var(--stroke); border-radius: var(--radius-md);
  padding: 0.55rem 0.4rem; cursor: pointer; white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.st-btn:hover { border-color: var(--grey); }
.st-btn:active { transform: scale(0.97); }
.st-btn.is-active { color: #060605; }
.st-btn-free.is-active { background: var(--st-free); border-color: var(--st-free); }
.st-btn-busy.is-active { background: var(--st-busy); border-color: var(--st-busy); }
.st-btn-swamped.is-active { background: var(--st-swamped); border-color: var(--st-swamped); }
.st-btn-away.is-active { background: var(--st-away); border-color: var(--st-away); }
.st-extra { display: flex; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap; }
.st-note-input { flex: 1 1 10rem; min-width: 0; font: inherit; font-size: 0.85rem; padding: 0.45rem 0.6rem; border-radius: var(--radius-md); border: 1px solid var(--stroke); background: var(--card-2); color: var(--white); }
.st-duration { font: inherit; font-size: 0.85rem; padding: 0.45rem 0.4rem; border-radius: var(--radius-md); border: 1px solid var(--stroke); background: var(--card-2); color: var(--white); }
.st-compact .st-extra { flex-direction: column; }
.st-compact .st-note-input { flex: none; }
.st-btn span { margin-right: 0.15rem; }
.st-count b { margin: 0 0.1rem; }
.st-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.35rem; min-height: 1.2rem; font-size: 0.78rem; }
.st-saved { color: var(--ok); }
.st-saved.is-bad { color: var(--danger); }
.st-clear { font-size: 0.78rem; }

.st-sidebar { background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius-lg); padding: 0.8rem 0.9rem; }
.st-sidebar-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.55rem; }
.st-sidebar-summary { font-size: 0.8rem; margin-top: 0.2rem; }

.st-mine { margin: 1rem 0; }
.st-counts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin: 0 0 1rem; font-size: 0.95rem; }
.st-count b { font-weight: 700; }

.st-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; }
.st-card {
  position: relative; display: flex; gap: 0.8rem; align-items: center;
  background: var(--card); border: 1px solid var(--stroke); border-left: 5px solid var(--st-away);
  border-radius: var(--radius-lg); padding: 0.8rem 0.9rem;
  transition: border-color 0.4s, background 0.4s;
}
.st-card.st-free { border-left-color: var(--st-free); }
.st-card.st-busy { border-left-color: var(--st-busy); }
.st-card.st-swamped { border-left-color: var(--st-swamped); }
.st-card.st-away { border-left-color: var(--st-away); }
.st-card.st-unknown { opacity: 0.55; border-left-color: var(--stroke); }
.st-card.st-hidden { opacity: 0.35; border-style: dashed; }
.st-avatar {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 0.95rem;
  background: var(--card-2); border: 2px solid var(--st-away); color: var(--white);
}
.st-free .st-avatar { border-color: var(--st-free); }
.st-busy .st-avatar { border-color: var(--st-busy); }
.st-swamped .st-avatar { border-color: var(--st-swamped); }
.st-unknown .st-avatar { border-color: var(--stroke); }
.st-main { min-width: 0; flex: 1; }
.st-name { font-weight: 700; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-line { margin-top: 0.1rem; }
.st-pill { font-size: 0.85rem; font-weight: 700; }
.st-note { font-size: 0.85rem; margin-top: 0.15rem; overflow-wrap: anywhere; }
.st-meta { font-size: 0.75rem; color: var(--grey); margin-top: 0.15rem; }
.st-meta:empty { display: none; }
.st-admin { position: absolute; top: 0.35rem; right: 0.4rem; display: flex; gap: 0.15rem; opacity: 0; transition: opacity 0.15s; }
.st-card:hover .st-admin, .st-card:focus-within .st-admin { opacity: 1; }
.st-dot, .st-hide { font: inherit; font-size: 0.8rem; background: var(--card-2); border: 1px solid var(--stroke); border-radius: 6px; padding: 0.1rem 0.3rem; cursor: pointer; color: var(--white); }
.st-hide { font-size: 0.7rem; color: var(--grey); }
@media (hover: none) { .st-admin { opacity: 1; position: static; margin-top: 0.4rem; } .st-card { flex-wrap: wrap; } }

.st-screen-card { margin-top: 1.5rem; }
.st-screen-url { width: 100%; font: inherit; font-size: 0.85rem; padding: 0.5rem 0.7rem; border-radius: var(--radius-md); border: 1px solid var(--stroke); background: var(--card-2); color: var(--white); margin-bottom: 0.7rem; }
.st-screen-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.7rem; }

@media (max-width: 640px) {
  .st-buttons { grid-template-columns: repeat(2, 1fr); }
  .st-card { flex-wrap: wrap; }
  .st-admin { position: static; opacity: 1; flex-basis: 100%; justify-content: flex-end; }
}

/* Office wall display (skjar.php) — always dark, big type, read from a distance */
.sk-body { background: #060605; color: #f6f4ee; margin: 0; min-height: 100vh; overflow: hidden; cursor: none; }
.sk { display: flex; flex-direction: column; min-height: 100vh; padding: 2.2vw 3vw 1.6vw; box-sizing: border-box; gap: 1.6vw; }
.sk-head { display: flex; justify-content: space-between; align-items: center; }
.sk-logo { height: 3.2vw; min-height: 36px; }
.sk-time { text-align: right; }
.sk-clock { font-size: 4.2vw; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sk-date { font-size: 1.5vw; color: #8c8a82; margin-top: 0.4vw; }
.sk-bday { background: #fdc300; color: #060605; font-weight: 700; font-size: 2vw; padding: 0.8vw 1.6vw; border-radius: 999px; text-align: center; }
.sk-counts { display: flex; gap: 3vw; font-size: 1.7vw; }
.sk-counts b { font-size: 2.4vw; }
.sk-board { flex: 1; align-content: start; grid-template-columns: repeat(auto-fill, minmax(21vw, 1fr)); gap: 1.2vw; }
.sk-board .st-card { padding: 1.3vw 1.5vw; gap: 1.3vw; border-left-width: 0.5vw; background: #121110; border-color: #2b2a26; }
.sk-board .st-avatar { width: 4.6vw; height: 4.6vw; font-size: 1.6vw; border-width: 0.25vw; background: #1a1916; color: #f6f4ee; }
.sk-board .st-name { font-size: 2.1vw; }
.sk-board .st-pill { font-size: 1.5vw; }
.sk-board .st-meta { font-size: 1.1vw; }
.sk-board .st-card.st-unknown { opacity: 0.4; }
.sk-foot { display: flex; flex-direction: column; gap: 1vw; }
.sk-foot .ticker { font-size: 1.4vw; padding: 0.9vw 1.6vw; }
.sk-foot .ticker .ticker-group { font-size: 1.5vw; }
.sk-foot-row { display: flex; justify-content: space-between; font-size: 1.4vw; color: #8c8a82; }
.sk-foot-row b { color: #f6f4ee; }
.sk-lost { color: #ff5a5f; }
.sk-denied-msg { max-width: 30rem; margin: 20vh auto; text-align: center; padding: 0 1rem; }
.sk-denied-msg h1 { margin-bottom: 0.5rem; }
@media (max-width: 800px) {
  .sk-body { overflow: auto; }
  .sk-clock { font-size: 2rem; } .sk-date { font-size: 0.9rem; }
  .sk-counts { font-size: 0.95rem; gap: 1rem; flex-wrap: wrap; } .sk-counts b { font-size: 1.1rem; }
  .sk-board { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .sk-board .st-card { padding: 0.7rem; gap: 0.6rem; }
  .sk-board .st-avatar { width: 2.2rem; height: 2.2rem; font-size: 0.8rem; }
  .sk-board .st-name { font-size: 1rem; } .sk-board .st-pill { font-size: 0.8rem; } .sk-board .st-meta { font-size: 0.7rem; }
  .sk-logo { height: 1.6rem; } .sk-bday { font-size: 1rem; }
  .sk-foot .ticker, .sk-foot .ticker .ticker-group { font-size: 0.85rem; } .sk-foot-row { font-size: 0.8rem; }
}

/* ---- Veggurinn: one black page. Paste anything and it drifts across the wall (assets/veggur.js) ---- */
.wall-archive { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; }
.wall-arch-item { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem; }
.wall-arch-item img { width: 100%; border-radius: 8px; display: block; }
.wall-arch-text { font-size: 1.05rem; overflow-wrap: anywhere; }
.wall-arch-item form { margin-top: auto; }
.wall-del { font: inherit; font-size: 0.8rem; background: none; border: 1px solid var(--stroke); border-radius: 6px; padding: 0.15rem 0.55rem; color: var(--grey); cursor: pointer; }
.wall-del:hover { color: var(--danger); border-color: var(--danger); }

.wall-body, html:has(.wall-body) { margin: 0; padding: 0; overflow: hidden; overscroll-behavior: none; }
html:has(.wall-body) { height: 100%; background: #000; }
.wall-body { background: #000; color: #f6f4ee; height: 100vh; width: 100vw; max-height: 100%; position: fixed; inset: 0; cursor: none; -webkit-user-select: none; user-select: none; }
@supports (height: 100dvh) { .wall-body { height: 100dvh; } }
.wall-body.show-ui { cursor: auto; }
.wall-stage { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
.wall-input { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; resize: none; background: transparent; color: transparent; caret-color: transparent; }
.wp { position: absolute; left: 0; top: 0; will-change: transform; transition: opacity 0.8s ease, filter 1.2s ease, scale 0.2s ease, box-shadow 0.2s ease; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.wp img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.wp.wp-drag { cursor: grabbing; scale: 1.04; filter: brightness(1.08); }
.wp.wp-drag.wp-old { filter: none; }
.wp.wp-old { filter: brightness(0.85); }
.wp.wp-out { opacity: 0 !important; }
.wp-fresh { animation: wp-in 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes wp-in {
  0% { opacity: 0; scale: 0.82; filter: brightness(1.8); }
  60% { opacity: 1; scale: 1.03; }
  100% { opacity: 1; scale: 1; filter: brightness(1); }
}
.wp-image img { display: block; max-width: 26vw; max-height: 38vh; border-radius: 0.8vw; box-shadow: 0 0.6vw 2vw rgba(0,0,0,0.7); }
.wp-text { max-width: 34vw; padding: 0.4vw 0.6vw; mix-blend-mode: difference; }
.wp-text-body { font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; overflow-wrap: anywhere; white-space: pre-wrap; }
.wp-link { width: 22vw; background: #121110; border: 1px solid #2b2a26; border-radius: 1vw; overflow: hidden; box-shadow: 0 0.6vw 2vw rgba(0,0,0,0.7); }
.wp-link-img { display: block; width: 100%; max-height: 16vh; object-fit: cover; }
.wp-link-body { padding: 1vw 1.3vw; }
.wp-link-title { font-weight: 700; font-size: 1.35vw; line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wp-link-host { margin-top: 0.4vw; font-size: 1vw; color: #8c8a82; }
/* your own posts (and everything, for admins) get a small ✕ on hover */

/* What's being typed: large bold white text in the middle of the wall. No box, no caret.
   Once you press Enter it becomes a post, and posted text blends with `difference`. */
.wall-drafts { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vw; padding: 4vw; box-sizing: border-box; z-index: 100000; pointer-events: none; }
.wd { max-width: 90vw; color: #fff; font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; text-align: center; overflow-wrap: anywhere; white-space: pre-wrap; }
.wd.wd-bad { font-size: 2vw; letter-spacing: 0; }

/* appears only while the mouse moves (so never on the projector) */
.wall-ui { position: fixed; top: 1.2rem; left: 1.4rem; z-index: 100002; display: flex; gap: 0.9rem; align-items: center; font-size: 0.9rem; color: #6d6a61; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.wall-ui a { color: #8c8a82; text-decoration: none; pointer-events: auto; font-size: 1.2rem; }
.show-ui .wall-ui { opacity: 1; }

@media (max-width: 800px) {
  .wp-image img { max-width: 60vw; } .wp-text { max-width: 80vw; } .wp-link { width: 55vw; }
  .wp-text-body { font-size: 5vw !important; }
  .wp-link-title { font-size: 3.4vw; } .wp-link-host { font-size: 2.6vw; }
}