/* ============================================================
   Veza.me — one shared stylesheet for every page.
   Design tokens + components consolidated from the five mockups.
   ============================================================ */

:root {
  --ground: #f6f0e8;
  --surface: #fbf7f1;
  --sunken: #efe6da;
  --ink: #2b2622;
  --muted: #6b5f56;
  --line: #dccfbf;
  --accent: #b5563a;
  --accent-strong: #9a4429;
  --on-accent: #fffaf4;
  --chocolate: #3f2417;
  --chocolate-strong: #57331f;
  --danger: #a53f3f;
  --danger-strong: #8a3131;
  --ok: #4d6b4a;
  --shadow: 0 6px 24px rgba(90, 50, 30, 0.14);
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #1f1a17;
    --surface: #29221e;
    --sunken: #1a1512;
    --ink: #f3ebe1;
    --muted: #b8aa9c;
    --line: #40362f;
    --accent: #d9825b;
    --accent-strong: #e59672;
    --on-accent: #1f1410;
    --chocolate: #140c09;
    --chocolate-strong: #241611;
    --danger: #d97a7a;
    --danger-strong: #e59a9a;
    --ok: #9dbf98;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
  --ground: #1f1a17;
  --surface: #29221e;
  --sunken: #1a1512;
  --ink: #f3ebe1;
  --muted: #b8aa9c;
  --line: #40362f;
  --accent: #d9825b;
  --accent-strong: #e59672;
  --on-accent: #1f1410;
  --chocolate: #140c09;
  --chocolate-strong: #241611;
  --danger: #d97a7a;
  --danger-strong: #e59a9a;
  --ok: #9dbf98;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; }
button, input, textarea { font-family: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; left: -9999px; }
/* Anything marked hidden stays hidden, even if a class gives it a display value. */
[hidden] { display: none !important; }

/* ---- Flash messages ---------------------------------------------- */
.flash {
  max-width: 680px; margin: 16px auto 0; padding: 12px 18px;
  border-radius: 12px; font-size: 0.92rem; font-weight: 700;
}
.flash-ok { background: var(--ok); color: var(--surface); }
.flash-error { background: var(--danger); color: var(--surface); }
.flash-wide { max-width: none; margin: 0; border-radius: 0; text-align: center; }

/* ---- Public nav (landing, sign in, create account, forgot) -------- */
.nav {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo { font: 900 1.6rem/1 var(--serif); text-decoration: none; letter-spacing: -0.01em; }
.logo span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 700; }
.nav-links a {
  text-decoration: none; background: var(--accent); color: var(--on-accent);
  padding: 8px 18px; border-radius: 999px;
}
.nav-links a:hover { background: var(--accent-strong); }
.nav-links a[aria-current="page"] { background: var(--chocolate); color: var(--accent); }
.nav-links a[aria-current="page"]:hover { background: var(--chocolate-strong); }

/* ---- App nav (home, settings, profile — everything behind sign-in) */
.app-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px;
}
.app-nav .logo { flex: none; font-size: 1.5rem; }
/* The logo side and the avatar side take equal shares of the spare room, so
   the tab strip sits on the page's centre line, the same line as the content
   below it. Without this the tabs centred between a wide logo and a narrow
   avatar and sat about 30px right of the content. Each side still keeps at
   least its own width; when room runs out, the tabs scroll instead. */
.nav-right { flex: 1 1 0; min-width: max-content; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.new-post {
  border: 0; cursor: pointer; background: var(--accent); color: var(--on-accent);
  font: 700 0.9rem var(--sans); padding: 9px 16px; border-radius: 999px; white-space: nowrap;
  text-decoration: none; display: inline-block;
}
.new-post:hover { background: var(--accent-strong); }
.avatar-btn {
  border: 1.5px solid var(--line); cursor: pointer; background: var(--sunken); color: var(--ink);
  width: 38px; height: 38px; border-radius: 50%; flex: none; overflow: hidden;
  font: 700 0.9rem var(--serif); display: grid; place-items: center; text-decoration: none;
}
.avatar-btn:hover { border-color: var(--accent); color: var(--accent); }
.avatar-btn { padding: 0; }
.avatar-btn[aria-expanded="true"] { border-color: var(--accent); }

/* ---- Avatar menu ------------------------------------------------------- */
.user-menu { position: relative; }
.user-menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
.user-menu-panel[hidden] { display: none; }
.user-menu-who { padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.user-menu-who strong { display: block; font-size: 0.92rem; color: var(--ink); }
.user-menu-who span { font-size: 0.8rem; color: var(--muted); }
.user-menu-panel a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: 0.9rem;
}
.user-menu-panel a svg { color: var(--accent); flex: none; }
.user-menu-panel a:hover, .user-menu-panel a:focus-visible { background: var(--sunken); color: var(--accent); outline: none; }
.user-menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }

.nav-tabs {
  /* Only as wide as the tabs; the equal sides around it do the centring.
     Packed from the left so a phone can scroll back to the first tab. */
  flex: 0 1 auto; min-width: 0;
  display: flex; justify-content: flex-start; gap: 8px;
  overflow-x: auto; padding: 4px 2px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  border: 1.5px solid var(--line); background: var(--ground); color: var(--muted);
  font: 700 0.86rem var(--sans); padding: 8px 16px;
  border-radius: 999px; cursor: pointer; text-decoration: none;
}
.tab:hover { color: var(--ink); border-color: var(--accent); }
.tab.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---- Shared buttons -------------------------------------------------- */
.btn-solid {
  border: 0; background: var(--accent); color: var(--on-accent);
  font: 700 0.9rem var(--sans); padding: 11px 24px; border-radius: 999px; cursor: pointer;
  text-decoration: none; display: inline-block;
}
.btn-solid:hover { background: var(--accent-strong); }
.btn-ghost {
  border: 0; background: transparent; color: var(--muted);
  font: 700 0.9rem var(--sans); padding: 11px 16px; cursor: pointer; border-radius: 999px;
  text-decoration: none; display: inline-block;
}
.btn-ghost:hover { color: var(--ink); }
.btn-small {
  border: 1.5px solid var(--accent); color: var(--accent);
  background: transparent; border-radius: 999px; padding: 7px 16px;
  font: 700 0.85rem var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn-small:hover { background: var(--accent); color: var(--on-accent); }
.btn-outline-sm {
  border: 1.5px solid var(--line); background: transparent; color: var(--muted);
  font: 700 0.78rem var(--sans); padding: 6px 12px; border-radius: 999px; cursor: pointer;
  text-decoration: none; display: inline-block;
}
.btn-outline-sm:hover { border-color: var(--ink); color: var(--ink); }
.btn-danger-sm {
  border: 0; background: var(--danger); color: var(--on-accent);
  font: 700 0.78rem var(--sans); padding: 6px 12px; border-radius: 999px; cursor: pointer;
  text-decoration: none; display: inline-block;
}
.btn-danger-sm:hover { background: var(--danger-strong); }
.msg-btn {
  border: 1.5px solid var(--accent); color: var(--accent); background: transparent;
  border-radius: 999px; padding: 6px 14px; font: 700 0.8rem var(--sans); cursor: pointer;
  text-decoration: none; display: inline-block;
}
.msg-btn:hover { background: var(--accent); color: var(--on-accent); }
.cta {
  display: inline-block; text-decoration: none;
  background: var(--accent); color: var(--on-accent);
  font: 700 0.95rem var(--sans);
  padding: 13px 30px; border-radius: 999px; box-shadow: var(--shadow);
}
.cta:hover { background: var(--accent-strong); }

/* ---- Forms / fields (shared by auth cards + settings) -------------- */
label, .field-label {
  display: block; font: 700 0.75rem var(--sans); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.field { margin-bottom: 16px; }
.field input, .field select {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--ground); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
}
.field input::placeholder { color: var(--muted); opacity: 0.75; }
.field input:focus, .field select:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field.error input { border-color: var(--danger); }
.field.ok input { border-color: var(--ok); }
.field .err { color: var(--danger); font-size: 0.82rem; margin-top: 6px; }
.field .help, p.help { color: var(--muted); font-size: 0.8rem; margin-top: 6px; }
.field-group { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 18px; }
.field-group-title {
  font: 700 0.75rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px;
}

input[type="date"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input[type="date"] { color-scheme: dark; }
}
:root[data-theme="dark"] input[type="date"] { color-scheme: dark; }

.submit, .save-btn, .choose-btn {
  border: 0; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  font: 700 1rem var(--sans); padding: 13px; border-radius: 999px;
}
.save-btn, .choose-btn { font-size: 0.9rem; padding: 10px 22px; }
.submit:hover, .save-btn:hover, .choose-btn:hover { background: var(--accent-strong); }
.submit:disabled { opacity: 0.6; cursor: default; }
.submit { width: 100%; }

.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0; color: var(--muted); font-size: 0.8rem;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---- Auth cards (sign in / create account / forgot / reset) -------- */
main { flex: 1; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 48px 20px; }
.card {
  width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow);
  padding: 34px 32px;
}
.card h1 { font: 900 1.8rem/1.2 var(--serif); margin: 0 0 6px; letter-spacing: -0.01em; }
.card .sub { margin: 0 0 24px; color: var(--muted); font-size: 0.95rem; }
.pw-row { display: flex; align-items: center; justify-content: space-between; }
.pw-row label { margin-bottom: 6px; }
.links-row { display: flex; justify-content: space-between; margin-top: 14px; font-size: 0.85rem; }
.links-row a { color: var(--accent); font-weight: 700; text-decoration: none; }
.links-row a:hover { text-decoration: underline; }
.create-row, .signin-row { text-align: center; font-size: 0.92rem; }
.create-row a, .signin-row a { color: var(--accent); font-weight: 700; text-decoration: none; }
.create-row a:hover, .signin-row a:hover { text-decoration: underline; }
.subview-links { text-align: center; margin-top: 16px; font-size: 0.85rem; }
.subview-links .sep { color: var(--muted); margin: 0 6px; }
.subview-links .primary-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.subview-links .primary-link:hover { text-decoration: underline; }
.subview-links .quiet-link { color: var(--muted); font-weight: 700; text-decoration: none; }
.subview-links .quiet-link:hover { color: var(--ink); text-decoration: underline; }
.sent-view { text-align: center; }
.sent-icon {
  width: 52px; height: 52px; border-radius: 50%; margin: 4px auto 16px;
  display: grid; place-items: center; background: var(--ok); color: var(--surface); font-size: 1.5rem;
}
.sent-view h1 { text-align: center; }
.terms { margin: 18px 0 0; font-size: 0.8rem; color: var(--muted); text-align: center; }
.terms b { color: var(--ink); }
.code-input {
  width: 100%; font: 700 1.6rem/1 var(--sans); letter-spacing: 0.4em; text-align: center;
  color: var(--ink); background: var(--ground); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 14px;
}

/* ---- Landing hero + search + promises -------------------------------- */
.hero { max-width: 640px; margin: 0 auto; text-align: center; padding: 72px 20px 0; }
.hero h1 {
  font: 900 clamp(2.6rem, 8vw, 4.2rem)/1.05 var(--serif);
  margin: 0 0 20px; letter-spacing: -0.02em; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--accent); display: block; }
.lede { color: var(--muted); font-size: 1.05rem; max-width: 30em; margin: 0 auto 32px; text-wrap: balance; }
.search {
  display: flex; max-width: 480px; margin: 0 auto;
  background: var(--surface); border: 1.5px solid var(--accent);
  border-radius: 999px; box-shadow: var(--shadow); overflow: hidden;
}
.search:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; padding: 14px 20px; }
.search input:focus { outline: none; }
.search input::placeholder { color: var(--muted); opacity: 0.85; }
.search button { border: 0; background: var(--accent); color: var(--on-accent); font: 700 0.95rem var(--sans); padding: 0 26px; cursor: pointer; }
.search button:hover { background: var(--accent-strong); }
.hint { font-size: 0.82rem; color: var(--muted); margin: 10px 0 0; }
#result { min-height: 0; max-width: 480px; margin: 18px auto 0; text-align: left; }
.found { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font: 700 1.1rem var(--serif); }
.found .who { flex: 1; min-width: 0; line-height: 1.3; }
.found .who strong { display: block; }
.found .who span { color: var(--muted); font-size: 0.88rem; }
.notfound { background: var(--surface); border: 1px dashed var(--line); border-radius: 16px; padding: 16px 18px; text-align: center; }
.notfound p { margin: 0 0 12px; color: var(--muted); }
.notfound p b { color: var(--ink); }
.cta-wrap { margin-top: 32px; }
.promises {
  max-width: 880px; margin: 88px auto 0; padding: 0 20px 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  border-top: 1px solid var(--line); padding-top: 40px; align-items: start;
}
.promise h2 { font: 700 1.2rem/1.2 var(--serif); margin: 0 0 8px; }
.promise p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.more { border: 0; background: transparent; padding: 0; margin-top: 8px; font: 700 0.85rem var(--sans); color: var(--accent); cursor: pointer; }
.more:hover { color: var(--accent-strong); text-decoration: underline; }
.more-text { margin-top: 10px; }
.more-text p { font-size: 0.92rem; }
.word { max-width: 880px; margin: 56px auto 0; padding: 0 20px 56px; text-align: center; color: var(--muted); font-size: 0.92rem; }
.word b { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); font-weight: 700; }
.word i { font-style: italic; }

/* ---- Dialogs (invite friend) ----------------------------------------- */
dialog {
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--surface); color: var(--ink);
  padding: 28px; width: min(420px, calc(100vw - 32px));
  box-shadow: 0 20px 60px rgba(40, 20, 10, 0.35);
}
dialog::backdrop { background: rgba(43, 30, 22, 0.55); }
dialog h3 { font: 700 1.5rem/1.2 var(--serif); margin: 0 0 6px; }
dialog .sub { margin: 0 0 20px; color: var(--muted); font-size: 0.93rem; }
dialog label { display: block; font: 700 0.8rem var(--sans); letter-spacing: 0.04em; margin-bottom: 6px; }
dialog input[type="email"], dialog input[type="text"], dialog textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--ground); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 14px; margin-bottom: 16px;
}
dialog textarea { resize: vertical; min-height: 84px; }
dialog input:focus, dialog textarea:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.row { display: flex; justify-content: flex-end; gap: 10px; }
.sent { text-align: center; padding: 8px 0 4px; }
.sent .check { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: var(--ok); color: var(--surface); font-size: 1.5rem; }

