/* The desktop candidate's visual language for the website's account web client (/shelf), layered after styles.css,
   account.css and lang-switch.css. Tokens are the desktop's semantic tokens (frontend/src/design/tokens.css:
   paper by default, night when the system asks for a dark scheme); the website's classic token names are mapped
   onto them, so shared rules (header, buttons, inputs, dialogs) follow without being rewritten.
   Scoped to body.web-027: another page only gets this look by opting in with that class. */

body.web-027 {
  --canvas: #f5f3f0; --surface: #ffffff; --surface-subtle: #ece9e4; --surface-hover: #e6e2dc; --scrim: rgb(245 243 240 / .86);
  --text-primary: #252832; --text-secondary: #5b606f; --text-tertiary: #646979; --text-on-accent: #ffffff;
  --accent-027: #6553a3; --accent-hover: #574693; --accent-soft: #ebe7f6; --accent-text: #56469a;
  --rose: #a2476c; --rose-soft: #f6e8ee; --success: #276344; --success-soft: #e3f0e8; --warning: #855800; --warning-soft: #f7eeda;
  --danger-027: #a73642; --danger-soft: #f8e5e7; --info: #2f5f8a; --info-soft: #e4edf6; --gold: #8a6412; --gold-soft: #f6eed8;
  --border-control: #b9b4ad; --border-subtle: #dfdbd4; --divider: #e7e3dd; --focus-ring: #6553a3;
  --shadow-card: 0 1px 2px rgb(37 40 50 / .06), 0 4px 14px rgb(37 40 50 / .06);
  --shadow-raised: 0 2px 4px rgb(0 0 0 / .08), 0 10px 26px rgb(37 40 50 / .14);
  --radius-control: 8px; --radius-card: 12px; --radius-pill: 999px;
  --dur-feedback: 100ms; --dur-menu: 150ms; --dur-page: 210ms; --ease-out: cubic-bezier(.2, .8, .2, 1);
  --font-ui: "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans", "Yu Gothic UI", "Noto Sans CJK SC", sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", "Microsoft YaHei UI", "Yu Gothic UI", sans-serif;
  /* The website's classic names, mapped onto the desktop tokens. */
  --bg: var(--canvas); --panel: var(--surface); --panel-soft: var(--surface-subtle); --ink: var(--text-primary); --muted: var(--text-secondary);
  --line: var(--border-subtle); --accent: var(--accent-027); --accent-dark: var(--accent-text); --accent-light: var(--accent-soft);
  --warm: var(--gold-soft); --danger: var(--danger-027); --shadow: var(--shadow-card); --radius: var(--radius-card);
  /* Cover grid: shelf.js reads these two to know how many cards fill a row (folding works in whole rows). */
  --card-min: 156px; --card-gap: 18px;
  color-scheme: light; background: var(--canvas); color: var(--text-primary); font-family: var(--font-ui); font-size: 14px;
}
@media (prefers-color-scheme: dark) {
  body.web-027[data-theme=paper] {
    --canvas: #15171d; --surface: #20232c; --surface-subtle: #292d38; --surface-hover: #313644; --scrim: rgb(21 23 29 / .84);
    --text-primary: #f2f3f7; --text-secondary: #b9becd; --text-tertiary: #a9aebd; --text-on-accent: #1b1830;
    --accent-027: #bca9f3; --accent-hover: #cdbdf7; --accent-soft: #332d4d; --accent-text: #cbbcf6;
    --rose: #f0a6c2; --rose-soft: #43293a; --success: #9ad1ac; --success-soft: #213a2b; --warning: #f0c56d; --warning-soft: #3f3218;
    --danger-027: #ffacb3; --danger-soft: #472228; --info: #9cc5ec; --info-soft: #1f3348; --gold: #e9c26a; --gold-soft: #3c3119;
    --border-control: #5a5f70; --border-subtle: #353a47; --divider: #2f3340; --focus-ring: #cbbcf6;
    --shadow-card: 0 1px 2px rgb(0 0 0 / .3), 0 4px 16px rgb(0 0 0 / .22); --shadow-raised: 0 10px 32px rgb(0 0 0 / .5), 0 1px 3px rgb(0 0 0 / .4);
    --bg: var(--canvas); --panel: var(--surface); --panel-soft: var(--surface-subtle); --ink: var(--text-primary); --muted: var(--text-secondary);
    --line: var(--border-subtle); --accent: var(--accent-027); --accent-dark: var(--accent-text); --accent-light: var(--accent-soft);
    --warm: var(--gold-soft); --danger: var(--danger-027); --shadow: var(--shadow-card);
    color-scheme: dark;
  }
  body.web-027[data-theme=paper] .lang-links { background: rgb(255 255 255 / .06); border-color: var(--border-control); }
  body.web-027[data-theme=paper] .lang-links a[aria-current="true"] { background: var(--accent-027); color: var(--text-on-accent); }
}
@media (prefers-reduced-motion: reduce) { body.web-027 { --dur-feedback: 0ms; --dur-menu: 0ms; --dur-page: 0ms; } }

/* ---- chrome and controls ---- */
body.web-027 h1, body.web-027 h2, body.web-027 h3 { font-family: var(--font-display); letter-spacing: 0; }
body.web-027 .account-header { background: color-mix(in srgb, var(--canvas) 88%, transparent); border-bottom: 1px solid var(--divider);
  z-index: 20; backdrop-filter: blur(10px); flex-wrap: wrap; row-gap: 8px; padding: 12px 24px; }
@media (min-width: 901px) { body.web-027 .account-header { position: sticky; top: 0; } }
body.web-027 .account-header nav { flex-wrap: wrap; gap: 2px; }
body.web-027 .web-who { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One header row at 1280 px in both languages: no brand bottom margin (styles.css gives the sidebar brand one),
   a tighter column gap. */
body.web-027 .account-header { column-gap: 16px; }
body.web-027 .account-header .brand { margin: 0 8px 0 0; }
body.web-027 .web-tabs a { padding: 6px 8px; border-radius: var(--radius-control); color: var(--text-secondary); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
body.web-027 .web-tabs a:hover { background: var(--surface-subtle); color: var(--text-primary); }
body.web-027 .web-tabs a.active { background: var(--accent-soft); color: var(--accent-text); text-decoration: none; }
body.web-027 .btn { font-size: 13px; min-height: 36px; padding: 0 14px; border-radius: var(--radius-control); border-color: var(--border-control);
  background: var(--surface); color: var(--text-primary); margin-top: 0; transform: none; }
body.web-027 .btn:hover { background: var(--surface-hover); transform: none; }
body.web-027 .btn.primary { background: var(--accent-027); border-color: var(--accent-027); color: var(--text-on-accent); }
body.web-027 .btn.primary:hover { background: var(--accent-hover); }
body.web-027 .btn.danger { color: var(--danger-027); background: transparent; }
body.web-027 :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
body.web-027 .panel { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
body.web-027 .account-note { color: var(--text-secondary); font-size: 13px; }
body.web-027 .error-note { border-color: var(--danger-027); color: var(--danger-027); background: var(--danger-soft); font-size: 13px; }
body.web-027 .shelf-layout { max-width: 1240px; padding: 0 24px 48px; gap: 18px; }
body.web-027 .shelf-head { display: grid; gap: 6px; }
body.web-027 main > [data-view] { display: grid; gap: 16px; align-content: start; min-width: 0; }
body.web-027 .shelf-head h1 { font-size: 28px; font-weight: 700; line-height: 1.25; }
body.web-027 .shelf-head p { color: var(--text-secondary); max-width: 880px; }
body.web-027 .web-dialog { border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--surface); color: var(--text-primary); box-shadow: 0 24px 64px rgb(21 23 29 / .28); }
body.web-027 .web-dialog::backdrop { background: rgb(21 23 29 / .42); }
body.web-027 [hidden] { display: none !important; }

/* ---- shelf toolbar ---- */
.shelf-toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
body.web-027 .web-filters .btn { min-height: 32px; border-radius: var(--radius-pill); padding: 0 14px; }
body.web-027 .web-filters .btn.primary { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.shelf-foldbar, .shelf-groupstate { display: inline-flex; flex: none; padding: 2px; gap: 2px; border-radius: 9px; background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.shelf-groupstate__opt { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent;
  color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.shelf-groupstate__opt:hover { background: var(--surface-hover); color: var(--text-primary); }
.shelf-groupstate__opt.is-on { background: var(--surface); color: var(--accent-text); box-shadow: 0 1px 2px rgb(0 0 0 / .08), inset 0 0 0 1px var(--border-subtle); }
.shelf-foldnote { margin-top: 4px; }

/* ---- work cards and stack tiles (A09): one skeleton, one footprint ---- */
body.web-027 #shelf-groups { display: grid; gap: 22px; }
body.web-027 .shelf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); gap: var(--card-gap); align-items: start; }
body.web-027 .shelf-group { display: grid; gap: 10px; }
body.web-027 .shelf-card { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0 0 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-card); text-align: left; font: inherit; cursor: pointer; overflow: hidden;
  transition: box-shadow var(--dur-feedback) var(--ease-out), border-color var(--dur-feedback); -webkit-tap-highlight-color: transparent; }
body.web-027 .shelf-card:hover { box-shadow: var(--shadow-raised); border-color: var(--border-control); }
body.web-027 .shelf-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.shelf-card__cover { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; background: var(--surface-subtle); }
body.web-027 .shelf-card__cover > img, body.web-027 .shelf-card__cover > .cover-empty { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto; }
body.web-027 .cover-empty { background: linear-gradient(135deg, var(--surface-subtle), color-mix(in srgb, var(--accent-soft) 70%, var(--surface-subtle))); }
body.web-027 .shelf-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: calc(2.8em + 2px); padding: 2px 10px 0; box-sizing: border-box;
  font-size: 13.5px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
body.web-027 .shelf-badges { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; height: 20px; padding: 0 10px; }
body.web-027 .shelf-badges span { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: var(--accent-soft); color: var(--accent-text); }
body.web-027 .shelf-badges span.done { background: var(--success-soft); color: var(--success); }
body.web-027 .shelf-card__meta { display: flex; justify-content: space-between; gap: 6px; min-width: 0; height: 18px; padding: 0 10px; color: var(--text-secondary); font-size: 12px; line-height: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf-card__meta > span { overflow: hidden; text-overflow: ellipsis; }

/* The stack: layers inside the 3:4 cover box. The front cover is inset by two layer offsets and each layer sits one
   offset further up and right; the deepest touches the box's top-right corner and nothing reaches outside it. */
.shelf-stack { position: relative; min-width: 0; }
.shelf-stack__pile { --stack-off: 7px; background: transparent; }
.shelf-stack__layer, .shelf-stack__front { position: absolute; left: calc(var(--depth, 0) * var(--stack-off) + 8px); bottom: calc(var(--depth, 0) * var(--stack-off) + 2px);
  width: calc(100% - 2 * var(--stack-off) - 16px); height: calc(100% - 2 * var(--stack-off) - 10px); border-radius: 9px; overflow: hidden; }
.shelf-stack__layer { background: color-mix(in srgb, var(--accent-027) 16%, var(--surface-subtle)); box-shadow: 0 1px 2px rgb(0 0 0 / .14), inset 0 0 0 1px var(--border-subtle); }
.shelf-stack__layer img, .shelf-stack__layer .cover-empty { width: 100%; height: 100%; object-fit: cover; opacity: .6; filter: saturate(.85); display: block; }
.shelf-stack__front { box-shadow: 0 2px 6px rgb(0 0 0 / .18); background: var(--surface-subtle); }
.shelf-stack__front img, .shelf-stack__front .cover-empty { width: 100%; height: 100%; object-fit: cover; display: block; }
.shelf-stack__front.is-placeholder { display: grid; place-items: center; padding: 12px; text-align: center; color: var(--text-secondary); font-size: 12px; font-weight: 600;
  background: linear-gradient(160deg, var(--surface-subtle), color-mix(in srgb, var(--accent-soft) 80%, var(--surface-subtle))); }
.shelf-stack__count { position: absolute; z-index: 1; left: 14px; bottom: 8px; display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px; border-radius: 6px;
  background: var(--scrim); color: var(--text-primary); font-size: 11.5px; font-weight: 700; backdrop-filter: blur(6px); }
.shelf-stack__count::before { content: ""; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px; box-shadow: 2px -2px 0 -0.5px var(--scrim), 2px -2px 0 1px currentColor; margin-right: 3px; }
body.web-027 .shelf-badges .shelf-stack__pill { background: var(--surface-subtle); color: var(--text-secondary); }
.shelf-stack__open { flex: none; color: var(--accent-text); font-weight: 600; }
.shelf-album { margin-bottom: 4px; }

/* Group headers */
.shelf-grouphead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shelf-grouphead__toggle { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border-subtle);
  border-radius: 10px; background: var(--surface); color: var(--text-primary); font: inherit; cursor: pointer; text-align: left; box-shadow: var(--shadow-card); }
.shelf-grouphead__toggle:hover { background: var(--surface-subtle); }
.shelf-grouphead__chevron { flex: none; color: var(--text-secondary); }
.shelf-grouphead__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; font-size: 15px; }
.shelf-grouphead__count { flex: none; font-size: 12px; color: var(--text-secondary); padding: 1px 8px; border-radius: 999px; background: var(--surface-subtle); }

/* Fold / unfold motion; revealed cards ignore pointers while they arrive (a double click never lands on them). */
@keyframes web027-unfold { from { opacity: 0; transform: translateY(-10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes web027-settle { from { transform: translate(calc(-1 * var(--depth, 0) * var(--stack-off)), calc(var(--depth, 0) * var(--stack-off))); } to { transform: none; } }
.shelf-card.is-unfolding { animation: web027-unfold calc(var(--dur-page) * 1.4) var(--ease-out) both; animation-delay: calc(var(--unfold-i, 0) * 18ms); pointer-events: none; }
.shelf-grouphead.is-unfolding { animation: web027-unfold var(--dur-page) var(--ease-out) both; pointer-events: none; }
.shelf-stack.is-settling .shelf-stack__layer { animation: web027-settle calc(var(--dur-page) * 1.4) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .shelf-card.is-unfolding, .shelf-grouphead.is-unfolding, .shelf-stack.is-settling .shelf-stack__layer { animation: none; }
}

/* ---- release calendar ---- */
.cal-toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
body.web-027 .web-month { gap: 6px; }
body.web-027 .web-month input[type=month] { width: auto; min-height: 36px; padding: 4px 10px; }
.cal-scope { display: inline-flex; padding: 2px; gap: 2px; border-radius: 9px; background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--border-subtle); flex-wrap: wrap; }
.cal-scope button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cal-scope button[aria-checked="true"] { background: var(--surface); color: var(--accent-text); box-shadow: 0 1px 2px rgb(0 0 0 / .08), inset 0 0 0 1px var(--border-subtle); }
.cal-body { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  background: var(--surface); box-shadow: var(--shadow-card); position: sticky; top: 84px; }
.cal-grid__weekday { text-align: center; font-size: 12px; color: var(--text-tertiary); font-weight: 600; padding-bottom: 4px; }
.cal-grid__cell { position: relative; display: grid; place-items: center; align-content: center; gap: 2px; aspect-ratio: 1; min-width: 0; border-radius: 8px; border: 0; background: transparent;
  color: var(--text-secondary); font: inherit; font-size: 13px; }
.cal-grid__cell.has-items { background: var(--accent-soft); color: var(--accent-text); font-weight: 700; cursor: pointer; }
.cal-grid__cell.has-items:hover { background: color-mix(in srgb, var(--accent-027) 22%, var(--surface)); }
.cal-grid__cell.is-today { box-shadow: inset 0 0 0 2px var(--accent-027); }
.cal-grid__cell.has-mine::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1.5px var(--surface); }
.cal-grid__count { font-size: 10.5px; line-height: 1; padding: 1px 5px; border-radius: 999px; background: var(--surface); color: var(--accent-text); font-weight: 700; }
body.web-027 .cal-agenda { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.cal-day { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; scroll-margin-top: 90px; }
.cal-day__head { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 6px; margin: 0; font-size: 12px; color: var(--text-secondary); font-weight: 600; text-align: center; }
.cal-day__num { font-size: 26px; line-height: 1; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cal-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.cal-event { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface);
  box-shadow: var(--shadow-card); min-width: 0; }
.cal-event.is-mine { border-color: color-mix(in srgb, var(--gold) 55%, var(--border-subtle)); }
.cal-event__cover { display: block; width: 54px; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: var(--surface-subtle); }
.cal-event__cover img, .cal-event__cover .cover-empty { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.cal-event__text { display: grid; gap: 3px; min-width: 0; align-content: start; }
.cal-event__title { font-size: 14px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.cal-event__original, .cal-event__meta { font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.cal-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.cal-chip { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--surface-subtle); color: var(--text-secondary); text-decoration: none; }
a.cal-chip:hover { text-decoration: underline; }
.cal-chip--vndb { background: var(--info-soft); color: var(--info); }
.cal-chip--steam { background: var(--accent-soft); color: var(--accent-text); }
.cal-chip--hikarifield { background: var(--rose-soft); color: var(--rose); }
.cal-chip--library, .cal-chip--shelf { background: var(--gold-soft); color: var(--gold); }
.cal-chip--note { background: var(--surface-subtle); color: var(--text-secondary); font-weight: 600; }
.cal-chip--warn { background: var(--warning-soft); color: var(--warning); font-weight: 600; }
.cal-monthonly { display: grid; gap: 8px; padding: 16px; border-radius: var(--radius-card); border: 1px dashed var(--border-control); background: color-mix(in srgb, var(--surface) 70%, var(--canvas)); }
.cal-monthonly h2 { font-size: 16px; }
.cal-report { padding: 12px 16px; border-radius: var(--radius-card); border: 1px solid var(--border-subtle); background: var(--surface); }
.cal-report summary { cursor: pointer; font-weight: 650; }
.cal-report p { margin: 8px 0 0; }
.cal-reasons { margin: 6px 0 0; padding-left: 20px; color: var(--text-secondary); font-size: 13px; }
.cal-cachebar { display: grid; gap: 8px; padding-top: 4px; border-top: 1px solid var(--divider); }
.cal-cachebar .account-actions { gap: 8px; }

/* ---- characters & birthdays ---- */
.chars { display: grid; gap: 16px; }
.chars-status { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 14px; border-radius: var(--radius-card); border: 1px solid var(--border-subtle); background: var(--surface); }
.chars-status__text { flex: 1 1 320px; margin: 0; font-size: 13px; color: var(--text-secondary); }
.chars-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--divider); flex-wrap: wrap; }
.chars-tab { min-height: 38px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-secondary); font: inherit; font-weight: 650; cursor: pointer; margin-bottom: -1px; }
.chars-tab[aria-selected="true"] { color: var(--accent-text); border-bottom-color: var(--accent-027); }
.chars-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.chars-main { display: grid; gap: 14px; min-width: 0; }
.chars-panel { display: grid; gap: 14px; min-width: 0; }
.chars-panel h2 { font-size: 16px; }
.chars-today { display: grid; gap: 10px; background: linear-gradient(135deg, var(--rose-soft), var(--surface) 70%); }
.chars-today__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.chars-today__date { color: var(--text-secondary); font-size: 13px; }
.chars-today__cards, .chars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.chars-upcoming { display: grid; gap: 8px; }
.chars-upcoming__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chars-upcoming__day { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: start; }
.chars-upcoming__date { font-size: 13px; font-weight: 650; color: var(--text-secondary); padding-top: 9px; }
.chars-upcoming__people { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.chars-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface);
  color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-card); }