/* ---- Home page panels -------------------------------------------------- */
.panels { max-width: 760px; margin: 20px auto 56px; padding: 0 20px; }
/* body is a flex column, so without an explicit width the panel shrank to
   its content. Full width on phones; half the screen, centered, on tablets
   and computers (with a floor so portrait tablets aren't cramped). */
.panels { width: 100%; }
@media (min-width: 768px) {
  .panels { width: 50%; min-width: 640px; max-width: none; }
}
.panel-surface { background: var(--sunken); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.composer { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 18px; }
.composer-main { flex: 1; min-width: 0; }
.composer textarea { width: 100%; resize: none; min-height: 44px; border: 0; background: transparent; color: var(--ink); font: inherit; padding: 8px 0; }
.composer textarea:focus { outline: none; }
.composer-foot { display: flex; align-items: center; gap: 4px; }
.composer-photo-btn {
  cursor: pointer; color: var(--muted); width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
}
.composer-photo-btn:hover { color: var(--accent); background: var(--sunken); }
.composer-preview-wrap { position: relative; display: inline-block; margin: 4px 0 8px; }
.composer-preview-wrap img { max-height: 160px; max-width: 100%; border-radius: 10px; display: block; }
.composer-preview-wrap button {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
  font-size: 1rem; line-height: 1; display: grid; place-items: center;
}
.composer-preview-wrap button:hover { border-color: var(--accent); color: var(--accent); }
.composer-discard { border: 0; background: transparent; color: var(--muted); cursor: pointer; font: 700 0.85rem var(--sans); padding: 8px 14px; border-radius: 999px; }
.composer-discard:hover { color: var(--ink); background: var(--sunken); }
.post-btn { border: 0; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 700 0.85rem var(--sans); padding: 8px 18px; border-radius: 999px; }
.post-btn:hover { background: var(--accent-strong); }
.post-btn:disabled { opacity: 0.5; cursor: default; }
.post-image { margin: 0 0 12px; border-radius: 12px; overflow: hidden; }
.post-image img { width: 100%; max-height: 480px; object-fit: cover; display: block; }
.av { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font: 700 0.95rem var(--serif); overflow: hidden; }
.post { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.post:last-child { margin-bottom: 0; }
.post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.post-head .who { text-decoration: none; }
.post-head .who strong { display: block; font-size: 0.95rem; }
.post-head .who span { color: var(--muted); font-size: 0.82rem; }
.post p.body { margin: 0 0 12px; white-space: pre-wrap; }
.post-actions { display: flex; gap: 18px; }
.post-actions button, .post-actions a { border: 0; background: transparent; cursor: pointer; color: var(--muted); font: 700 0.85rem var(--sans); padding: 4px 0; display: flex; align-items: center; gap: 6px; text-decoration: none; }
.post-actions button:hover, .post-actions a:hover { color: var(--accent); }
.post-actions button.liked { color: var(--accent); }
.empty-note { color: var(--muted); font-size: 0.92rem; text-align: center; padding: 20px 0; }

.pic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pic { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; display: flex; align-items: flex-end; background-size: cover; background-position: center; }
.pic span { position: relative; z-index: 1; color: #fffaf4; font: 700 0.78rem var(--sans); padding: 8px 10px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.5), transparent 55%); }
.upload-row { margin-bottom: 14px; }
.upload-row input[type="file"] { color: var(--ink); }

/* File pickers ("Browse…" / "Choose File") — match the app's accent pill buttons */
input[type="file"] { color: var(--ink); font: 400 0.9rem var(--sans); }
input[type="file"]::file-selector-button {
  border: 0; cursor: pointer; background: var(--accent); color: var(--on-accent);
  font: 700 0.85rem var(--sans); padding: 8px 18px; border-radius: 999px;
  margin-right: 12px; transition: background 0.15s;
}
input[type="file"]::file-selector-button:hover { background: var(--accent-strong); }
.find-row input[type="file"] { padding: 5px 6px; }

.list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.list-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.list-card h3 { font: 700 1.05rem/1.3 var(--serif); margin: 0; overflow-wrap: anywhere; }
.list-card .count { color: var(--muted); font-size: 0.85rem; }
/* Your own lists: the whole card opens the list, like a note. */
a.list-card { color: var(--ink); text-decoration: none; transition: border-color 0.15s; }
a.list-card:hover { border-color: var(--accent); }
a.list-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.new-list-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.new-list-row input { flex: 1; min-width: 150px; height: 38px; font: inherit; color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; }
.new-list-row input:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.new-list-row button { height: 38px; border: 0; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 700 0.85rem var(--sans); padding: 0 18px; border-radius: 999px; white-space: nowrap; }
.new-list-row button:hover { background: var(--accent-strong); }
.new-list-row .btn-outline-sm { height: 38px; padding: 0 16px; font-size: 0.85rem; display: inline-flex; align-items: center; color: var(--ink); white-space: nowrap; }
@media (max-width: 560px) {
  .new-list-row input { flex-basis: 100%; }
  .new-list-row button, .new-list-row .btn-outline-sm { padding: 0 13px; }
}
.list-item-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.list-item-row:first-of-type { border-top: none; }
.list-item-row .info { flex: 1; min-width: 0; }
.list-item-row .info a { color: var(--accent); text-decoration: none; font-weight: 700; }
.list-item-row .info a:hover { text-decoration: underline; }
.list-item-row .info p { margin: 2px 0 0; color: var(--muted); font-size: 0.85rem; }
.back-link { display: inline-block; margin-bottom: 14px; color: var(--accent); font-weight: 700; text-decoration: none; font-size: 0.88rem; }
.back-link:hover { text-decoration: underline; }

/* ---- Card grids: items in a list, Edit Lists, Edit Categories ---------
   Two columns like the Lists page (one on phones). position: relative is
   needed by cards.js for dragging. */
.card-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; position: relative; }
@media (max-width: 560px) { .card-grid, .list-grid { grid-template-columns: minmax(0, 1fr); } }
.list-title { font: 700 1.2rem/1.3 var(--serif); margin: 0 0 12px; overflow-wrap: anywhere; }
.li-card {
  position: relative; display: flex; align-items: flex-start; gap: 4px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px 14px 6px; transition: border-color 0.15s;
}
.li-body { flex: 1; min-width: 0; }
.li-card.li-card-plain { padding-left: 16px; }
.li-title { display: block; font: 700 1.05rem/1.3 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
a.li-title { color: var(--accent); text-decoration: none; }
a.li-title:hover { text-decoration: underline; }
.li-note { margin: 6px 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.li-grip {
  flex: none; width: 28px; height: 28px; margin-top: -2px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted);
  cursor: grab; touch-action: none; opacity: 0.6;
}
.li-grip svg { fill: currentColor; }
.li-card:hover .li-grip, .li-grip:focus-visible { opacity: 1; }
.li-grip:hover { color: var(--ink); background: var(--sunken); }
.li-grip:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
@media (hover: none) { .li-grip { opacity: 0.85; } }
.li-card.dragging { z-index: 2; border-color: var(--accent); box-shadow: var(--shadow); }
body.li-dragging, body.li-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.li-status { color: var(--danger); font-size: 0.85rem; margin: 8px 0 0; }

/* Edit List */
.list-rename {
  display: block; width: 100%; margin: 0 0 12px; font: 700 1.2rem/1.3 var(--serif); color: var(--ink);
  background: var(--ground); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px;
}
.card-grid.editing .li-card { padding: 10px 6px 10px 10px; }
.card-grid.editing .li-grip { margin-top: 4px; }
.li-count { color: var(--muted); font-size: 0.8rem; padding-left: 2px; }
.li-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.li-fields input, .li-fields textarea {
  display: block; width: 100%; font: inherit; font-size: 0.85rem; color: var(--ink);
  background: var(--ground); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
}
.li-fields .li-in-title { font-size: 1rem; font-weight: 700; }
.li-fields textarea { resize: none; overflow: hidden; line-height: 1.5; }
.li-fields input::placeholder, .li-fields textarea::placeholder { color: var(--muted); opacity: 0.75; }
.list-rename:focus, .li-fields input:focus, .li-fields textarea:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.li-check {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: -3px 0 0; border-radius: 8px; cursor: pointer;
}
.li-check:hover { background: var(--sunken); }
.li-check input { width: 20px; height: 20px; margin: 0; cursor: pointer; accent-color: var(--accent); }
.li-card.picked { border-color: var(--accent); }
.li-card.picked .li-fields { opacity: 0.55; }

/* The button row under a list: main action on the left, quieter ones on the right */
.list-add { margin-top: 18px; }
.list-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.list-add .list-actions { margin-top: 0; }
.list-actions-right { display: flex; gap: 8px; margin-left: auto; }
.list-actions .btn-outline-sm { height: 36px; padding: 0 16px; font-size: 0.85rem; display: inline-flex; align-items: center; }
.list-actions .list-edit-btn { color: var(--ink); }
.list-actions .list-remove-btn { order: -1; }
.list-actions .btn-outline-sm:disabled, .list-actions .btn-outline-sm:disabled:hover { opacity: 0.45; cursor: default; border-color: var(--line); color: var(--muted); }

.conn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.conn-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; align-items: center; gap: 12px; }
.conn-card .who { flex: 1; min-width: 0; line-height: 1.3; text-decoration: none; }
.conn-card .who strong { display: block; font-size: 0.92rem; }
.conn-card .who span { color: var(--muted); font-size: 0.8rem; }
.find-row { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.find-row input { flex: 1; min-width: 160px; font: inherit; color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; }
.find-row button { border: 0; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 700 0.85rem var(--sans); padding: 9px 18px; border-radius: 999px; white-space: nowrap; }
.find-row button:hover { background: var(--accent-strong); }
.section-label { font: 700 0.75rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.request-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.request-row:first-of-type { border-top: none; }
.request-row .who { flex: 1; min-width: 0; }
.request-row .who strong { display: block; font-size: 0.92rem; }
.request-row .who span { color: var(--muted); font-size: 0.8rem; }
.request-actions { display: flex; gap: 8px; flex: none; }

/* ---- Settings page ----------------------------------------------------- */
.settings-main { max-width: 680px; margin: 0 auto; padding: 32px 20px 64px; }
.page-head { margin-bottom: 22px; }
.page-head h1 { font: 900 1.9rem/1.2 var(--serif); margin: 0 0 4px; letter-spacing: -0.01em; }
.page-head p { margin: 0; color: var(--muted); font-size: 0.95rem; }

.psec-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.psec-row:first-child { border-top: none; }
.psec-row .name { flex: 1; font-weight: 700; font-size: 0.92rem; display: flex; align-items: center; gap: 8px; }
.psec-row .tag { font: 700 0.65rem var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.psec-remove { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 4px; flex: none; }
.psec-remove:hover { color: var(--danger); }
.add-section-row { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.add-section-row input { flex: 1; min-width: 160px; font: inherit; color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; }
.add-section-row input:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.add-section-row button { border: 0; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 700 0.85rem var(--sans); padding: 9px 18px; border-radius: 999px; white-space: nowrap; }
.add-section-row button:hover { background: var(--accent-strong); }
.section-note { margin: 14px 0 0; color: var(--muted); font-size: 0.82rem; font-style: italic; }

.settings-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 16px; overflow: hidden; }
.settings-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px; }
.settings-head h2 { font: 700 1.15rem/1.2 var(--serif); margin: 0; }
.more-toggle { flex: none; border: 0; background: transparent; cursor: pointer; font: 700 0.85rem var(--sans); color: var(--accent); padding: 2px 0; }
.more-toggle:hover { color: var(--accent-strong); text-decoration: underline; }
.settings-summary { margin: -8px 20px 16px; color: var(--muted); font-size: 0.88rem; }
.settings-body { padding: 18px 20px 20px; border-top: 1px solid var(--line); }

.switch { position: relative; display: inline-flex; align-items: center; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 42px; height: 24px; }
.switch .track { width: 42px; height: 24px; background: var(--line); border-radius: 999px; position: relative; transition: background 0.15s; }
.switch .thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--surface); border-radius: 50%; transition: left 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track .thumb { left: 21px; }
.switch input:focus-visible + .track { outline: 3px solid var(--accent); outline-offset: 2px; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.toggle-row:first-child { border-top: none; padding-top: 2px; }
.toggle-row .label strong { display: block; font-size: 0.95rem; }
.toggle-row .label span { display: block; color: var(--muted); font-size: 0.83rem; margin-top: 2px; }

.avatar-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.avatar-big { width: 60px; height: 60px; border-radius: 50%; flex: none; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font: 700 1.4rem var(--serif); overflow: hidden; }
.avatar-row p { margin: 0 0 10px; color: var(--muted); font-size: 0.85rem; }

.conn-label { font: 700 0.75rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.conn-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.conn-row:first-of-type { border-top: none; }
.conn-av { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font: 700 0.85rem var(--serif); overflow: hidden; }
.conn-row .who { flex: 1; min-width: 0; }
.conn-row .who strong { display: block; font-size: 0.92rem; }
.conn-row .who span { color: var(--muted); font-size: 0.8rem; }
.conn-actions { display: flex; gap: 8px; flex: none; }

/* ---- Storage bar (Gallery tab upload box only — not shown elsewhere) --- */
.storage-bar-wrap { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 12px; }
.storage-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.storage-bar-fill.near-limit { background: var(--danger); }
.storage-bar-label { margin: 6px 0 0; color: var(--muted); font-size: 0.8rem; }

/* ---- Notes tab ------------------------------------------------------- */
.note-body {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--ground); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; resize: vertical;
}
.note-body:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* The plain, read-only version of a note shown only when printing (see
   the print rules below) — a textarea only prints what's visible inside
   it, so we render the full text separately rather than risk clipping it. */
.print-only { display: none; }
.note-print h2 { font: 700 1.4rem/1.3 var(--serif); margin: 0 0 6px; }
.note-print-meta { color: var(--muted); margin: 0 0 14px; }
.note-print-body { white-space: pre-wrap; }

/* ---- Calendar tab ------------------------------------------------------ */
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.cal-header h3 { font: 700 1.1rem var(--serif); margin: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-weekday { text-align: center; font: 700 0.7rem var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 4px; }
.cal-day {
  min-height: 74px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 3px;
}
.cal-day-empty { background: transparent; border-color: transparent; }
.cal-day-num { font: 700 0.78rem var(--sans); color: var(--muted); }
.cal-entry {
  display: block; font-size: 0.72rem; line-height: 1.3;
  background: var(--sunken); border-radius: 6px; padding: 2px 5px;
  text-decoration: none; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-entry:hover { background: var(--accent); color: var(--on-accent); }
.cal-entry-time { color: var(--muted); font-weight: 700; margin-right: 3px; }
.cal-entry:hover .cal-entry-time { color: inherit; }

/* ---- Comments (Posts tab, Group wall) ------------------------------------ */
.comment-list { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.comment-row { display: flex; gap: 8px; align-items: flex-start; }
.comment-body { flex: 1; background: var(--ground); border-radius: 12px; padding: 8px 12px; }
.comment-body .who { text-decoration: none; }
.comment-body strong { font-size: 0.85rem; }
.comment-body p { margin: 2px 0 0; font-size: 0.9rem; }
.comment-meta { display: block; margin-top: 4px; color: var(--muted); font-size: 0.75rem; }
.comment-delete { border: 0; background: transparent; cursor: pointer; color: var(--muted); font: 700 0.75rem var(--sans); padding: 0; text-decoration: underline; }
.comment-delete:hover { color: var(--accent); }
.comment-form { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.comment-form input[type="text"] { flex: 1; font: inherit; color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; }
.comment-form button { border: 0; cursor: pointer; background: transparent; color: var(--accent); font: 700 0.85rem var(--sans); padding: 6px 4px; }
.comment-form button:hover { text-decoration: underline; }

/* ---- Nav "unread" badges (Messages tab) --------------------------------- */
.tab-badge, .msg-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px; margin-left: 6px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font: 700 0.68rem var(--sans); line-height: 1;
}
.tab.active .tab-badge { background: var(--on-accent); color: var(--accent); }

/* ---- Messages tab --------------------------------------------------------- */
.msg-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
.msg-sidebar { border-right: 1px solid var(--line); padding-right: 16px; }
.msg-conv-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px;
  text-decoration: none; color: var(--ink); margin-bottom: 2px;
}
.msg-conv-row:hover { background: var(--ground); }
.msg-conv-row.active { background: var(--accent); color: var(--on-accent); }
.msg-conv-row.active .msg-conv-info span { color: var(--on-accent); opacity: 0.85; }
.msg-conv-row.unread .msg-conv-info strong { font-weight: 900; }
.msg-conv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msg-conv-info strong { font-size: 0.88rem; }
.msg-conv-info span { font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-start { margin-top: 14px; }
.msg-start summary { cursor: pointer; font: 700 0.82rem var(--sans); color: var(--accent); padding: 6px 0; }
.msg-start-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; margin: 0; }
.msg-start-row span { flex: 1; font-size: 0.85rem; }
.msg-start-row button { border: 0; cursor: pointer; background: transparent; color: var(--accent); font: 700 0.78rem var(--sans); }
.msg-start-row button:hover { text-decoration: underline; }
.msg-main { min-height: 320px; display: flex; flex-direction: column; }
.msg-thread-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.msg-thread-head .who { text-decoration: none; color: var(--ink); }
.msg-thread { flex: 1; display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; padding: 4px 2px; }
.msg-bubble { max-width: 72%; padding: 8px 13px; border-radius: 16px; }
.msg-bubble p { margin: 0; font-size: 0.92rem; }
.msg-bubble .msg-time { display: block; margin-top: 3px; font-size: 0.68rem; opacity: 0.7; }
.msg-bubble.theirs { align-self: flex-start; background: var(--ground); color: var(--ink); border-bottom-left-radius: 4px; }
.msg-bubble.mine { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; }
.msg-compose { display: flex; gap: 8px; margin-top: 12px; }
.msg-compose input[type="text"] { flex: 1; font: inherit; color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; }
.msg-compose button { border: 0; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 700 0.85rem var(--sans); padding: 10px 20px; border-radius: 999px; }
.msg-compose button:hover { background: var(--accent-strong); }

/* ---- Groups tab ------------------------------------------------------------ */
.groups-layout { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: start; }
.groups-sidebar { border-right: 1px solid var(--line); padding-right: 16px; }
.group-switch-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 10px;
  text-decoration: none; color: var(--ink); margin-bottom: 2px;
}
.group-switch-row:hover { background: var(--ground); }
.group-switch-row.active { background: var(--accent); color: var(--on-accent); }
.group-switch-row span { font-size: 0.88rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-invite-row { padding: 8px 0; border-top: 1px solid var(--line); }
.group-invite-row:first-of-type { border-top: none; }
.group-invite-row p { margin: 0 0 6px; font-size: 0.85rem; }
.group-invite-row span { color: var(--muted); font-weight: 400; }
.group-main-title { font: 900 1.4rem var(--serif); margin: 0 0 4px; }
.group-header { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.group-meta { color: var(--muted); font-size: 0.85rem; margin: 2px 0 6px; }
.group-search-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.group-search-row:first-of-type { border-top: none; }
.group-search-row .who { flex: 1; min-width: 0; }
.group-search-row .who strong { display: block; font-size: 0.92rem; }
.group-search-row .who span { color: var(--muted); font-size: 0.8rem; }
.group-admin-strip { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.group-manage {
  background: var(--ground); border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px 14px;
}
.group-manage summary { cursor: pointer; font: 700 0.88rem var(--sans); padding: 12px 0; }
.group-settings-form .field { margin-bottom: 12px; }
.group-settings-form textarea { width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; resize: vertical; }
.group-settings-form input[type="text"], .group-settings-form input[type="email"], .group-settings-form select {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px;
}

/* ---- Footer ------------------------------------------------------------ */
footer.site-footer {
  background: var(--surface); border-top: 1px solid var(--line);
  text-align: center; font-size: 0.78rem; color: var(--muted); padding: 14px 16px;
}
footer.site-footer a { color: var(--accent); font-weight: 700; text-decoration: none; }
footer.site-footer a:hover { text-decoration: underline; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 720px) {
  .promises { grid-template-columns: 1fr; gap: 28px; margin-top: 64px; }
}
@media (max-width: 560px) {
  .app-nav { padding: 10px 14px; gap: 10px; }
  .app-nav .logo { font-size: 1.25rem; }
  .new-post { padding: 8px 13px; font-size: 0.85rem; }
  .panels { padding-left: 14px; padding-right: 14px; }
  .pic-grid { grid-template-columns: repeat(2, 1fr); }
  .list-grid, .conn-grid { grid-template-columns: 1fr; }
  .cal-day { min-height: 46px; padding: 4px; }
  .cal-entry { font-size: 0.62rem; padding: 1px 3px; }
  .cal-weekday { font-size: 0.6rem; }
  .msg-layout, .groups-layout { grid-template-columns: 1fr; }
  .msg-sidebar, .groups-sidebar { border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 14px; margin-bottom: 14px; }
  .msg-bubble { max-width: 88%; }
}
@media (max-width: 480px) {
  .nav { padding: 12px 16px; }
  .nav-links { gap: 12px; }
  .nav-links .about { display: none; }
  .card { padding: 28px 20px; }
  .settings-main { padding: 24px 14px 56px; }
  .settings-head, .settings-body { padding-left: 16px; padding-right: 16px; }
  .settings-summary { margin-left: 16px; margin-right: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .submit, .nav-links a, .cta, .btn-small, .btn-solid { transition: background 0.15s, color 0.15s; }
}

/* ---- Printing (Notes tab's Print button) ------------------------------- */
@media print {
  .app-nav, .no-print, footer.site-footer { display: none !important; }
  .print-only { display: block !important; }
  body { background: #fff; color: #000; }
  .panels, .settings-main { max-width: none; margin: 0; padding: 0; }
}

/* ======================================================================
   Gallery toolbar, uploads, video links, Settings → Gallery & Manage Data
   ====================================================================== */

/* ---- One button size inside a section --------------------------------
   Primary buttons inside panels and settings cards all share one height,
   so no button looks bigger than its neighbours. */
.tb-btn, .save-btn, .choose-btn, .find-row button, .add-section-row button, .new-post {
  height: 36px; padding: 0 18px; font: 700 0.85rem var(--sans);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 999px; white-space: nowrap; line-height: 1;
}
.tb-btn { border: 0; cursor: pointer; background: var(--accent); color: var(--on-accent); }
.tb-btn:hover { background: var(--accent-strong); }
.tb-btn:disabled { opacity: 0.5; cursor: default; }
.tb-btn.open { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.tb-btn.open:hover { background: var(--sunken); }

/* ---- Gallery toolbar: Photo / Video link on the left, Upload on the right */
.gal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.add-tabs { display: inline-flex; align-items: center; height: 36px; background: var(--ground); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.add-tabs button { height: 28px; border: 0; background: transparent; color: var(--muted); font: 700 0.82rem var(--sans); padding: 0 14px; border-radius: 999px; cursor: pointer; }
.add-tabs button:hover { color: var(--ink); }
.add-tabs button.on { background: var(--accent); color: var(--on-accent); }

.upload-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 16px; }
.upload-panel .find-row { margin-bottom: 12px; align-items: center; }
.upload-panel .find-row input { height: 36px; padding-top: 0; padding-bottom: 0; }
.upload-panel .find-row input[type="file"] { padding: 3px 4px; min-width: 250px; }
.upload-panel input[type="file"]::file-selector-button { height: 28px; padding: 0 14px; }
.upload-panel .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.upload-panel .foot .storage { flex: 1; min-width: 0; }
.upload-panel .foot .storage-bar-wrap { margin-top: 0; }
.upload-panel .foot .storage-bar-label { margin: 6px 0 0; }

.resize-note { display: flex; align-items: center; gap: 10px; background: var(--ground); border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; font-size: 0.83rem; color: var(--muted); margin-bottom: 12px; }
.resize-note[hidden] { display: none; }
.resize-note .thumb-sm { width: 44px; height: 44px; border-radius: 8px; flex: none; object-fit: cover; background: var(--sunken); }
.resize-note .thumb-sm[hidden] { display: none; }
.resize-note b { color: var(--ink); }
.resize-note .save { color: var(--ok); font-weight: 700; margin-left: auto; white-space: nowrap; }

.size-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 2px 0 12px; }
.size-pick .lbl { font: 700 0.75rem var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg label { margin: 0; cursor: pointer; border-left: 1px solid var(--line); text-transform: none; letter-spacing: 0; }
.seg label:first-child { border-left: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label > span { display: block; padding: 7px 14px; font: 700 0.8rem var(--sans); color: var(--ink); background: var(--ground); }
.seg label > span small { font-weight: 400; color: var(--muted); margin-left: 5px; }
.seg input:checked + span { background: var(--accent); color: var(--on-accent); }
.seg input:checked + span small { color: var(--on-accent); opacity: 0.8; }
.seg input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: -3px; }
.mini-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; font: 400 0.82rem var(--sans); color: var(--muted); text-transform: none; letter-spacing: 0; }
.mini-toggle .switch .track { width: 34px; height: 20px; }
.mini-toggle .switch .thumb { width: 14px; height: 14px; }
.mini-toggle .switch input { width: 34px; height: 20px; }
.mini-toggle .switch input:checked + .track .thumb { left: 17px; }

/* ---- Gallery tiles: size badge, video links ----------------------------- */
.pic i { font-style: normal; }
.pic .res-chip { position: absolute; z-index: 2; top: 8px; right: 8px; background: rgba(0,0,0,.45); color: #fff; font: 700 0.6rem var(--sans); padding: 2px 6px; border-radius: 6px; }
.pic.video { border: 0; padding: 0; width: 100%; font: inherit; text-align: left; cursor: pointer; text-decoration: none; color: inherit; background-color: #2d3a40; }
.pic.video.no-thumb { background-image: linear-gradient(160deg, #2d4a5a, #6d8b74 55%, #d6a26b); }
.pic.video:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pic .src-chip { position: absolute; z-index: 2; top: 8px; left: 8px; background: rgba(0,0,0,.6); color: #fff; font: 700 0.65rem var(--sans); padding: 3px 8px; border-radius: 999px; letter-spacing: .03em; text-transform: uppercase; }
.pic .dur-chip { position: absolute; z-index: 2; top: 8px; right: 8px; background: rgba(0,0,0,.6); color: #fff; font: 700 0.65rem var(--sans); padding: 3px 7px; border-radius: 6px; }
.pic .play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.85); display: grid; place-items: center; transition: transform .15s; }
.pic .play::after { content: ""; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.pic.video:hover .play { transform: translate(-50%,-50%) scale(1.08); }

/* "Protect my photos" */
[data-protect], [data-protect] img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }

/* ---- Dialogs (confirm, shrink, video) ----------------------------------- */
.vz-dialog { border: 0; padding: 0; background: transparent; color: var(--ink); width: calc(100% - 32px); max-width: 500px; }
.vz-dialog::backdrop { background: rgba(10, 7, 5, 0.7); }
.confirm-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); }
.confirm-card h3 { font: 700 1.15rem/1.3 var(--serif); margin: 0 0 8px; }
.confirm-card p { color: var(--muted); font-size: 0.9rem; margin: 0 0 14px; line-height: 1.5; }
.confirm-card p b { color: var(--ink); }
.confirm-card .confirm-label { color: var(--ink); font: 400 0.85rem var(--sans); text-transform: none; letter-spacing: 0; margin: 0 0 8px; }
.confirm-card input[type="text"] { width: 100%; height: 38px; font: inherit; color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; margin-bottom: 16px; }
.confirm-card input[type="text"]:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.btn-ghost-sm { height: 36px; border: 1.5px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; font: 700 0.85rem var(--sans); padding: 0 16px; border-radius: 999px; }
.btn-ghost-sm:hover { border-color: var(--ink); }
.btn-danger-solid, .btn-solid-acc { height: 36px; border: 0; font: 700 0.85rem var(--sans); padding: 0 18px; border-radius: 999px; cursor: pointer; color: var(--on-accent); }
.btn-danger-solid { background: var(--danger); }
.btn-danger-solid:hover { background: var(--danger-strong); }
.btn-solid-acc { background: var(--accent); }
.btn-solid-acc:hover { background: var(--accent-strong); }
.btn-danger-solid:disabled, .btn-solid-acc:disabled { opacity: 0.4; cursor: default; }
.warn { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--danger); background: rgba(217,122,122,.08); color: var(--ink); border-radius: 12px; padding: 10px 12px; font-size: .83rem; margin-bottom: 14px; line-height: 1.5; }
.warn b { color: var(--danger); }

.video-dialog { max-width: 900px; }
.video-frame { aspect-ratio: 16 / 9; background: #000; border-radius: 14px 14px 0 0; overflow: hidden; }
.video-frame.tall { aspect-ratio: 9 / 16; max-height: 75vh; margin: 0 auto; }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-dialog-foot { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; padding: 10px 14px; font-size: .88rem; }
.video-dialog-foot strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-dialog-foot a { color: var(--accent); font-weight: 700; text-decoration: none; font-size: .82rem; white-space: nowrap; }
.video-dialog-foot a:hover { text-decoration: underline; }

/* ---- Settings: option cards (Gallery default size, Shrink choice) ------- */
.sub-h { font: 700 .75rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 4px 0 8px; }
.opt-list { display: grid; gap: 8px; margin: 6px 0 14px; }
.opt { display: flex; align-items: center; gap: 12px; margin: 0; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--ground); cursor: pointer; text-transform: none; letter-spacing: 0; font: 400 1rem var(--sans); color: var(--ink); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt .radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; position: relative; }
.opt input:checked + .radio { border-color: var(--accent); }
.opt input:checked + .radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.opt input:focus-visible + .radio { outline: 3px solid var(--accent); outline-offset: 2px; }
.opt:has(input:checked) { border-color: var(--accent); }
.opt .t { flex: 1; min-width: 0; }
.opt .t strong { display: block; font-size: .92rem; }
.opt .t span { display: block; color: var(--muted); font-size: .8rem; }
.opt .est { font: 700 .8rem var(--sans); color: var(--muted); white-space: nowrap; }
.opt.disabled { opacity: .45; cursor: default; }

/* ---- Settings: Manage Data --------------------------------------------- */
.data-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.9rem; }
.data-total strong { font-size: 1.05rem; }
.data-total span { color: var(--muted); font-size: 0.83rem; }
.data-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--line); margin: 10px 0 8px; }
.data-bar i { display: block; height: 100%; }
.data-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8rem; color: var(--muted); margin-bottom: 6px; }
.data-legend b { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.c-gallery { background: var(--accent); }
.c-posts { background: #b0654a; }
.c-groups { background: var(--ok); }
.c-notes { background: var(--muted); }
.c-avatar { background: #e8b89f; }
.data-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.data-row .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.data-row .info { flex: 1; min-width: 0; }
.data-row .info strong { display: block; font-size: 0.95rem; }
.data-row .info span { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 1px; }
.data-row .size { font: 700 0.85rem var(--sans); color: var(--ink); white-space: nowrap; text-align: right; }
.data-row .size small { display: block; font-weight: 400; color: var(--muted); font-size: 0.75rem; }
.data-btns { display: flex; gap: 8px; flex: none; }
.btn-del, .btn-shrink { flex: none; height: 30px; background: transparent; cursor: pointer; font: 700 0.78rem var(--sans); padding: 0 14px; border-radius: 999px; white-space: nowrap; }
.btn-del { border: 1.5px solid var(--danger); color: var(--danger); }
.btn-del:hover { background: var(--danger); color: var(--on-accent); }
.btn-shrink { border: 1.5px solid var(--accent); color: var(--accent); }
.btn-shrink:hover { background: var(--accent); color: var(--on-accent); }
.btn-del:disabled, .btn-shrink:disabled { opacity: 0.35; cursor: default; background: transparent; color: var(--muted); border-color: var(--line); }
.data-sub { margin: 0 0 4px 22px; border-left: 2px solid var(--line); padding-left: 14px; }
.data-sub .data-row { padding: 9px 0; }
.data-sub .data-row:first-child { border-top: none; }
.data-sub .info strong { font-size: 0.88rem; }
.data-note { color: var(--muted); font-size: 0.8rem; font-style: italic; margin: 12px 0 0; line-height: 1.5; }

@media (max-width: 560px) {
  .gal-toolbar { flex-wrap: wrap; }
  .upload-panel .foot { flex-direction: column; align-items: stretch; }
  .upload-panel .find-row input[type="file"] { min-width: 0; width: 100%; }
  .data-row { flex-wrap: wrap; }
  .data-row .info { flex-basis: calc(100% - 22px); }
  .data-row .size { margin-left: 22px; text-align: left; flex: 1; }
  .data-sub .data-row .size { margin-left: 0; }
}

/* ---- Gallery list: small thumbnail + its own info box ------------------ */
.gal-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 12px; align-items: start; }
.gal-list-narrow { grid-template-columns: 1fr; }
/* One card per item: the picture (or video) on the left, its details on the
   right, sharing one background and border. */
.gal-item { display: flex; align-items: stretch; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gal-item[hidden] { display: none !important; }
.gal-thumb.pic { flex: none; align-self: stretch; width: 192px; height: auto; min-height: 108px; aspect-ratio: auto; border-radius: 0; background-color: var(--sunken); cursor: zoom-in; border: 0; padding: 0; }
.gal-thumb.pic.video { cursor: pointer; }
.gal-thumb.pic::after { display: none; }
.gal-thumb.pic:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.gal-thumb .play { width: 38px; height: 38px; }
.gal-thumb .play::after { border-left-width: 12px; border-top-width: 7px; border-bottom-width: 7px; margin-left: 3px; }
.gal-thumb .src-chip, .gal-thumb .dur-chip, .gal-thumb .res-chip { top: 6px; }
.gal-thumb .src-chip { left: 6px; font-size: 0.6rem; padding: 2px 7px; }
.gal-thumb .dur-chip { top: auto; bottom: 6px; right: 6px; }
.gal-info { flex: 1; min-width: 0; min-height: 108px; padding: 9px 14px 8px; display: flex; flex-direction: column; }
.gal-title { margin: 0; font: 700 0.9rem/1.3 var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-meta { margin: 2px 0 4px; color: var(--muted); font-size: 0.74rem; }
.gal-desc { margin: 0; color: var(--ink); font-size: 0.8rem; line-height: 1.4; max-height: 2.8em; overflow: hidden; }
.gal-item.open .gal-desc { max-height: none; }
.gal-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 2px; }
.gal-more { border: 0; background: transparent; color: var(--accent); cursor: pointer; font: 700 0.74rem var(--sans); padding: 2px 0 0; }
.gal-more:hover { text-decoration: underline; }
.gal-del { margin-left: auto; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: 700 0.72rem var(--sans); padding: 2px 0 0; }
.gal-del:hover { color: var(--danger); }
.gal-desc-input { width: 100%; font: inherit; font-size: 0.9rem; color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 14px; padding: 8px 14px; margin: 0 0 12px; resize: vertical; min-height: 44px; }
.gal-desc-input:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.add-tabs-sm { margin-bottom: 12px; }

/* ---- Photo viewer --------------------------------------------------------- */
.photo-dialog { max-width: min(1100px, calc(100% - 32px)); width: auto; }
.photo-frame { background: #000; border-radius: 14px 14px 0 0; overflow: hidden; display: flex; justify-content: center; }
.photo-frame img { display: block; max-width: 100%; max-height: 78vh; object-fit: contain; }
.photo-text { flex: 1; min-width: 0; }
.photo-text strong { display: block; }
.photo-text p { margin: 2px 0 0; color: var(--muted); font-size: 0.82rem; white-space: pre-wrap; max-height: 5.5em; overflow: auto; }
.photo-text p:empty, .photo-text strong:empty { display: none; }

/* ---- Search box with the button inside it (Groups) ---------------------- */
.search-pill { position: relative; display: flex; }
.search-pill input[type="text"] { flex: 1; min-width: 0; height: 40px; font: inherit; color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 999px; padding: 0 44px 0 16px; }
.search-pill input[type="text"]:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.search-pill button { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; border: 0; cursor: pointer; background: var(--accent); color: var(--on-accent); padding: 0; border-radius: 50%; display: grid; place-items: center; }
.search-pill button:hover { background: var(--accent-strong); }

/* ---- Profile: Message button next to "You're connected" ------------------ */
.profile-connected { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .gal-list { grid-template-columns: 1fr; }
  .gal-thumb.pic { width: 128px; min-height: 72px; }
  .gal-info { min-height: 72px; padding: 8px 12px 6px; }
}

/* ---- Notes: search + New, compact list, pop-up editor ------------------- */
.gal-toolbar .search-pill { flex: 1; max-width: 340px; }
.search-summary { color: var(--muted); font-size: 0.82rem; margin: -4px 0 10px; }
.search-summary a { color: var(--accent); font-weight: 700; text-decoration: none; }
.note-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .note-list { grid-template-columns: minmax(0, 1fr); } }
.note-row {
  display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; transition: border-color 0.15s;
}
.note-row:hover { border-color: var(--accent); }
.note-row:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.note-row-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 1.05rem/1.3 var(--serif); overflow-wrap: anywhere; }
.note-row-snippet { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 0.85rem; line-height: 1.5; overflow-wrap: anywhere; }
.note-row-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 0.76rem; margin-top: auto; padding-top: 2px; }
.note-cat-tag { color: var(--ink); font-weight: 700; }
.note-bell { color: var(--accent); font-weight: 700; }

.note-dialog { max-width: 620px; }
.note-card { display: flex; flex-direction: column; gap: 12px; }
.note-card h3 { margin: 0; }
.nd-title { width: 100%; height: 42px; font: 700 1rem var(--sans); color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; }
.nd-title:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.nd-remind { align-self: flex-start; color: var(--ink); font-weight: 700; }
.nd-when { display: flex; flex-wrap: wrap; gap: 10px 14px; background: var(--ground); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.nd-when label { display: flex; flex-direction: column; gap: 4px; margin: 0; flex: 1; min-width: 150px; }
.nd-when label span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.nd-when input { height: 38px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; }
.nd-when p { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 0.78rem; }
.nd-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nd-foot .btn-del { height: 36px; }
.btn-del.armed { background: var(--danger); color: var(--on-accent); }

/* ---- Calendar ------------------------------------------------------------ */
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav h3 { min-width: 150px; text-align: center; }
.cal-arrow { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 700; }
.cal-arrow:hover { border-color: var(--accent); color: var(--accent); }
.cal-today { font: 700 0.8rem var(--sans); color: var(--accent); text-decoration: none; margin-left: 4px; }
.cal-day[data-day] { cursor: copy; }
.cal-day[data-day]:hover { border-color: var(--accent); }
.cal-day.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-day.is-today .cal-day-num { color: var(--accent); }
button.cal-entry { width: 100%; text-align: left; border: 0; cursor: pointer; font-family: inherit; }
.cal-entry-note { background: transparent; border: 1px dashed var(--accent); color: var(--ink); }
.cal-entry-note span[aria-hidden] { margin-right: 3px; font-size: 0.65rem; }
/* Keep the seven day columns equal, however long an entry's title is. */
.cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-day { min-width: 0; }
/* Calendar entries: time on its own line, title can use two lines. */
.cal-entry { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.cal-entry .cal-entry-time { display: block; font-size: 0.66rem; margin: 0; }
.cal-entry-note span[aria-hidden] { float: left; }
.cal-header { flex-wrap: wrap; }
@media (max-width: 560px) {
  .cal-nav h3 { min-width: 0; font-size: 1rem; }
  .cal-entry { -webkit-line-clamp: 2; }
}
/* Phones: day cells are too narrow for text, so entries become small
   marks you can tap to open. */
@media (max-width: 560px) {
  .cal-entry { font-size: 0; line-height: 0; height: 6px; padding: 0; border-radius: 3px; background: var(--accent); }
  .cal-entry-note { background: transparent; border: 1.5px solid var(--accent); height: 7px; }
  .cal-entry * { display: none !important; }
}

/* ======================================================================
   Messages (Messenger-style) + new-message notices
   ====================================================================== */
.msgr { display: grid; grid-template-columns: 300px 1fr; padding: 0; overflow: hidden; height: min(720px, calc(100vh - 140px)); min-height: 460px; }
.msgr-side { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.msgr-side-head { padding: 14px 14px 10px; }
.msgr-new {
  width: 100%; height: 42px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer;
  background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 0.9rem var(--sans); transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.msgr-new:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.msgr-new:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.msgr-search { margin: 0 14px 8px; }
.msgr-search input[type="text"] { padding-right: 16px; }
.msgr-list { flex: 1; overflow-y: auto; padding: 0 6px 10px; }
.msgr-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.msgr-row:hover { background: var(--surface); }
.msgr-row.active { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
.msgr-row .av { flex: none; }
.msgr-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msgr-row-text strong { font-size: 0.92rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgr-row-text span { font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgr-row-text i { font-style: normal; }
.msgr-row.unread .msgr-row-text strong { font-weight: 900; }
.msgr-row.unread .msgr-row-text span { color: var(--ink); font-weight: 700; }
.msgr-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(217,130,91,.25); }
.msgr-empty { padding: 16px 8px; }

.msgr-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.msgr-blank { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); padding: 20px; text-align: center; }
.msgr-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.msgr-head .who { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); line-height: 1.2; min-width: 0; }
.msgr-head .who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgr-head .who span { color: var(--muted); font-size: 0.78rem; }
.msgr-head .av { flex: none; }
.msgr-add {
  flex: none; height: 34px; margin-left: 6px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--line);
  background: transparent; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: 700 0.8rem var(--sans); white-space: nowrap;
}
.msgr-add:hover { border-color: var(--ink); }
.msgr-add:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) {
  .msgr-add { padding: 0 9px; }
  .msgr-add span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Two overlapping pictures for a group chat */
.av-stack { position: relative; display: inline-block; flex: none; font-size: 0.75em; }
.av-stack .av-back { position: absolute; left: 0; top: 0; }
.av-stack .av-front { position: absolute; right: 0; bottom: 0; }
.av-stack .av-back > *, .av-stack .av-front > * { box-shadow: 0 0 0 2px var(--sunken); }
/* Group chats: who sent each run of messages */
.msgr-thread.is-group .msgr-msg.theirs { position: relative; padding-left: 36px; }
.msgr-from { font: 700 0.74rem var(--sans); color: var(--muted); margin: 0 0 3px 4px; }
.msgr-from-av { position: absolute; left: 0; top: 19px; }
.msgr-back { display: none; width: 32px; height: 32px; border-radius: 50%; place-items: center; text-decoration: none; color: var(--ink); font-weight: 700; }
.msgr-thread { flex: 1; overflow-y: auto; padding: 14px 16px 6px; display: flex; flex-direction: column; gap: 2px; }
.msgr-hello { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--muted); }
.msgr-hello strong { color: var(--ink); font-size: 1rem; }
.msgr-hello p { margin: 0; font-size: 0.85rem; }
.msgr-day { text-align: center; margin: 14px 0 8px; }
.msgr-day span { font: 700 0.72rem var(--sans); color: var(--muted); background: var(--surface); padding: 3px 10px; border-radius: 999px; }
.msgr-msg { display: flex; flex-direction: column; max-width: 72%; margin-top: 8px; }
.msgr-msg.cont { margin-top: 2px; }
.msgr-msg.mine { align-self: flex-end; align-items: flex-end; }
.msgr-msg.theirs { align-self: flex-start; align-items: flex-start; }
.msgr-bubble { padding: 8px 13px; border-radius: 18px; font-size: 0.92rem; line-height: 1.4; word-wrap: break-word; overflow-wrap: anywhere; }
.msgr-msg.mine .msgr-bubble { background: var(--accent); color: var(--on-accent); }
.msgr-msg.theirs .msgr-bubble { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.msgr-msg.mine.cont .msgr-bubble { border-top-right-radius: 6px; }
.msgr-msg.theirs.cont .msgr-bubble { border-top-left-radius: 6px; }
.msgr-time { font-size: 0.66rem; color: var(--muted); margin: 2px 6px 0; max-height: 0; overflow: hidden; transition: max-height .15s; }
.msgr-msg:hover .msgr-time, .msgr-msg:last-of-type .msgr-time { max-height: 20px; }
.msgr-seen { align-self: flex-end; font-size: 0.7rem; color: var(--muted); margin: 2px 6px 0; }
.msgr-compose { display: flex; align-items: flex-end; gap: 8px; padding: 10px 16px 4px; border-top: 1px solid var(--line); }
.msgr-compose textarea { flex: 1; resize: none; font: inherit; font-size: 0.92rem; line-height: 1.4; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 9px 16px; max-height: 140px; }
.msgr-compose textarea:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.msgr-send { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.msgr-send:hover { background: var(--accent-strong); }
.msgr-hint { margin: 0; padding: 2px 16px 10px; color: var(--muted); font-size: 0.7rem; }
.msgr-error { margin: 0 16px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--accent); color: var(--ink); background: var(--surface); font-size: 0.8rem; }
.mn-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.mn-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.mn-row:hover { background: var(--ground); }
.mn-row small { display: block; color: var(--muted); font-size: 0.75rem; }
/* New Message / Add people pop-ups */
.mn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.mn-head h3 { margin: 0; }
.mn-toggle { color: var(--ink); font-weight: 700; }
.mn-say { color: var(--muted); font-size: 0.86rem; margin: 0 0 10px; }
.mn-card:not(.is-group) .mn-group-only { display: none !important; }
.mn-card.is-group .mn-solo-only { display: none !important; }
.mn-list > span.mn-group-only { display: contents; }
.mn-who { flex: 1; min-width: 0; }
label.mn-pick {
  position: relative; margin: 0; cursor: pointer; border: 1px solid transparent;
  font: 400 0.92rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink);
}
.mn-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.mn-pick:focus-within { outline: 3px solid var(--accent); outline-offset: 1px; }
.mn-box { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--muted); display: grid; place-items: center; color: transparent; box-sizing: border-box; }
.mn-pick.picked { background: rgba(217, 130, 91, 0.14); border-color: var(--accent); }
.mn-pick.picked .mn-box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mn-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.mn-chips:empty { display: none; }
.mn-chips-label { color: var(--muted); font: 700 0.78rem var(--sans); margin-right: 2px; }
.mn-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--ground); border: 1px solid var(--line); font: 700 0.8rem var(--sans); color: var(--ink); }
.mn-chip-new { padding-left: 10px; border-color: var(--accent); }
.mn-card .confirm-actions { margin-top: 14px; }

/* Notices: a soft glow on the Messages tab, and a corner card. */
@keyframes tabGlow { 0% { box-shadow: 0 0 0 0 rgba(217,130,91,.7); } 100% { box-shadow: 0 0 0 12px rgba(217,130,91,0); } }
.tab.tab-glow { animation: tabGlow 1.2s ease-out 3; }
.msg-toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; align-items: center; gap: 10px; width: min(340px, calc(100vw - 40px)); padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; animation: toastIn .3s ease-out; transition: opacity .35s, transform .35s; }
.msg-toast.gone { opacity: 0; transform: translateY(10px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.msg-toast-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msg-toast-text strong { font-size: 0.88rem; }
.msg-toast-text span { font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-toast-x { flex: none; border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; cursor: pointer; padding: 0 2px; }
.msg-toast-x:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .tab.tab-glow, .msg-toast { animation: none; } }

@media (max-width: 700px) {
  .msgr { grid-template-columns: 1fr; height: calc(100vh - 110px); }
  .msgr.has-thread .msgr-side { display: none; }
  .msgr:not(.has-thread) .msgr-main { display: none; }
  .msgr-side { border-right: 0; }
  .msgr-back { display: grid; }
  .msgr-msg { max-width: 85%; }
}

/* ---- Groups: cover banner, events, photo forms --------------------------- */
.group-cover { display: block; width: 100%; height: 170px; border: 0; padding: 0; border-radius: 14px; margin-bottom: 14px; background-size: cover; background-position: center; background-color: var(--sunken); cursor: zoom-in; }
.group-cover:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sizer-form { margin: 8px 0 4px; }
.group-events { margin: 16px 0 4px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface); }
.group-events-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.group-events-empty { margin: 4px 0 2px; color: var(--muted); font-size: 0.85rem; }
.group-event-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--ink); background: transparent; border: 0; border-top: 1px solid var(--line); padding: 8px 2px; }
.group-event-row:first-of-type { border-top: 0; }
.group-event-row:hover .gev-text strong { color: var(--accent); }
.gev-date { flex: none; width: 44px; text-align: center; border-radius: 10px; background: var(--ground); border: 1px solid var(--line); padding: 3px 0; font: 700 1.05rem/1.1 var(--sans); }
.gev-date b { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.gev-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gev-text strong { font-size: 0.92rem; }
.gev-text span { color: var(--muted); font-size: 0.78rem; }
.group-events-all { display: inline-block; margin-top: 6px; color: var(--accent); font: 700 0.8rem var(--sans); text-decoration: none; }

/* Group events on the Calendar: sage outline + the group's name. */
.cal-entry.cal-entry-group { background: transparent; border-left: 3px solid var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.cal-entry.cal-entry-group:hover { background: var(--ok); color: var(--on-accent); }
.cal-entry-grp { display: block; font-size: 0.6rem; font-weight: 700; color: var(--ok); text-transform: uppercase; letter-spacing: .03em; }
.cal-entry-group:hover .cal-entry-grp { color: inherit; }
.cal-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }
.cal-key-group { box-shadow: inset 0 0 0 1.5px var(--ok); border-left: 3px solid var(--ok); }
@media (max-width: 560px) { .cal-entry.cal-entry-group { background: var(--ok); box-shadow: none; border: 0; } }

/* Event editor: who/which group, and the "Calendar" picker. */
.nd-meta { margin: -6px 0 0; color: var(--ok); font: 700 0.8rem var(--sans); }
.nd-share select { height: 38px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; }
.note-card input:disabled, .note-card textarea:disabled, .note-card select:disabled { opacity: 1; color: var(--ink); cursor: default; }
.upload-panel .find-row input[type="file"] { flex: 0 1 auto; }

/* ---- Group page: header with action buttons, cover you can reposition ---- */
.group-header { align-items: flex-start; }
.group-header-text { flex: 1; min-width: 0; }
.group-actions { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.group-actions-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tb-btn.tb-outline { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.tb-btn.tb-outline:hover { background: var(--accent); color: var(--on-accent); }
.group-dialog { max-width: 620px; }
.group-dialog .confirm-card { max-height: min(80vh, 760px); overflow-y: auto; }
.group-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.group-dialog-head h3 { margin: 0; }
.group-events { margin: 16px 0 4px; }

.cover-form { margin: 0 0 14px; }
.cover-form .group-cover { margin: 0; }
.group-cover { position: relative; overflow: hidden; background-repeat: no-repeat; background-size: cover; }
.group-cover.empty { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--surface) 0 14px, var(--sunken) 14px 28px); border: 1.5px dashed var(--line); cursor: default; }
.cover-empty-text { color: var(--muted); font-size: 0.9rem; }
.cover-tools { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cover-btn { height: 32px; display: inline-flex; align-items: center; border: 0; cursor: pointer; padding: 0 14px; border-radius: 999px; font: 700 0.8rem var(--sans); background: rgba(20, 14, 10, 0.72); color: #fff; margin: 0; text-transform: none; letter-spacing: 0; backdrop-filter: blur(4px); }
.cover-btn:hover { background: rgba(20, 14, 10, 0.9); }
.cover-btn.cover-save { background: var(--accent); color: var(--on-accent); }
.cover-btn.cover-save:hover { background: var(--accent-strong); }
.group-cover .cover-tools.cover-idle { opacity: 0; transition: opacity .15s; }
.group-cover:hover .cover-tools.cover-idle, .group-cover:focus-within .cover-tools.cover-idle, .group-cover.empty .cover-tools.cover-idle { opacity: 1; }
.cover-editing, .cover-hint { display: none !important; }
.group-cover.editing { cursor: grab; outline: 3px solid var(--accent); outline-offset: 2px; }
.group-cover.editing.dragging { cursor: grabbing; }
.group-cover.editing .cover-idle { display: none !important; }
.group-cover.editing .cover-editing { display: flex !important; }
.group-cover.editing .cover-hint { display: block !important; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6px 14px; border-radius: 999px; background: rgba(20, 14, 10, 0.6); color: #fff; font: 700 0.82rem var(--sans); pointer-events: none; }
.group-cover.editing.dragging .cover-hint { opacity: 0; }
.cover-size { display: none; }
.group-cover.new-file .cover-size { display: block; }
.cover-size .resize-note { display: none !important; }
.cover-size .size-pick { margin: 0; gap: 6px; background: rgba(20, 14, 10, 0.72); border-radius: 999px; padding: 3px 10px 3px 3px; }
.cover-size .size-pick .lbl, .cover-size .mini-toggle { display: none; }
.cover-size .seg { border-color: transparent; }

@media (max-width: 700px) {
  .group-header { flex-wrap: wrap; }
  .group-actions { width: 100%; align-items: stretch; }
  .group-actions-row { justify-content: stretch; }
  .group-actions-row .tb-btn { flex: 1; }
  .group-cover { height: 130px; }
  .group-cover .cover-tools.cover-idle { opacity: 1; }
}
.group-cover:not(.empty) .cover-empty-text { display: none; }
/* If the name needs the room, the buttons drop below it instead of squeezing it. */
.group-header { flex-wrap: wrap; }
.group-header-text { min-width: 200px; }
.group-actions { margin-left: auto; }

/* ---- Veza.me logo menu (signed in): orange ring, drops About / Help ------ */
.logo-menu { flex: 1 1 0; min-width: max-content; }  /* matches .nav-right, see the App nav section */
.logo-btn { background: transparent; cursor: pointer; color: var(--ink); padding: 5px 12px 6px; border-radius: 999px; border: 2px solid var(--accent); transition: background .15s, box-shadow .15s; }
.logo-btn:hover, .logo-btn[aria-expanded="true"] { background: var(--sunken); box-shadow: 0 0 0 3px rgba(217,130,91,.2); }
.logo-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.user-menu-panel.logo-menu-panel { left: 0; right: auto; min-width: 200px; }
.help-card { text-align: center; }
.help-icon { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); border: 2px solid var(--accent); }

/* ---- Profile picture cropper -------------------------------------------- */
label.choose-btn { cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0; background: var(--accent); color: var(--on-accent); border: 0; }
.crop-dialog { max-width: 380px; }
.crop-dialog .confirm-card { display: flex; flex-direction: column; align-items: center; }
.crop-dialog h3 { align-self: stretch; }
.crop-stage { position: relative; width: 300px; height: 300px; max-width: 100%; border-radius: 12px; overflow: hidden; background: #000; touch-action: none; }
.crop-stage canvas { display: block; cursor: grab; }
.crop-stage canvas.dragging { cursor: grabbing; }
.crop-stage canvas:focus-visible { outline: none; }
.crop-stage:focus-within { box-shadow: 0 0 0 3px var(--accent); }
.crop-mask { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at center, transparent 0 149px, rgba(10, 7, 5, 0.62) 150px); }
.crop-mask::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); }
.crop-controls { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; width: 300px; max-width: 100%; }
.crop-controls input[type="range"] { flex: 1; accent-color: var(--accent); }
.crop-round { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; font: 700 1rem var(--sans); display: grid; place-items: center; }
.crop-round:hover { border-color: var(--accent); color: var(--accent); }
.crop-hint { color: var(--muted); font-size: 0.78rem; margin: 2px 0 12px !important; }
.crop-dialog .confirm-actions { align-self: stretch; }
.avatar-row > div:last-child { flex: 1; min-width: 220px; }

/* ---- Emoji reactions ---------------------------------------------------- */
.react { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.react.busy { opacity: .6; pointer-events: none; }
.react-btn { border: 0; background: transparent; cursor: pointer; color: var(--muted); font: 700 0.85rem var(--sans); padding: 4px 0; display: inline-flex; align-items: center; gap: 6px; }
.react-btn:hover, .react-btn[aria-expanded="true"] { color: var(--accent); }
.react-btn.mine { color: var(--accent); }
.react-emoji { font-size: 1.05rem; line-height: 1; }
.react-pick { position: absolute; bottom: calc(100% + 6px); left: -6px; z-index: 40; display: flex; gap: 2px; padding: 5px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.18); white-space: nowrap; }
.react.below .react-pick { bottom: auto; top: calc(100% + 6px); }
.react .react-opt { border: 0; background: transparent; cursor: pointer; font: 1.45rem/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; line-height: 1; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; transition: transform .12s, background .12s; padding: 0; }
.react-opt:hover, .react-opt:focus-visible { transform: scale(1.25) translateY(-2px); background: var(--ground); outline: none; }
.react-opt.on { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.react-sum { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 0.8rem; cursor: default; }
.react-sum b { font-weight: 700; }
.react-top { letter-spacing: -2px; font-size: 0.95rem; }
.react-err { position: absolute; top: 100%; left: 0; white-space: nowrap; font-size: 0.75rem; color: var(--accent); }
.react-compact .react-btn { font-size: 0.75rem; padding: 0; }
.react-compact .react-btn .react-smile { width: 14px; height: 14px; }
.react-compact .react-btn.mine .react-emoji { display: none; }
.react-compact .react-emoji { font-size: 0.95rem; }
.react.react-compact .react-opt { font-size: 1.25rem; width: 34px; height: 34px; }
@media (max-width: 480px) {
  .react .react-opt, .react.react-compact .react-opt { width: 32px; height: 32px; font-size: 1.2rem; }
}

/* ---- Comments & replies -------------------------------------------------- */
.post-actions { align-items: center; }
.post-actions .cmt-count { margin-left: auto; }
.cmt-thread { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cmt-list { display: flex; flex-direction: column; gap: 10px; }
.cmt-thread.collapsed .cmt-list, .cmt-thread.collapsed .cmt-hide-all { display: none; }
.cmt-show-all { display: none; }
.cmt-thread.collapsed .cmt-show-all { display: inline-block; }
.cmt-show-all, .cmt-hide-all, .cmt-toggle { border: 0; background: transparent; cursor: pointer; color: var(--muted); font: 700 0.8rem var(--sans); padding: 2px 0; }
.cmt-show-all:hover, .cmt-hide-all:hover, .cmt-toggle:hover { color: var(--accent); }
.cmt-hide-all { margin-top: 8px; }
.cmt-main { flex: 1; min-width: 0; }
.cmt .comment-body { display: inline-block; max-width: 100%; }
.cmt .comment-body.is-hidden { opacity: .6; border: 1px dashed var(--line); background: transparent; }
.cmt-hidden-note { font-style: italic; color: var(--muted); }
.cmt-tag { white-space: nowrap; font-size: 0.7rem; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.cmt-to { white-space: nowrap; font-size: 0.75rem; color: var(--muted); margin-left: 4px; }
.cmt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 3px 0 0 10px; font-size: 0.75rem; }
.cmt-actions .comment-meta { display: inline; margin: 0; }
.cmt-reply { border: 0; background: transparent; cursor: pointer; color: var(--muted); font: 700 0.75rem var(--sans); padding: 0; }
.cmt-reply:hover { color: var(--accent); }
.cmt-inline-form { display: inline; margin: 0; }
.cmt-actions .comment-delete { text-decoration: none; }
.cmt-actions .comment-delete:hover { text-decoration: underline; }
.cmt-toggle { margin: 4px 0 0 10px; display: inline-flex; align-items: center; gap: 6px; }
.cmt-toggle::before { content: ""; width: 18px; height: 1px; background: var(--line); }
.cmt-children { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--line); }
/* Past four levels deep, replies stop stepping in (so they don't get squeezed) — they name who they answer instead. */
.cmt-thread .av { width: 32px; height: 32px; font-size: 0.78rem; }
.cmt-flat .cmt-children { padding-left: 0; border-left: 0; margin-left: -40px; } /* back out the avatar + gap */
.cmt-reply-slot:empty { display: none; }
.cmt-reply-slot { margin-top: 6px; }
.comment-form textarea { flex: 1; font: inherit; color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 18px; padding: 7px 14px; resize: none; min-height: 36px; line-height: 1.4; overflow-y: auto; }
.comment-form { align-items: flex-end; }
.comment-form .av { align-self: center; }
.reply-form { margin-top: 0; }
.reply-form .reply-cancel { color: var(--muted); }
.cmt:target > .comment-row .comment-body, .cmt.flash-new > .comment-row .comment-body { box-shadow: 0 0 0 2px var(--accent); }
.cmt-to { display: none; }
.cmt-flat > .comment-row .cmt-to { display: inline; }
@media (max-width: 600px) {
  .cmt-children { margin-left: -32px; padding-left: 10px; } /* step in a little, not a whole avatar's width */
  /* Phones: only three steps in, then replies line up and say who they answer. */
  .cmt[data-depth="2"] .cmt-children { padding-left: 0; border-left: 0; margin-left: -40px; }
  .cmt-to { display: inline; }
}

/* ---- Reactions on chat messages -----------------------------------------
   The React button sits beside the bubble (shows on hover); the reactions
   themselves sit as a small badge under the bubble's edge. */
.msgr-msg { position: relative; }
.msgr-msg .react { position: static; margin: 0 8px; }
.msgr-msg .react:not(:has(.react-sum)) { height: 0; margin: 0; }
.msgr-msg .react-btn { position: absolute; top: 2px; width: 28px; height: 28px; justify-content: center; border-radius: 50%; opacity: 0; transition: opacity .12s; }
.msgr-msg .react-btn:hover { background: var(--ground); }
.msgr-msg.theirs .react-btn { right: -32px; }
.msgr-msg.mine .react-btn { left: -32px; }
.msgr-msg:hover .react-btn, .msgr-msg .react:focus-within .react-btn, .msgr-msg .react.open .react-btn { opacity: 1; }
.msgr-msg .react-btn .react-label { display: none; }
.msgr-msg .react-btn.mine .react-emoji { display: inline; }
.msgr-msg .react-btn .react-smile { width: 16px; height: 16px; }
.msgr-msg .react-pick { bottom: 100%; left: 0; }
.msgr-msg.mine .react-pick { left: auto; right: 0; }
.msgr-msg .react.below .react-pick { bottom: auto; top: 100%; }
.msgr-msg .react-sum { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-top: -8px; position: relative; z-index: 1; }
.msgr-msg .react-err { top: 0; }
@media (hover: none) {
  .msgr-msg .react-btn { opacity: .5; }
}

/* ---- Dark mode switch in the avatar menu ---------------------------------- */
.user-menu-theme { margin: 4px 0 0; padding: 8px 6px 4px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }

/* ---- Notes toolbar, categories ------------------------------------------ */
.toolbar-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tb-btn.tb-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.tb-btn.tb-quiet:hover { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.nd-cat { display: flex; align-items: center; gap: 10px; margin: 0; }
.nd-cat select { height: 36px; min-width: 0; flex: 1; max-width: 280px; font: 400 0.9rem var(--sans); color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; text-transform: none; letter-spacing: 0; }
.nd-cat select:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.choice-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.choice {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; cursor: pointer;
  font: 400 0.9rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink);
  background: var(--ground); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px;
}
.choice:has(input:checked) { border-color: var(--accent); }
.choice input[type="radio"] { margin: 0; accent-color: var(--accent); }
.choice select { height: 32px; min-width: 0; max-width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; }
@media (max-width: 560px) {
  .notes-toolbar { flex-wrap: wrap; }
  .notes-toolbar .search-pill { flex-basis: 100%; max-width: none; }
  .notes-toolbar .toolbar-btns { margin-left: auto; }
}

/* ==== Themes (round 16) ===================================================
   The in-between presets. Each lists every colour so nothing from Light or
   Dark leaks through on a device set the other way. Custom themes get
   theirs from includes/head.php. */
:root[data-theme="soft-dark"] {
  color-scheme: dark;
  --ground: #352e29; --surface: #413833; --sunken: #2c2622; --ink: #f3ebe1; --muted: #cdbfb1; --line: #584c43;
  --accent: #e08d66; --accent-strong: #ea9f7c; --on-accent: #1f1410; --chocolate: #1c1714; --chocolate-strong: #2a2320;
  --danger: #d97a7a; --danger-strong: #e59a9a; --ok: #9dbf98; --shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
:root[data-theme="warm-grey"] {
  color-scheme: dark;
  --ground: #5a524c; --surface: #665d56; --sunken: #4d4641; --ink: #f7f1ea; --muted: #e0d6cb; --line: #7c726a;
  --accent: #f2a57f; --accent-strong: #f6b797; --on-accent: #2a1a12; --chocolate: #36312d; --chocolate-strong: #443e39;
  --danger: #f0a0a0; --danger-strong: #f5b9b9; --ok: #b9d6b4; --shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
:root[data-theme="soft-light"] {
  color-scheme: light;
  --ground: #e3d9cd; --surface: #eee6dc; --sunken: #d9cebf; --ink: #2b2622; --muted: #5a4f47; --line: #c9b9a7;
  --accent: #a44e2e; --accent-strong: #8a3f24; --on-accent: #fffaf4; --chocolate: #3f2417; --chocolate-strong: #57331f;
  --danger: #a53f3f; --danger-strong: #8a3131; --ok: #4d6b4a; --shadow: 0 6px 24px rgba(90, 50, 30, 0.14);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-tone="dark"] input[type="date"] { color-scheme: dark; }
:root[data-tone="light"] input[type="date"] { color-scheme: light; }

/* Avatar menu: Light / Dark / Custom ▾ */
.theme-menu-label { padding: 0 6px; color: var(--muted); font: 700 0.7rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.theme-seg { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--ground); border: 1px solid var(--line); }
.theme-seg button {
  flex: 1; height: 30px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer;
  font: 700 0.8rem var(--sans); display: inline-flex; align-items: center; justify-content: center; gap: 2px;
}
.theme-seg button:hover { background: var(--sunken); }
.theme-seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.theme-seg button:focus-visible, .theme-list-row:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.theme-seg svg { transition: transform 0.15s; }
#themeCustomBtn[aria-expanded="true"] svg { transform: rotate(180deg); }
.theme-list { display: flex; flex-direction: column; gap: 1px; }
.theme-list-label { padding: 6px 8px 2px; color: var(--muted); font: 700 0.72rem var(--sans); }
.theme-list-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); font: 400 0.88rem var(--sans); text-align: left; cursor: pointer;
}
.theme-list-row:hover { background: var(--sunken); }
.theme-list-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-list-row .theme-tick { color: var(--accent); visibility: hidden; }
.theme-list-row[aria-pressed="true"] { background: var(--sunken); }
.theme-list-row[aria-pressed="true"] .theme-tick { visibility: visible; }
.user-menu-panel .theme-list-manage { padding: 6px 8px; color: var(--accent); font: 700 0.82rem var(--sans); text-decoration: none; }
.user-menu-panel .theme-list-manage:hover { text-decoration: underline; background: transparent; }
.theme-dots { display: inline-flex; gap: 3px; flex: none; }
.theme-dots span { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.45); }

/* Settings → Appearance */
.theme-intro { margin: 0 0 6px; color: var(--muted); font-size: 0.88rem; }
.theme-group { margin: 18px 0 4px; font: 700 0.95rem var(--sans); }
.theme-note { margin: 0 0 10px; color: var(--muted); font-size: 0.82rem; }
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
@media (max-width: 560px) { .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.theme-card { position: relative; min-width: 0; }
.theme-pick {
  width: 100%; height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 10px; text-align: left; cursor: pointer;
  background: var(--ground); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; font: inherit;
  transition: border-color 0.15s;
}
.theme-pick:hover { border-color: var(--accent); }
.theme-pick:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.theme-card.in-use .theme-pick { border: 2px solid var(--accent); padding: 7px 7px 9px; }
.theme-card-name { display: flex; flex-direction: column; min-width: 0; padding: 0 2px; }
.theme-card-name strong { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-card-name small { color: var(--muted); font-size: 0.74rem; line-height: 1.3; }
.theme-card:has(.theme-edit) .theme-card-name { padding-right: 36px; }
.theme-badge { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font: 700 0.74rem var(--sans); padding: 0 2px; }
.theme-edit { position: absolute; right: 10px; bottom: 10px; color: var(--accent); font: 700 0.8rem var(--sans); text-decoration: none; }
.theme-edit:hover { text-decoration: underline; }
.theme-new {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 118px;
  border: 1.5px dashed var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; font: 700 0.88rem var(--sans);
}
.theme-new span { font-size: 1.6rem; line-height: 1; color: var(--accent); }
.theme-new:hover { border-color: var(--accent); }
.theme-mini { display: block; height: 70px; border-radius: 10px; border: 1px solid; padding: 9px; box-sizing: border-box; overflow: hidden; }
.theme-mini-split { border-color: var(--line); background: linear-gradient(90deg, #f6f0e8 50%, #1f1a17 50%); }
.theme-mini-card { display: block; border: 1px solid; border-radius: 7px; padding: 7px 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.theme-mini-text { display: block; width: 62%; height: 6px; border-radius: 3px; }
.theme-mini-text.short { width: 40%; margin-top: 5px; opacity: 0.55; }
.theme-mini-btn { display: block; width: 34px; height: 10px; border-radius: 999px; margin-top: 7px; }

/* The theme editor (theme.php) */
.te-main { max-width: 1160px; margin: 0 auto; padding: 24px 20px 64px; }
.te { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .te { grid-template-columns: minmax(0, 1fr); } }
.te-controls { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.te-title { margin: 0 0 6px; font: 700 1.5rem var(--serif); }
.te-label { color: var(--muted); font: 700 0.72rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.te-name { height: 42px; font: 700 1.1rem var(--serif); color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; }
.te-name:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.te-block { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.te-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.te-preset { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--ground); color: var(--ink); font: 700 0.78rem var(--sans); cursor: pointer; }
.te-preset:hover { border-color: var(--accent); }
.te-color {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 6px 10px 6px 6px; border-radius: 12px; cursor: pointer;
  background: var(--ground); border: 1px solid var(--line); font: 700 0.88rem var(--sans); color: var(--ink); letter-spacing: 0; text-transform: none;
}
.te-color:focus-within { outline: 3px solid var(--accent); outline-offset: 1px; }
.te-color input[type="color"] { width: 40px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; cursor: pointer; flex: none; }
.te-color span { flex: 1; }
.te-color code { font: 400 0.76rem ui-monospace, "SF Mono", Menlo, monospace; color: var(--muted); }
.te-check { margin: 4px 0 0; font: 700 0.8rem var(--sans); }
.te-check.good { color: var(--ok); }
.te-check.warn { color: var(--danger); }
.te-hint { margin: 2px 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.45; }
.te-upload { height: 38px; border-radius: 999px; border: 1.5px dashed var(--line); background: transparent; color: var(--ink); font: 700 0.85rem var(--sans); cursor: pointer; }
.te-upload:hover { border-color: var(--accent); }
.te-wall-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.te-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--ground); }
.te-seg label { margin: 0; cursor: pointer; font: inherit; letter-spacing: 0; text-transform: none; }
.te-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.te-seg span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font: 700 0.78rem var(--sans); color: var(--ink); }
.te-seg input:checked + span { background: var(--accent); color: var(--on-accent); }
.te-seg input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 1px; }
/* Wallpaper strength: Faint ... Full, with the percentage. Its own row under Fill page / Tile and Remove. */
.te-wall-opts #teWallRemove { margin-left: auto; }
/* Screensaver button beside the Veza.me logo (wallpaper-anim.js adds it). */
.logo-menu.has-saver { display: flex; align-items: center; gap: 8px; }
.vz-saver-btn { flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1.5px solid var(--line); background: var(--ground); color: var(--accent); cursor: pointer; transition: background .15s, border-color .15s; }
.vz-saver-btn:hover { border-color: var(--accent); background: var(--sunken); }
.vz-saver-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) { .vz-saver-btn { width: 30px; height: 30px; } }

/* Wallpaper: Photo / Animated, and the animated scene picker. */
.te-wall-kind { align-self: flex-start; }
.te-wall-photo, .te-wall-anim { display: flex; flex-direction: column; gap: 8px; }
.te-anims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.te-anim { display: block; margin: 0; cursor: pointer; font: inherit; color: var(--ink); letter-spacing: 0; text-transform: none; }
.te-anim input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.te-anim span { display: flex; flex-direction: column; gap: 1px; height: 100%; padding: 7px 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--ground); }
.te-anim strong { font: 700 0.82rem/1.25 var(--sans); }
.te-anim small { font: 400 0.72rem/1.3 var(--sans); color: var(--muted); }
.te-anim:hover span { border-color: var(--accent); }
.te-anim input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.te-anim input:checked + span small { color: inherit; opacity: 0.85; }
.te-anim input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 1px; }
.te-saver { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.te-saver-toggle { display: inline-flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; font: 700 0.82rem var(--sans); color: var(--ink); letter-spacing: 0; text-transform: none; }
.te-saver .btn-outline-sm { height: 32px; padding: 0 14px; font-size: 0.8rem; display: inline-flex; align-items: center; color: var(--ink); margin-left: auto; }
.tp-saver { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--line); background: var(--ground); color: var(--accent); }
.te-strength { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; min-width: 0; }
.te-strength label { margin: 0; font: 700 0.82rem var(--sans); color: var(--ink); letter-spacing: 0; text-transform: none; }
.te-strength-end { color: var(--muted); font: 700 0.72rem var(--sans); }
.te-strength input { flex: 1; min-width: 60px; margin: 0; accent-color: var(--accent); }
.te-strength output { min-width: 3.2em; text-align: right; font: 700 0.82rem var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.te-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.te-actions .btn-outline-sm { height: 36px; padding: 0 16px; font-size: 0.85rem; display: inline-flex; align-items: center; color: var(--ink); }
.te-spacer { flex: 1; }
.te-preview-wrap { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 16px; }
.te-preview {
  position: relative; min-height: 520px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  background-color: var(--ground); background-position: center; color: var(--ink);
}
.te-preview .tp-veil { position: absolute; inset: 0; background: var(--ground); opacity: var(--veil, 0); }
.tp-nav { position: relative; display: flex; align-items: center; gap: 6px; height: 54px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.tp-logo { font: 900 1.1rem var(--serif); color: var(--ink); }
.tp-logo span { color: var(--accent); }
.tp-spacer { flex: 1; }
.tp-pill { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: 700 0.75rem var(--sans); }
.tp-pill.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tp-body { position: relative; display: flex; flex-direction: column; gap: 14px; max-width: 560px; margin: 0 auto; padding: 24px 18px; }
.tp-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); }
.tp-card p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.tp-head { flex-direction: row; align-items: center; gap: 14px; }
.tp-av { width: 60px; height: 60px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 700 1.3rem var(--sans); }
.tp-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tp-who strong { font: 700 1.25rem var(--serif); }
.tp-who span, .tp-muted { color: var(--muted); font-size: 0.8rem; }
.tp-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 0.82rem var(--sans); }
.tp-row { display: flex; align-items: center; gap: 8px; }
.tp-ghost { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); font: 700 0.75rem var(--sans); }
.tp-link { color: var(--accent); font: 700 0.8rem var(--sans); text-decoration: none; margin-left: auto; }

/* Visiting a profile in its owner's theme */
.theme-notice {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; width: fit-content; max-width: calc(100% - 28px);
  margin: 14px auto 0; padding: 6px 8px 6px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); font-size: 0.85rem; box-shadow: var(--shadow);
}
.theme-notice button { height: 28px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--ink); font: 700 0.78rem var(--sans); cursor: pointer; }
.theme-notice button:hover { border-color: var(--ink); }

/* Theme editor: the page's own background previews the wallpaper, so
   anything sitting straight on it gets a backing to stay readable. */
.te-sizer { display: flex; flex-direction: column; gap: 8px; }
.te-sizer .size-pick { flex-wrap: wrap; }
body.te-live .te-preview-wrap > .te-label { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
body.te-live footer.site-footer { background: var(--surface); border-top: 1px solid var(--line); }

/* Posts: the bottom of the feed */
.feed-more { text-align: center; margin: 18px 0 4px; }
.feed-more .btn-outline-sm { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; font-size: 0.85rem; color: var(--ink); text-decoration: none; }
.feed-end { color: var(--muted); font-size: 0.85rem; }

/* About page: Short / Less Short */
.about-card { max-width: 640px; }
.about-card .sub { margin-bottom: 16px; }
.about-switch { margin: 0 0 18px; }
.about-text p { margin: 0 0 14px; line-height: 1.75; }
.about-back { margin: 18px 0 0; }
.about-back a { color: var(--accent); font-weight: 700; text-decoration: none; }
.about-back a:hover { text-decoration: underline; }

/* ---- See-through header and panels (Theme editor > Panels and header) ----
   theme_style_html() sets --panel, --panel-sunken and --panel-blur only when a
   theme asks for see-through panels; otherwise these fall back to the solid
   colours, so nothing changes. The theme editor sets them live (body.te-live).
   Menus, pop-ups and text boxes stay solid so they always read clearly. */
:is(:root[data-theme="custom"], .te-live) :is(.app-nav, footer.site-footer, .settings-card, .te-controls, .composer, .post,
  .list-card, .li-card, .conn-card, .note-row, .gal-item, .cal-day:not(.cal-day-empty), .upload-panel, .group-events) {
  background-color: var(--panel, var(--surface));
  -webkit-backdrop-filter: var(--panel-blur, none);
  backdrop-filter: var(--panel-blur, none);
}
:is(:root[data-theme="custom"], .te-live) .panel-surface {
  background-color: var(--panel-sunken, var(--sunken));
  -webkit-backdrop-filter: var(--panel-blur, none);
  backdrop-filter: var(--panel-blur, none);
}
.te-preview :is(.tp-nav, .tp-card) {
  background-color: var(--panel, var(--surface));
  -webkit-backdrop-filter: var(--panel-blur, none);
  backdrop-filter: var(--panel-blur, none);
}

/* ---- Sign In: "Keep me logged in" ------------------------------------- */
.remember-row { display: flex; align-items: center; gap: 10px; margin: 2px 0 4px; cursor: pointer; font: 700 0.92rem var(--sans); color: var(--ink); letter-spacing: 0; text-transform: none; }
.remember-row input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.remember-hint { margin: 0 0 16px 28px; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }

/* ---- Settings > Appearance > My themes: trash can (left) and Edit (right) ----
   Your own themes get a bottom row; the theme in use shows "In use" there. */
.theme-card:has(.theme-edit) .theme-pick { padding-bottom: 40px; }
.theme-card:has(.theme-edit) .theme-card-name { padding-right: 2px; }
.theme-card:has(.theme-edit) .theme-badge { position: absolute; left: 10px; bottom: 11px; }
.theme-trash {
  position: absolute; left: 6px; bottom: 5px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.theme-trash:hover { color: var(--danger); border-color: var(--danger); }
.theme-trash:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

/* ---- Settings > Account > Sign Out: devices kept logged in ---------------- */
.device-intro { margin: 0 0 6px; color: var(--muted); font-size: 0.85rem; }
.device-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.device-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--ground); font-size: 0.88rem; }
.device-this { color: var(--accent); font: 700 0.74rem var(--sans); }
.device-when { margin-left: auto; color: var(--muted); font-size: 0.78rem; }
.signout-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.signout-row form { margin: 0; }
.device-note { margin: 8px 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.45; }

/* ---- Public pages (veza.me/username) ----------------------------------
   Settings > Privacy > Public page, the Public switch on Gallery items,
   lists and notes, and the public page itself (u.php). */
.pub-box { margin: 14px 0 6px; padding: 16px 18px 6px; border: 1px solid var(--line); border-radius: 14px; background-color: var(--panel-sunken, var(--sunken)); }
.pub-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pub-head h3 { margin: 0; font: 700 1.02rem/1.3 var(--sans); }
.pub-head a, .pub-status a { color: var(--accent); font-weight: 700; font-size: 0.85rem; text-decoration: none; }
.pub-head a:hover { text-decoration: underline; }
.pub-intro, .pub-fine { margin: 6px 0 2px; color: var(--muted); font-size: 0.83rem; line-height: 1.5; }
.pub-box > .toggle-row { border-top: 0; }
.pub-sections { margin-left: 16px; padding-left: 16px; border-left: 2px solid var(--line); transition: opacity 0.15s; }
.pub-sections .toggle-row { padding: 9px 0; }
.pub-sections.is-off { opacity: 0.5; }
.pub-fine { margin-top: 10px; }
.pub-status { margin: 10px 0 12px; padding: 9px 12px; border-radius: 10px; background: var(--surface); font: 700 0.84rem/1.45 var(--sans); color: var(--ink); }
.pub-status:empty { display: none; }
.toggle-row.pub-invisible { border-top: 0; padding-top: 14px; }

.pub-banner { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 9px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 0.86rem; line-height: 1.45; }
.pub-banner svg { flex: none; color: var(--accent); margin-top: 2px; }
.pub-banner a { color: var(--accent); font-weight: 700; text-decoration: none; }
.pub-banner a:hover { text-decoration: underline; }

/* The small Public switch (a .mini-toggle). */
.share-toggle { position: relative; font: 700 0.76rem var(--sans); color: var(--muted); }
.share-toggle:has(input:checked) { color: var(--accent); }
.share-toggle.busy { opacity: 0.6; }
.gal-foot .share-toggle { gap: 6px; }
.gal-foot .gal-more + .share-toggle { margin-left: 2px; }
/* Lists and notes: the card is a link/button, so the switch sits on top of
   its bottom-left corner instead of inside it. */
.card-wrap { position: relative; min-width: 0; display: flex; flex-direction: column; }
.card-wrap > .list-card, .card-wrap > .note-row { flex: 1; }
.card-wrap.has-share > .list-card, .card-wrap.has-share > .note-row { padding-bottom: 44px; }
.card-wrap > .share-toggle { position: absolute; left: 17px; bottom: 13px; }
.list-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }
.list-title-row .list-title { margin: 0; }
.nd-toggles { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; }
.nd-toggles .nd-remind { align-self: auto; }
.nd-share-public { font-weight: 700; color: var(--muted); }
.nd-share-public:has(input:checked) { color: var(--accent); }

/* The public page */
.pub-main { width: 100%; max-width: 940px; margin: 0 auto; padding: 32px 20px 56px; display: flex; flex-direction: column; gap: 18px; }
.pub-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.pub-hero { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 22px 24px; }
.pub-avatar { flex: none; font-size: 1.9rem; }
.pub-who { flex: 1; min-width: 200px; }
.pub-who h1 { margin: 0; font: 700 2rem/1.15 var(--serif); overflow-wrap: anywhere; }
.pub-who p { margin: 4px 0 0; color: var(--muted); font-size: 0.92rem; }
.pub-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pub-cta span { color: var(--muted); font-size: 0.8rem; }
.pub-cta span a { color: var(--accent); font-weight: 700; text-decoration: none; }
.pub-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 20px; border-radius: 999px; background: var(--accent); color: var(--on-accent); text-decoration: none; font: 700 0.9rem var(--sans); border: 1.5px solid var(--accent); }
.pub-btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.pub-btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.pub-btn-quiet:hover { background: var(--sunken); border-color: var(--accent); }
.pub-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.pub-tabs button { height: 38px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 700 0.9rem var(--sans); cursor: pointer; }
.pub-tabs button:hover { border-color: var(--accent); }
.pub-tabs button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pub-tabs button span { font-weight: 400; opacity: 0.8; margin-left: 3px; }
.pub-panel-title { margin: 0 0 12px; font: 700 1.3rem/1.3 var(--serif); }
.pub-list-items { list-style: none; margin: 6px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
.pub-list-items a { color: var(--accent); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.pub-list-items a:hover { text-decoration: underline; }
.pub-list-items span { font-weight: 700; overflow-wrap: anywhere; }
.pub-list-items p { margin: 2px 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.5; overflow-wrap: anywhere; }
.pub-notes { display: flex; flex-direction: column; gap: 12px; }
.pub-note { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; scroll-margin-top: 80px; }
.pub-note h3 { margin: 0; font: 700 1.25rem/1.3 var(--serif); overflow-wrap: anywhere; }
.pub-note-when { margin: 2px 0 10px; color: var(--muted); font-size: 0.8rem; }
.pub-note-body { line-height: 1.7; overflow-wrap: anywhere; }
.pub-foot { margin: 6px 0 0; text-align: center; color: var(--muted); font-size: 0.82rem; }
.pub-owner-note { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 0.88rem; line-height: 1.5; }
.pub-owner-note a, .pub-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.pub-owner-note a:hover, .pub-link:hover { text-decoration: underline; }
.pub-chip { font: 700 0.68rem var(--sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 9px; }
.pub-private-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 48px 20px; }
.pub-private-main .pub-owner-note { max-width: 460px; }
.pub-private { max-width: 460px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pub-private h1 { margin: 0; font: 700 1.6rem/1.25 var(--serif); }
.pub-private p { margin: 0; color: var(--muted); line-height: 1.6; }
.pub-lock { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent); display: grid; place-items: center; }
.pub-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
@media (max-width: 560px) {
  .pub-main { padding: 20px 14px 44px; }
  .pub-hero { padding: 18px; gap: 16px; }
  .pub-who h1 { font-size: 1.6rem; }
  .pub-cta { align-items: flex-start; width: 100%; }
  .pub-note { padding: 16px; }
}
:is(:root[data-theme="custom"], .te-live) :is(header.nav, .pub-card, .pub-note, .pub-private, .pub-owner-note, .pub-banner) {
  background-color: var(--panel, var(--surface));
  -webkit-backdrop-filter: var(--panel-blur, none);
  backdrop-filter: var(--panel-blur, none);
}

/* ---- Notes: Private | Connections | Public -------------------------------
   The same pill as the Gallery's All / Photos / Videos, smaller. On note and
   category cards it sits on the card's bottom-left corner (outside the
   card's link/button, see .card-wrap); in the note editor it's a radio group. */
.vis-seg { display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 3px; background: var(--ground); border: 1px solid var(--line); border-radius: 999px; }
.vis-seg button, .vis-seg-form label > span { display: inline-flex; align-items: center; height: 22px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 700 0.74rem var(--sans); cursor: pointer; white-space: nowrap; }
.vis-seg button:hover, .vis-seg-form label > span:hover { color: var(--ink); }
.vis-seg button.on, .vis-seg-form input:checked + span { background: var(--accent); color: var(--on-accent); }
.vis-seg button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.vis-seg.busy { opacity: 0.6; }
.vis-seg { position: relative; }
.vis-seg-form label { margin: 0; text-transform: none; letter-spacing: 0; }
.vis-seg-form input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vis-seg-form input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 1px; }
.card-wrap.has-vis > .list-card, .card-wrap.has-vis > .note-row { padding-bottom: 50px; }
.card-wrap > .vis-seg { position: absolute; left: 13px; bottom: 11px; }
.vis-differ { color: var(--accent); }
@media (max-width: 380px) {
  .vis-seg button, .vis-seg-form label > span { padding: 0 8px; }
}

/* ---- Games tab ---------------------------------------------------------- */
.game-icon { display: block; border-radius: 10px; flex: none; }
.game-icon .gi-light { fill: color-mix(in srgb, var(--accent) 16%, #f4e9da); }
.game-icon .gi-dark { fill: color-mix(in srgb, var(--accent) 58%, #8c6a52); }
.game-icon .gi-piece { fill: #faf6ef; stroke: #2b2522; stroke-width: 1.6; stroke-linejoin: round; }
.game-icon .gi-disc-dark { fill: #2b2522; stroke: #5a4d43; stroke-width: 2; }
.game-icon .gi-ring-dark { fill: none; stroke: #5a4d43; stroke-width: 1.5; }
.game-icon .gi-disc-light { fill: #f6efe4; stroke: #c9b8a3; stroke-width: 2; }
.game-icon .gi-ring-light { fill: none; stroke: #c9b8a3; stroke-width: 1.5; }
.game-icon .gi-wood { fill: color-mix(in srgb, var(--accent) 14%, #dcb67f); }
.game-icon .gi-grid { stroke: #5a4128; stroke-width: 1.3; fill: none; }
.game-icon .gi-stone-b { fill: #211c19; }
.game-icon .gi-stone-w { fill: #faf7f2; stroke: #8a7a6a; stroke-width: 1; }
.game-icon .gi-felt { fill: color-mix(in srgb, var(--accent) 10%, #3a312c); }
.game-icon .gi-pt-a { fill: color-mix(in srgb, var(--accent) 88%, #5a3a2a); }
.game-icon .gi-pt-b { fill: color-mix(in srgb, var(--accent) 18%, #cdbba3); }
.game-icon .gi-chk-light { fill: #f6efe4; stroke: #a8977f; stroke-width: 1.2; }
.game-icon .gi-chk-dark { fill: #1f1a17; stroke: #6b5a4e; stroke-width: 1.2; }
.game-icon .gi-baize { fill: color-mix(in srgb, var(--accent) 24%, #2f6a4c); }
.game-icon .gi-baize-line { stroke: color-mix(in srgb, var(--accent) 20%, #1d4532); stroke-width: 1.4; fill: none; }
.game-icon .gi-thick { stroke-width: 2; }
.game-icon .gi-xq-face { fill: #f5e2bb; stroke: #8a6440; stroke-width: 1.3; }
.game-icon .gi-sg-wood { fill: color-mix(in srgb, var(--accent) 10%, #ebcb92); }
.game-icon .gi-sg-line { stroke: rgba(70, 48, 30, 0.55); stroke-width: 1; fill: none; }
.game-icon .gi-sg-face { fill: #f3dba8; stroke: #6b4d2e; stroke-width: 1.6; stroke-linejoin: round; }
.game-icon .gi-ch { font: 700 13px/1 "Noto Serif TC", "Noto Serif JP", "Songti TC", "PMingLiU", "SimSun", serif; text-anchor: middle; dominant-baseline: central; }
.game-icon .gi-ch-big { font-size: 17px; }
.game-icon .gi-ch-red { fill: #b3261e; }
.game-icon .gi-ch-black { fill: #1f1b18; }
.game-icon .gi-ch-cho { fill: #11705c; }
.game-icon .gi-mc-wood { fill: color-mix(in srgb, var(--accent) 14%, #b07f52); }
.game-icon .gi-mc-hole { fill: color-mix(in srgb, var(--accent) 6%, #4e3423); }
.game-icon .gi-mc-seed { fill: #e6dac6; }
.game-icon .gi-mc-line { stroke: rgba(40, 24, 12, 0.35); stroke-width: 1.5; fill: none; }

.gm-tab { display: flex; flex-direction: column; gap: 12px; }
.gm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gm-head h2 { margin: 0; font: 700 1.4rem/1.2 var(--serif); }
.gm-head-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.gm-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; box-sizing: border-box;
  border-radius: 999px; border: 1.5px solid var(--accent); background: var(--accent); color: var(--on-accent);
  font: 700 0.86rem var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.gm-btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.gm-btn-ghost { background: transparent; color: var(--accent); }
.gm-btn-ghost:hover { background: var(--accent); color: var(--on-accent); }
.gm-btn-sm { height: 32px; padding: 0 14px; font-size: 0.8rem; }
.gm-label { margin: 10px 0 0; font: 900 0.72rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.gm-family { margin: 4px 0 0; font: 700 1rem/1.3 var(--serif); }
.gm-list { display: flex; flex-direction: column; gap: 8px; }
.gm-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.gm-thumb { flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; display: block; }
.gm-av { border-radius: 50%; }
.gm-info { flex: 1; min-width: 0; }
.gm-info h3 { margin: 0; font: 700 0.98rem/1.3 var(--sans); overflow-wrap: anywhere; }
.gm-info p { margin: 2px 0 0; font-size: 0.82rem; color: var(--muted); }
.gm-acts { flex: none; display: flex; gap: 8px; }
.gm-acts form { margin: 0; }
.gm-empty { margin: 0; padding: 14px; border-radius: 12px; background: var(--surface); border: 1px dashed var(--line); color: var(--muted); font-size: 0.9rem; text-align: center; }
.gm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.gm-card { display: flex; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.gm-card-art { flex: none; }
.gm-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gm-card-body h4 { margin: 0; font: 700 1.02rem/1.25 var(--serif); }
.gm-blurb { margin: 0; font-size: 0.86rem; line-height: 1.4; }
.gm-aka { margin: 0; font-size: 0.76rem; line-height: 1.4; color: var(--muted); }
.gm-card-acts { margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gm-link { color: var(--accent); font: 700 0.8rem var(--sans); text-decoration: none; }
.gm-link:hover { text-decoration: underline; }
.gm-done-list { display: flex; flex-direction: column; gap: 6px; }
.gm-done { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.gm-done form { margin: 0; }
.gm-chip { flex: none; min-width: 46px; text-align: center; padding: 3px 9px; border-radius: 999px; font: 900 0.74rem var(--sans); box-sizing: border-box; }
.gm-chip-won { background: var(--accent); color: var(--on-accent); }
.gm-chip-lost { border: 1px solid var(--line); color: var(--muted); }
.gm-chip-draw { border: 1px solid var(--accent); color: var(--accent); }
.gm-done-what { flex: 1; min-width: 0; font-size: 0.88rem; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.gm-done-what:hover { color: var(--accent); }
.gm-when { flex: none; font-size: 0.78rem; color: var(--muted); }
.gm-link-btn { border: 0; background: none; padding: 4px 2px; color: var(--accent); font: 700 0.8rem var(--sans); cursor: pointer; }
.gm-link-btn:hover { text-decoration: underline; }
.gm-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.gm-x:hover { background: var(--sunken); color: var(--ink); }
@media (max-width: 560px) {
  .gm-row { flex-wrap: wrap; }
  .gm-acts { width: 100%; justify-content: flex-end; }
  .gm-when { display: none; }
}
:is(:root[data-theme="custom"], .te-live) :is(.gm-row, .gm-card, .gm-done, .gm-empty) {
  background-color: var(--panel, var(--surface));
  -webkit-backdrop-filter: var(--panel-blur, none);
  backdrop-filter: var(--panel-blur, none);
}

/* New game pop-up */
.gm-dialog { max-width: 560px; }
.gm-new { display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 48px); overflow-y: auto; }
.gm-new-head { display: flex; align-items: center; justify-content: space-between; }
.gm-new-head h3 { margin: 0; }
.gm-field-label { display: block; margin: 0 0 6px; font: 700 0.75rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.gm-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.gm-fieldset .seg { flex-wrap: wrap; }
.gm-select { width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--ground); color: var(--ink); font: 700 0.95rem var(--sans); }
.gm-search { width: 100%; height: 38px; box-sizing: border-box; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--ground); color: var(--ink); font: inherit; margin-bottom: 8px; }
.gm-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 6px; max-height: 220px; overflow-y: auto; padding: 2px; }
.gm-person { display: flex; align-items: center; gap: 10px; padding: 6px 10px; margin: 0; border-radius: 12px; border: 1.5px solid var(--line); background: var(--ground); cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--ink); }
.gm-person input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gm-person:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--ground)); }
.gm-person:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 1px; }
.gm-person-av { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; }
.gm-person-name { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.gm-person-name strong { font: 700 0.88rem var(--sans); }
.gm-person-name span { font: 400 0.76rem var(--sans); color: var(--muted); }
.gm-note { margin: 6px 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--muted); }
.gm-note a { color: var(--accent); font-weight: 700; }
.gm-cube-row { display: flex; align-items: center; gap: 14px; }
.gm-cube-row > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.gm-cube-row strong { font-size: 0.9rem; }
.gm-cube-row span { font-size: 0.8rem; color: var(--muted); line-height: 1.4; }
.gm-cube-row.is-off { opacity: 0.5; }
.gm-new-foot { padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.gm-new-foot .gm-note { margin: 0; }
.gm-new .btn-solid-acc:disabled { opacity: 0.5; cursor: default; }

/* Games round 3c: dominoes and the ludo boards' icons */
.game-icon .gi-dm-tile { fill: #f7f1e6; stroke: #5a4d43; stroke-width: 1; }
.game-icon .gi-dm-div { stroke: #5a4d43; stroke-width: 1; fill: none; }
.game-icon .gi-dm-pip { fill: #2b2522; }
.game-icon .gi-ld-bg { fill: #f6f1e7; }
.game-icon .gi-ld-in { fill: #fbf8f2; }
.game-icon .gi-ld-line { stroke: rgba(60, 45, 30, 0.35); stroke-width: 0.8; fill: none; }
.game-icon .gi-ld-0 { fill: #c8443a; }
.game-icon .gi-ld-1 { fill: #3f8f4f; }
.game-icon .gi-ld-2 { fill: #e0b23a; }
.game-icon .gi-ld-3 { fill: #3a6fb8; }
.game-icon .gi-cv-bg { fill: color-mix(in srgb, var(--accent) 12%, #f1dfb8); }
.game-icon .gi-cv-hole { fill: #fbf8f2; stroke: rgba(60, 45, 30, 0.45); stroke-width: 0.6; }
.gm-person.is-partner .gm-person-name strong::after { content: "Partner"; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 0.68rem/1.5 var(--sans); vertical-align: 1px; }

/* ---- Games: today's puzzles ---- */
.gm-today { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.gm-today-head { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.gm-today-head h3 { margin: 0; font: 700 1.1rem/1.2 var(--serif); }
.gm-today-head span { font-size: 0.8rem; color: var(--muted); }
.gm-today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.gm-today-game { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gm-today-name { display: flex; align-items: center; gap: 10px; }
.gm-today-name .gm-thumb { width: 40px; height: 40px; }
.gm-today-name strong { font: 700 0.98rem var(--sans); }
.gm-today-vs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gm-today-vs form { margin: 0; display: flex; }
.gm-today-v {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; box-sizing: border-box;
  border-radius: 12px; border: 1.5px solid var(--line); background: var(--ground); color: var(--ink); text-decoration: none; text-align: left;
  font: inherit; cursor: pointer;
}
.gm-today-v:hover { border-color: var(--accent); }
.gm-today-v b { font: 800 0.86rem var(--sans); }
.gm-today-v span { font: 700 0.8rem var(--sans); color: var(--accent); font-variant-numeric: tabular-nums; }
.gm-today-v small { font-size: 0.72rem; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.gm-today-v.is-done { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--ground)); }
.gm-today-v.is-off span { color: var(--muted); }
:is(:root[data-theme="custom"], .te-live) .gm-today { background-color: var(--panel, var(--surface)); -webkit-backdrop-filter: var(--panel-blur, none); backdrop-filter: var(--panel-blur, none); }
.game-icon .gi-sd-bg { fill: #fbf8f2; }
.game-icon .gi-sd-thin { stroke: rgba(43, 37, 34, 0.22); stroke-width: 0.8; fill: none; }
.game-icon .gi-sd-thick { stroke: #2b2522; stroke-width: 1.8; fill: none; }
.game-icon .gi-sd-d { font: 800 5.4px/1 system-ui, -apple-system, "Segoe UI", sans-serif; fill: #2b2522; text-anchor: middle; dominant-baseline: central; }
.game-icon .gi-sd-acc { fill: var(--on-accent); }
.game-icon .gi-sd-sel { fill: var(--accent); }
.game-icon .gi-mj-face { fill: #fbf6ea; stroke: #7d6b55; stroke-width: 0.8; }
.game-icon .gi-mj-side { fill: #c8b48e; stroke: #7d6b55; stroke-width: 0.6; }
.game-icon .gi-mj-dot-g { fill: #2f8a4a; }
.game-icon .gi-mj-dot-b { fill: #2c5aa0; }
.game-icon .gi-mj-dot-r { fill: #c0392b; }
.game-icon .gi-ch-small { font-size: 8.5px; }