.chars-card:hover { border-color: var(--border-control); background: var(--surface-subtle); }
.chars-card--large { padding: 12px; }
.chars-card--large .chars-portrait { width: 64px; height: 86px; }
.chars-card--chip { padding: 4px 10px 4px 4px; border-radius: 999px; box-shadow: none; max-width: 100%; }
.chars-card--chip .chars-portrait { width: 30px; height: 30px; border-radius: 50%; }
.chars-card--chip .chars-card__original, .chars-card--chip .chars-card__meta { display: none; }
.chars-card__text { display: grid; gap: 1px; min-width: 0; }
.chars-card__name { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chars-card__original, .chars-card__meta { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chars-chip { justify-self: start; display: inline-flex; align-items: center; min-height: 18px; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--gold-soft); color: var(--gold); }
.chars-portrait { flex: none; position: relative; display: grid; place-items: center; width: 40px; height: 54px; border-radius: 8px; overflow: hidden; background: var(--surface-subtle); }
.chars-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.chars-portrait__initial { font-weight: 700; color: var(--text-secondary); }
.chars-portrait--tiny { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.chars-portrait--large { width: 120px; height: 160px; border-radius: 12px; }
.chars-month { display: grid; gap: 10px; }
.chars-month__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.chars-month__nav { display: flex; gap: 6px; flex-wrap: wrap; }
.chars-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.chars-month__cell { display: grid; align-content: start; gap: 4px; min-width: 0; min-height: 64px; padding: 6px; border: 0; border-radius: 8px; background: var(--surface-subtle);
  color: var(--text-secondary); font: inherit; font-size: 12px; text-align: left; }
.chars-month__cell.has-items { background: color-mix(in srgb, var(--rose-soft) 70%, var(--surface)); color: var(--text-primary); cursor: pointer; }
.chars-month__cell.has-items:hover { background: var(--rose-soft); }
.chars-month__cell.is-today { box-shadow: inset 0 0 0 2px var(--accent-027); }
.chars-month__cell.is-selected { box-shadow: inset 0 0 0 2px var(--rose); }
.chars-month__faces { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.chars-month__more { font-size: 10.5px; font-weight: 700; color: var(--rose); }
.chars-month__unknown { margin: 0; }
.chars-day { display: grid; gap: 8px; }
.chars-day h3 { font-size: 15px; }
.chars-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.chars-filter input { flex: 1 1 240px; width: auto; }
.chars-filter select { flex: 0 1 180px; width: auto; }
.chars-detail { position: sticky; top: 84px; display: grid; gap: 10px; align-content: start; padding: 18px; }
.chars-detail__close { justify-self: end; min-height: 30px; }
.chars-detail__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.chars-detail__names { display: grid; gap: 4px; min-width: 0; }
.chars-detail__names h2 { font-size: 18px; overflow-wrap: anywhere; }
.chars-detail__original { color: var(--text-secondary); }
.chars-works { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chars-work { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--surface-subtle); }
.chars-work.is-mine { box-shadow: inset 3px 0 0 var(--gold); }
.chars-group { margin: 0; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent-text); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ---- narrow windows ---- */
@media (max-width: 900px) {
  .cal-body, .chars-layout { grid-template-columns: minmax(0, 1fr); }
  .cal-grid, .chars-detail { position: static; }
  .chars-detail.is-empty { display: none; }
}
@media (max-width: 560px) {
  body.web-027 { --card-min: 132px; --card-gap: 12px; }
  body.web-027 .shelf-layout { padding: 0 16px 40px; }
  body.web-027 .account-header { padding: 10px 16px; gap: 8px 12px; }
  body.web-027 .account-header .brand img { width: 30px; height: 30px; }
  body.web-027 .web-who { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  body.web-027 #logout { min-height: 32px; padding: 0 10px; }
  body.web-027 .account-header nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  body.web-027 .web-tabs a { white-space: nowrap; flex: none; }
  body.web-027 .shelf-head h1 { font-size: 22px; }
  /* One line per group header: the header folds the group, its stack unfolds it, the bar above sets all groups. */
  .shelf-grouphead .shelf-groupstate { display: none; }
  .shelf-foldbar { width: 100%; }
  .shelf-foldbar .shelf-groupstate__opt { flex: 1; }
  .cal-day { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
  .cal-event { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .cal-event__cover { width: 44px; }
  .chars-upcoming__day { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .chars-upcoming__date { padding-top: 0; }
  .chars-month__cell { min-height: 48px; padding: 4px; }
  .chars-portrait--tiny { width: 16px; height: 16px; }
  .chars-detail__top { grid-template-columns: minmax(0, 1fr); }
}

/* ---- the account page (/account) opts in with body.web-027 ---- */
body.web-027.account-page .account-layout { max-width: 680px; }
body.web-027.account-page .account-header nav a { padding: 6px 8px; border-radius: var(--radius-control); color: var(--text-secondary); font-weight: 600; font-size: 13px; }
body.web-027.account-page .account-header nav a:hover { background: var(--surface-subtle); color: var(--text-primary); }
body.web-027.account-page .account-header nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }
body.web-027.account-page .account-card h1 { font-size: 26px; }
body.web-027 .provider-list { background: var(--surface); border-color: var(--border-subtle); }
body.web-027 .product-entry { background: var(--surface-subtle); border-color: var(--border-subtle); }
body.web-027 .product-entry-badge { background: var(--surface-hover); color: var(--text-primary); }
body.web-027 .product-entry-badge[data-status="available"] { background: var(--accent-soft); color: var(--accent-text); }
body.web-027 .product-entry-badge[data-status="unavailable"] { background: var(--warning-soft); color: var(--warning); }
body.web-027 .product-entry-actions .text-link, body.web-027 .product-entry-more summary, body.web-027 .ss-companion__more { color: var(--accent-text); }
body.web-027 .account-card input:not([type=checkbox]):not([type=radio]) { border-color: var(--border-control); }