:root {
  --primary: #b3261e;
  --primary-dark: #8a1c16;
  --primary-ink: #ffffff;
  --stage: #1d1b1b;
  --stage-2: #2c2828;
  --spot: #f4d03f;
  --bg: #faf7f2;
  --surface: #ffffff;
  --text: #1f1a17;
  --muted: #6b625c;
  --border: #e7e0d6;
  --ok-bg: #e8f5e9;
  --warn: #8a5300;
  --warn-bg: #fff4e0;
  --danger: #b3261e;
  --danger-bg: #fdecea;
  --info-bg: #eef3fb;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(31, 26, 23, .06), 0 4px 16px rgba(31, 26, 23, .06);
  --tabbar-h: 60px;
  --topbar-h: 58px;
  --serif: "Songti SC", STSong, "Noto Serif SC", "Source Han Serif SC", SimSun, serif;
  --display: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, var(--serif);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + .75rem); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .6em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0; }

/* top bar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .75rem;
  height: var(--topbar-h); padding: 0 1rem;
  background: var(--stage); color: #fff;
  border-bottom: 3px solid var(--primary);
}
.brand { display: flex; align-items: center; gap: .6rem; min-width: 0; color: #fff; font-weight: 600; }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-button {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; margin-left: -.4rem; padding: 0;
  background: none; border: 0; border-radius: 10px; color: #e9e4dc; cursor: pointer;
}
.menu-button:hover { background: var(--stage-2); }
.menu-button svg { width: 24px; height: 24px; }
.topbar-actions { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.logout-form { margin: 0; }
.link-button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: .4rem .6rem; }
.topbar .link-button { color: #e9e4dc; }

/* notification bell */
.bell { position: relative; }
.bell > summary {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; color: #e9e4dc; cursor: pointer; list-style: none;
}
.bell > summary::-webkit-details-marker { display: none; }
.bell > summary:hover, .bell[open] > summary { background: var(--stage-2); }
.bell > summary:focus-visible { outline: 2px solid var(--spot); outline-offset: 1px; }
.bell > summary svg { width: 22px; height: 22px; }
.bell-count {
  position: absolute; top: 1px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--primary); color: #fff; box-shadow: 0 0 0 2px var(--stage);
  font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center;
}
.bell-count[hidden] { display: none; }
.bell-panel {
  position: absolute; top: calc(100% + 10px); right: -3.5rem; z-index: 30;
  width: min(360px, calc(100vw - 1.5rem)); overflow: hidden;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.bell-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .9rem; border-bottom: 1px solid var(--border); }
.bell-head form { margin: 0; }
.bell-head .link-button { padding: .2rem 0; color: var(--primary); font-size: .85rem; }
.bell-new { display: block; padding: .5rem .9rem; background: var(--info-bg); font-size: .85rem; }
.bell-new[hidden] { display: none; }
.bell-list { list-style: none; margin: 0; padding: 0; max-height: min(60vh, 420px); overflow-y: auto; }
.bell-list li + li { border-top: 1px solid var(--border); }
.bell-list a { display: block; padding: .6rem .9rem; color: var(--text); }
.bell-list a:hover { background: #f6f1ea; text-decoration: none; }
.bell-title { display: block; font-weight: 600; }
.bell-list .unread .bell-title::before, .feed .unread > a::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .4rem;
  border-radius: 50%; background: var(--primary); vertical-align: .1em;
}
.bell-body { display: block; overflow: hidden; color: var(--muted); font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.bell-time { display: block; color: var(--muted); font-size: .75rem; }
.bell-empty { padding: 1.25rem .9rem; color: var(--muted); text-align: center; }
.bell-all { display: block; padding: .6rem .9rem; border-top: 1px solid var(--border); font-size: .9rem; text-align: center; }

/* bottom tab bar on phones */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; height: var(--tabbar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--muted); font-size: .75rem;
}
.tabbar a:hover { text-decoration: none; }
.tabbar svg { width: 24px; height: 24px; }
.tabbar a[aria-current="page"] { color: var(--primary); font-weight: 600; }

/* left navigation: a sticky column on wide screens, a drawer behind the menu button on phones */
.shell { flex: 1; display: flex; width: 100%; }
.shell > .page { min-width: 0; }
.sidenav {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
  width: min(80vw, 270px); overflow-y: auto;
  padding: 1rem .75rem calc(1rem + env(safe-area-inset-bottom));
  background: var(--surface); box-shadow: var(--shadow);
  transform: translateX(-100%); visibility: hidden;
  transition: transform .2s ease, visibility 0s linear .2s;
}
.drawer-open .sidenav { transform: none; visibility: visible; transition: transform .2s ease; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(29, 27, 27, .45); }
.drawer-backdrop[hidden] { display: none; }
.sidenav nav { display: flex; flex-direction: column; gap: 2px; }
.sidenav a { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: 10px; color: var(--text); }
.sidenav a:hover { background: #f1eae0; text-decoration: none; }
.sidenav svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.sidenav a[aria-current="page"], .sidenav a.is-open {
  background: #f6ece9; background: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--primary); font-weight: 600;
}
.sidenav a[aria-current="page"] svg, .sidenav a.is-open svg { color: currentColor; }
.sidenav-sep { margin: .5rem .25rem; }
.sidenav-sub { display: flex; flex-direction: column; gap: 1px; margin: .15rem 0 .4rem 1.6rem; padding-left: .5rem; border-left: 2px solid var(--border); }
.sidenav-sub a { padding: .35rem .6rem; font-size: .9rem; }
.sidenav svg.sidenav-ext { width: 14px; height: 14px; margin-left: auto; }

.page { width: 100%; max-width: 980px; margin: 0 auto; padding: 1rem 1rem 1.5rem; flex: 1; }
.footer { text-align: center; color: var(--muted); font-size: .8rem; padding: .5rem 1rem 1.5rem; }
.has-tabbar .footer { padding-bottom: calc(var(--tabbar-h) + 1rem + env(safe-area-inset-bottom)); }
.footer-filing { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1rem; margin: .3rem 0 0; }
.footer-filing a { color: inherit; }

@media (min-width: 900px) {
  .menu-button { display: none; }
  .tabbar { display: none; }
  .shell { max-width: 1240px; margin: 0 auto; }
  .sidenav {
    position: sticky; top: var(--topbar-h); z-index: 10; align-self: flex-start; flex: none;
    width: 210px; height: calc(100vh - var(--topbar-h));
    padding: 1.25rem .5rem 1.5rem 1rem; background: none; box-shadow: none;
    transform: none; visibility: visible; transition: none;
  }
  .drawer-backdrop { display: none; }
  .subnav.manage-subnav { display: none; }
  .page { padding: 1.5rem 1.5rem 2.5rem; }
  .has-tabbar .footer { padding-bottom: 1.5rem; }
}

/* layout helpers */
.page-title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-title h1 { margin: 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; margin-bottom: 1rem; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .6rem; }
.card-head h2 { margin: 0; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cols { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.home-grid { display: grid; gap: 0 1rem; }
.home-grid > * { min-width: 0; }
@media (min-width: 1100px) {
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .home-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.home-shelf { margin-top: .5rem; }
.home-shelf + .home-shelf { margin-top: 1.75rem; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { padding: .6rem 0; border-bottom: 1px solid var(--border); }
.feed li:first-child { padding-top: 0; }
.feed li:last-child { padding-bottom: 0; border-bottom: 0; }
.feed li > span { display: block; }
.feed p { margin: .15rem 0; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.empty { color: var(--muted); text-align: center; padding: 2rem 1rem; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .5rem 1.1rem;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font: inherit; font-weight: 500; cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; border-color: #cfc5b7; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-danger { color: var(--danger); border-color: #f0c4c0; }
.btn-small { min-height: 34px; padding: .25rem .7rem; font-size: .875rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.actions form { margin: 0; }

/* forms */
.field { margin-bottom: 1rem; }
.field > label, .field > .label { display: block; font-weight: 600; margin-bottom: .3rem; }
.req { color: var(--primary); margin-left: .15rem; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number],
input[type=tel], input[type=url], input[type=date], input[type=file], select, textarea {
  width: 100%; min-height: 44px; padding: .55rem .75rem;
  font: inherit; font-size: 16px; color: var(--text);
  background: #fff; border: 1px solid #d8cfc3; border-radius: 10px;
}
input[type=file] { padding: .45rem; }
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(179, 38, 30, .35); outline-offset: 1px; border-color: var(--primary); }
input[type=color] { width: 4.5rem; height: 44px; padding: .2rem; border: 1px solid #d8cfc3; border-radius: 10px; background: #fff; }
input[type=checkbox], input[type=radio] { width: 1.1rem; height: 1.1rem; accent-color: var(--primary); vertical-align: -0.15em; }
.field-check > label { display: flex; gap: .5rem; align-items: flex-start; font-weight: 500; }
.field-choices div[id], .choice-list { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.field-choices label { font-weight: 400; }
.field-choices div[id] label { display: inline-flex; gap: .35rem; align-items: center; }
.help { color: var(--muted); font-size: .85rem; margin: .3rem 0 0; }
.errorlist { list-style: none; margin: .3rem 0 0; padding: 0; color: var(--danger); font-size: .875rem; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--danger); }
.form-errors { background: var(--danger-bg); color: #8a1c16; padding: .6rem .8rem; border-radius: 10px; margin-bottom: 1rem; }
.form-errors .errorlist { color: inherit; margin: 0; }
.form-grid-host { container-type: inline-size; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.25rem; align-items: start; }
@container (min-width: 30rem) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid > .form-errors, .form-grid > .field:has(textarea) { grid-column: 1 / -1; }
}
input[type=file]::file-selector-button {
  margin-right: .75rem; padding: .35rem .9rem; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--text);
  background: #f7f2ea; border: 1px solid #d8cfc3; border-radius: 8px;
}
input[type=file]::file-selector-button:hover { border-color: var(--primary); color: var(--primary); }
.filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-bottom: 1rem; }
.filters .field { flex: 1 1 150px; max-width: 280px; margin: 0; }
.filters .field:has(> .btn:only-child) { flex: none; }
.filters label { font-size: .85rem; font-weight: 600; display: block; margin-bottom: .2rem; }
.section-title { font-size: .95rem; color: var(--muted); margin: 1.25rem 0 .5rem; padding-bottom: .3rem; border-bottom: 1px solid var(--border); }

/* alerts (flash messages are toasts, see the end of the file) */
.alert { padding: .7rem .9rem; border-radius: 10px; margin: 0 0 .6rem; background: var(--info-bg); }
.alert-ok { background: var(--ok-bg); color: #1b5e20; }
.alert-error { background: var(--danger-bg); color: #8a1c16; }
.alert-warn { background: var(--warn-bg); color: var(--warn); }

/* badges */
.badge { display: inline-block; padding: .05rem .55rem; border-radius: 999px; font-size: .78rem; line-height: 1.6; background: #efe9e1; color: #4d453f; white-space: nowrap; }
.badge-ok { background: var(--ok-bg); color: #1b5e20; }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-danger { background: var(--danger-bg); color: #8a1c16; }
.badge-spot { background: #fdf3c4; color: #6b5300; }
.badge-dark { background: var(--stage); color: var(--spot); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }

/* tables */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 1rem; }
table.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: .6rem .7rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.table th { background: #f6f1ea; font-weight: 600; white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .nowrap { white-space: nowrap; }

/* key value lists */
.kv { margin: 0 0 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.kv > div { display: grid; grid-template-columns: 7.5em 1fr; gap: .75rem; padding: .65rem .9rem; border-bottom: 1px solid var(--border); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }

/* people */
.card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.person-card { display: flex; align-items: center; gap: .8rem; padding: .75rem .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); }
.person-card:hover { text-decoration: none; border-color: var(--primary); }
.person-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.person-meta { color: var(--muted); font-size: .85rem; }
.avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--stage); color: var(--spot); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.6rem; }
.profile-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.profile-head h1 { margin: 0; }

/* search */
.searchbar { position: relative; display: flex; gap: .5rem; margin-bottom: 1rem; }
.searchbar input { flex: 1; }
.suggest-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10; list-style: none; margin: 0; padding: .3rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.suggest-list a { display: block; padding: .55rem .6rem; border-radius: 8px; color: var(--text); }
.suggest-list a:hover, .suggest-list a:focus { background: #f6f1ea; text-decoration: none; }
.suggest-list .hint { color: var(--muted); font-size: .85rem; margin-left: .5rem; }

/* scripts */
.script-card { display: flex; flex-direction: column; gap: .4rem; height: 100%; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--primary); border-radius: var(--radius); color: var(--text); }
.script-card:hover { text-decoration: none; box-shadow: var(--shadow); }
.script-card h3 { margin: 0; }
.script-card .synopsis { margin: 0; color: var(--muted); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.viewer { display: block; width: 100%; height: calc(100vh - 230px); min-height: 420px; border: 1px solid var(--border); border-radius: var(--radius); background: #525659; }
details.filter-box { margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem 1rem; }
details.filter-box summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
details.filter-box[open] summary { margin-bottom: .6rem; }

/* stats and home */
.stats { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); margin-bottom: 1rem; }
.stat { display: block; padding: .9rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); }
.stat:hover { text-decoration: none; border-color: var(--primary); }
.stat strong { display: block; font-size: 1.6rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: .85rem; }
.stat.alert-stat strong { color: var(--primary); }
.budget-stats { container-type: inline-size; }
.budget-figures { display: grid; gap: .5rem; }
.budget-figure { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .6rem .9rem; background: #fcfaf7; border: 1px solid #ebe3d8; border-radius: 10px; }
.budget-figure > span { flex: none; color: var(--muted); font-size: .85rem; }
.budget-figure strong { min-width: 0; font-size: 1.2rem; line-height: 1.25; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.budget-figure strong .muted { font-size: 1rem; font-weight: 600; }
.budget-meter { display: block; width: 100%; height: .5rem; margin-top: .8rem; border: 0; border-radius: 999px; background: #efe8de; overflow: hidden; -webkit-appearance: none; appearance: none; }
.budget-meter::-webkit-progress-bar { background: #efe8de; }
.budget-meter::-webkit-progress-value { background: var(--stage); border-radius: 999px; }
.budget-meter::-moz-progress-bar { background: var(--stage); border-radius: 999px; }
.budget-meter.is-over::-webkit-progress-value { background: var(--danger); }
.budget-meter.is-over::-moz-progress-bar { background: var(--danger); }
@container (min-width: 34rem) {
  .budget-figures { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .75rem; }
  .budget-figure { display: block; padding: .9rem 1rem; }
  .budget-figure > span { display: block; }
  .budget-figure strong { display: block; margin-top: .2rem; font-size: 1.6rem; text-align: left; }
}
.quick { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1.25rem; }
@media (min-width: 700px) { .quick { grid-template-columns: repeat(4, 1fr); } }
.quick a { display: flex; flex-direction: column; gap: .2rem; padding: 1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.quick a:hover { text-decoration: none; border-color: var(--primary); }
.quick strong { font-size: 1.05rem; }
.quick span { color: var(--muted); font-size: .85rem; }

/* manage navigation */
.subnav { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .6rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); -webkit-overflow-scrolling: touch; }
.subnav a { flex: none; padding: .35rem .85rem; border-radius: 999px; color: var(--text); background: var(--surface); border: 1px solid var(--border); font-size: .9rem; }
.subnav a:hover { text-decoration: none; border-color: var(--primary); }
.subnav a[aria-current="page"] { background: var(--stage); color: var(--spot); border-color: var(--stage); }
.tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .75rem; }
.tabs a { padding: .3rem .75rem; border-radius: 999px; background: #efe9e1; color: var(--text); font-size: .875rem; }
.tabs a:hover { text-decoration: none; }
.tabs a[aria-current="page"] { background: var(--primary); color: #fff; }

/* sign-in pages */
body.auth {
  background:
    radial-gradient(circle at 50% 0, rgba(244, 208, 63, .30), transparent 340px),
    linear-gradient(180deg, var(--stage) 0, var(--stage) 300px, var(--bg) 300px);
}
.auth-shell { max-width: 420px; margin: 0 auto; padding-top: .5rem; }
.auth-hero { text-align: center; color: #fff; margin-bottom: 1rem; }
.auth-logo { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(244, 208, 63, .25), 0 10px 30px rgba(0, 0, 0, .35); }
.auth-hero h1 { margin: .6rem 0 .1rem; font-size: 1.4rem; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.auth-team { margin: 0; color: #e9e4dc; font-size: .9rem; }
.auth-tagline { margin: .3rem 0 0; color: var(--spot); font-size: .9rem; letter-spacing: .06em; }
.auth-card { background: var(--surface); border-radius: 16px; box-shadow: 0 8px 30px rgba(0, 0, 0, .18); padding: 1.4rem 1.25rem; border-top: 4px solid var(--primary); }
.auth-card h2 { margin-top: 0; }
.auth-links { text-align: center; margin: 1rem 0 0; font-size: .9rem; }
.auth-notice { color: var(--muted); font-size: .85rem; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border); }
.auth-motto { text-align: center; color: var(--muted); letter-spacing: .25em; font-size: .85rem; margin: 1.25rem 0 0; }

/* misc */
.pagination { display: flex; gap: 1rem; justify-content: center; align-items: center; margin: 1rem 0; }
.copy-box { display: flex; gap: .5rem; }
.copy-box input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.change-list { list-style: none; margin: .25rem 0 0; padding: 0; font-size: .875rem; }
.change-list li { padding: .1rem 0; }
.change-list .old { color: var(--muted); }
.change-list .kept { color: var(--muted); }
.wechat-hint { display: none; }
.is-wechat .wechat-hint { display: block; }

/* Phase 2: crews and schedule */
.alert { padding: .7rem .9rem; border-radius: var(--radius); background: var(--info-bg); margin: 0 0 1rem; }
.alert ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.alert-warn { background: var(--warn-bg); color: var(--warn); }
.alert-danger { background: var(--danger-bg); color: var(--danger); }
.narrow { max-width: 640px; }
.tile { display: flex; flex-direction: column; gap: .3rem; color: inherit; }
.tile:hover { text-decoration: none; border-color: var(--primary); }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: .4rem 0; border-bottom: 1px solid var(--border); }
.plain-list li:last-child { border-bottom: 0; }
.notice { border-bottom: 1px solid var(--border); padding: .4rem 0; }
.notice:last-child { border-bottom: 0; }
.notice h3 { margin: 0 0 .3rem; font-size: 1rem; }
.notice p { margin: .2rem 0; }
.inline-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.inline-form input[type="text"] { flex: 1 1 8rem; min-width: 6rem; width: auto; }
.inline-form .check { display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; }

/* multi-choice dropdown; the panel stays in the page flow so a scrolling table does not clip it */
.picker { min-width: 11rem; max-width: 34rem; }
.picker > summary {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 44px; padding: .55rem .75rem; cursor: pointer; list-style: none;
  background: #fff; border: 1px solid #d8cfc3; border-radius: 10px;
}
.picker > summary::-webkit-details-marker { display: none; }
.picker > summary::after { content: ""; flex: none; width: .45rem; height: .45rem; margin-top: -.2rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.picker[open] > summary { border-color: var(--primary); }
.picker[open] > summary::after { margin-top: .2rem; transform: rotate(-135deg); }
.picker > summary:focus-visible { outline: 2px solid rgba(179, 38, 30, .35); outline-offset: 1px; }
.picker-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-value.is-empty { color: var(--muted); }
.picker-panel { margin-top: .35rem; padding: .65rem .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.picker-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .3rem .75rem; }
.picker-option { display: flex; align-items: center; gap: .4rem; min-height: 32px; font-weight: 400; white-space: nowrap; cursor: pointer; }
.picker-option.is-locked { color: var(--muted); cursor: not-allowed; }
.picker-other { display: block; margin-top: .6rem; }
.picker-other span { display: block; margin-bottom: .2rem; color: var(--muted); font-size: .85rem; }
.picker .picker-other input[type=text] { width: 100%; min-width: 0; }
.titles-form { align-items: flex-start; }
.titles-form .picker { flex: 1 1 14rem; }

/* searchable select: the real select stays in the form underneath the search box */
.combo { position: relative; }
.combo-native { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.combo-input { padding-right: 2.2rem; text-overflow: ellipsis; }
.combo::after { content: ""; position: absolute; top: 22px; right: .95rem; width: .45rem; height: .45rem; margin-top: -.35rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.combo.is-invalid .combo-input { border-color: var(--danger); }
.combo-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: 18rem; overflow-y: auto; list-style: none; margin: 0; padding: .3rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.combo-list[hidden] { display: none; }
.combo-option { padding: .5rem .6rem; border-radius: 8px; cursor: pointer; }
.combo-option.is-active { background: #f6f1ea; }
.combo-option[aria-selected="true"] { color: var(--primary); font-weight: 600; }
.combo-option.is-blank { color: var(--muted); }
.combo-option[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; }
.combo-group { padding: .45rem .6rem .15rem; color: var(--muted); font-size: .8rem; font-weight: 600; }
.combo-empty { padding: .5rem .6rem; color: var(--muted); }
.inline-form .combo { flex: 1 1 10rem; min-width: 9rem; }
.inline-form .combo .combo-input { width: 100%; min-width: 0; }
.table-wrap .combo-list { position: static; margin-top: 4px; }
.text-danger { color: var(--danger); }
tr.voided td { color: var(--muted); }
tr.voided td.num { text-decoration: line-through; }
.file-row, .booking-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.booking-row { border-bottom: 1px solid var(--border); }
.booking-row:last-child { border-bottom: 0; }
.booking-row p { margin: .4rem 0; }
.week-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .5rem 0 1rem; }
.avail, .matrix, .week-table { border-collapse: collapse; width: 100%; }
.avail th, .avail td, .matrix th, .matrix td { border: 1px solid var(--border); padding: 0; text-align: center; font-size: .8rem; }
.avail thead th, .matrix thead th { background: #f6f1ea; padding: .3rem .2rem; font-weight: 600; white-space: nowrap; }
.avail tbody th, .matrix tbody th { background: #f6f1ea; padding: .2rem .45rem; white-space: nowrap; font-weight: 500; text-align: left; }
.avail .cell { display: block; position: relative; cursor: pointer; }
.avail .cell input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.avail .cell > span { display: block; min-width: 2.2rem; height: 1.9rem; background: var(--surface); }
.avail .cell input:checked + span { background: #5fae6e; }
.avail .cell input:focus-visible + span { outline: 3px solid var(--spot); outline-offset: -3px; }
.matrix td { min-width: 1.9rem; height: 1.9rem; }
.legend .st { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: middle; margin: 0 .2rem 0 .6rem; border: 1px solid var(--border); }
.legend .st:first-child { margin-left: 0; }
.st-free { background: #5fae6e; color: #fff; }
.st-busy { background: #d9d4cd; }
.st-unknown { background: repeating-linear-gradient(45deg, #fff, #fff 3px, #ece6dc 3px, #ece6dc 6px); }
.st-taken { background: var(--primary); color: #fff; }
.matrix tr.totals td { font-size: .72rem; background: var(--surface); color: var(--text); padding: 0 .15rem; white-space: nowrap; }
.chip-check { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .6rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.week-table th, .week-table td { border: 1px solid var(--border); padding: .35rem; vertical-align: top; font-size: .82rem; min-width: 7rem; }
.week-table thead th { background: var(--stage); color: #fff; }
.week-table tbody th { background: #f6f1ea; min-width: 4.5rem; text-align: left; }
.wk-item { overflow-wrap: anywhere; background: var(--danger-bg); border-left: 3px solid var(--primary); border-radius: 4px; padding: .25rem .35rem; margin-bottom: .25rem; }
.wk-draft { background: var(--warn-bg); border-left-color: var(--warn); }
.card.unread { border-left: 4px solid var(--spot); }
fieldset.field { border: 0; padding: 0; margin: 0 0 .8rem; min-width: 0; }

/* Phase 3: practice and honors */
.requirement-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem .75rem; }
.requirement-exclude > summary { list-style: none; cursor: pointer; }
.requirement-exclude > summary::-webkit-details-marker { display: none; }
.requirement-exclude[open] { flex-basis: 100%; }
.requirement-exclude form { margin-top: .35rem; }
.requirement-more { margin-top: .75rem; }
.requirement-more > summary { cursor: pointer; color: var(--primary); font-size: .9rem; }
.checklist-filter { display: block; width: 100%; margin-bottom: .75rem; }
.checklist-filter[hidden] { display: none; }
.checklist-group { padding: 0; overflow: hidden; }
.checklist-group > summary { display: flex; align-items: baseline; gap: .5rem; padding: .8rem 1rem; cursor: pointer; list-style: none; }
.checklist-group > summary::-webkit-details-marker { display: none; }
.checklist-group > summary::after { content: "展开"; margin-left: auto; font-size: .8rem; color: var(--muted); }
.checklist-group[open] > summary::after { content: "收起"; }
.checklist-rows { border-top: 1px solid #ece4d8; }
.checklist-row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; padding: .6rem 1rem; border-bottom: 1px solid #ece4d8; cursor: pointer; }
.checklist-row[hidden] { display: none; }
.checklist-row:last-child { border-bottom: 0; }
.checklist-row:has(input:checked) { background: var(--ok-bg); }
.checklist-row input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin: 0; flex-shrink: 0; accent-color: #2f7a3d; }
.checklist-name { font-weight: 600; }
.checklist-when { margin-left: auto; }
@media (max-width: 899px) {
  .has-tabbar .checklist-bar { bottom: calc(var(--tabbar-h) + .5rem + env(safe-area-inset-bottom)); }
}
.practice-plan-label { margin: .75rem 0 0; }
.practice-plan-days { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .75rem; }
.practice-plan-days label { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: .9rem; }
.practice-plan-days label:has(input:checked) { border-color: var(--primary); background: var(--danger-bg); color: var(--primary-dark); font-weight: 600; }
.practice-plan-days label.is-past { color: var(--muted); }
.practice-plan-days input { margin: 0; accent-color: var(--primary); }
.practice-plan-week { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #ece4d8; }
.practice-plan-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
.practice-plan-week > p { margin: .35rem 0; }
.practice-plan-warn { color: var(--warn); }
.practice-plan-edit > summary { display: inline-block; cursor: pointer; color: var(--primary); font-size: .875rem; list-style: none; }
.practice-plan-edit > summary::-webkit-details-marker { display: none; }
.practice-plan-reset { margin-top: .5rem; }
.checklist-bar { position: sticky; bottom: .75rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; padding: .7rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 -2px 14px rgba(31, 26, 23, .12); }
.table tr.is-current td { background: #fff7d6; }
.duty-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.achievement-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.achievement { text-align: center; }
.achievement .ach-icon { width: 3.2rem; height: 3.2rem; margin: 0 auto .5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 700; background: #f3ece2; color: #6b6257; }
.achievement.is-earned .ach-icon { background: #f5c518; color: #2b1d14; }
.achievement.is-locked { opacity: .7; }
.achievement.is-locked .ach-icon { background: #2b2b2b; color: #f3ece2; }
.achievement h3 { margin: .2rem 0 .4rem; }
.ach-group { margin-bottom: 1.75rem; }
.ach-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; margin: 0 0 .8rem; font-size: 1.15rem; }
.ach-group-head .small { font-weight: 400; }
.ach-icon-sm { display: inline-flex; width: 1.6rem; height: 1.6rem; border-radius: 50%; align-items: center; justify-content: center; background: #f5c518; color: #2b1d14; font-size: .85rem; font-weight: 700; }


.wk-item.wk-cont { opacity: .7; font-size: .8rem; }

.period-span { display: block; font-size: .72rem; font-weight: 400; color: var(--muted); }
.avail .cell-static { display: block; min-width: 2.2rem; height: 1.9rem; background: var(--surface); }
.avail .cell-static.is-free { background: #5fae6e; }
.matrix thead th .period-span { white-space: nowrap; }
.board-title { margin: .75rem 0 .35rem; }
.board { border-collapse: collapse; width: 100%; min-width: 760px; table-layout: fixed; }
.board th, .board td { border: 1px solid var(--border); padding: .35rem .4rem; vertical-align: top; font-size: .8rem; }
.board thead th { background: var(--stage); color: #fff; text-align: center; }
.board thead .period-span { color: rgba(255, 255, 255, .75); }
.board tbody th { background: #f6f1ea; width: 6.5rem; text-align: left; white-space: nowrap; font-weight: 600; }
.board td { position: relative; height: 4.5rem; }
.board td.board-open:hover { background: #f1f8f2; }
.board td.board-past { background: #f4f1ed; color: var(--muted); }
.board .wk-item { position: relative; z-index: 1; display: block; color: var(--text); font-size: .76rem; }
.board .wk-item:hover { text-decoration: none; outline: 2px solid var(--primary); }
.board-names { display: flex; flex-wrap: wrap; gap: .1rem .45rem; overflow-wrap: anywhere; }
.board-count { margin-top: .2rem; font-size: .72rem; color: var(--muted); }
.board-count.all-free { color: #2f7a3d; font-weight: 600; }
.board-add { display: block; margin-top: .15rem; font-size: .72rem; color: var(--primary); opacity: .55; }
.board-add::after { content: ""; position: absolute; inset: 0; }
.board-add:focus-visible { opacity: 1; }
.board td.board-open:hover .board-add { opacity: 1; }
.plan { position: relative; }
.board td.board-planned { background: #e3f3e6; }
.board td.board-open.board-planned:hover { background: #d3ecd9; }
.board td.board-published { background: #f1f8f2; }
.board td.is-picking { outline: 2px solid #2f7a3d; outline-offset: -2px; }
.board .wk-planned { background: #cfe9d5; border-left-color: #2f7a3d; }
.board .wk-published { background: #fff; border-left-color: #2f7a3d; }
.plan-confirm { display: flex; justify-content: flex-end; margin-top: .6rem; }
.plan-confirm-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem .75rem; }
.plan-confirm-form p { margin: 0; }
.slot-pop {
  position: absolute; z-index: 25; width: 21rem; max-width: 100%; max-height: 80vh; overflow-y: auto;
  padding: .9rem 1rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.slot-pop[hidden], .slot-pop [hidden] { display: none !important; }
.slot-pop-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.slot-pop-head h3 { margin: 0; font-size: 1.05rem; }
.slot-pop-close { border: 0; background: none; font-size: 1.4rem; line-height: 1; padding: .2rem .45rem; cursor: pointer; color: var(--muted); }
.slot-pop-when { margin: .2rem 0 .6rem; color: #2f7a3d; font-weight: 600; font-size: .9rem; }
.slot-people, .slot-modes { display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.slot-people .check, .slot-modes .check { display: inline-flex; align-items: center; gap: .25rem; }
.slot-pop .actions { margin-top: .4rem; }
@media (max-width: 640px) {
  .slot-pop { position: fixed; left: 0; right: 0; bottom: 0; width: auto; border-radius: 16px 16px 0 0; }
}
.page-sub { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }
input[type=time] {
  width: 100%; min-height: 44px; padding: .55rem .75rem;
  font: inherit; font-size: 16px; color: var(--text);
  background: #fff; border: 1px solid #d8cfc3; border-radius: 10px;
}

/* plan board: venues other crews already hold in a period */
.board-held { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.board-held li { padding: .05rem .3rem; border-radius: 4px; background: #ebe7e1; color: #4d453f; font-size: .7rem; line-height: 1.45; overflow-wrap: anywhere; }
.board-held .held-venue { font-weight: 700; }
.board-held .held-full { display: inline-block; margin-left: .25rem; padding: 0 .3rem; border-radius: 999px; background: var(--primary); color: #fff; font-size: .64rem; font-weight: 700; }
.board-held li.is-full { background: var(--danger-bg); color: #8a1c16; }
.plan-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; color: var(--muted); }
.board-held-sample { display: inline-block; padding: 0 .35rem; border-radius: 4px; background: #ebe7e1; color: #4d453f; font-size: .72rem; font-weight: 700; }
.board-held-sample.is-full { background: var(--danger-bg); color: #8a1c16; }
.slot-held { margin: .35rem 0 0; padding: .35rem .55rem; border-radius: 8px; background: #f3f0eb; color: #4d453f; font-size: .82rem; }
.slot-held.is-full { background: var(--danger-bg); color: #8a1c16; font-weight: 600; }

/* venues page */
.venue-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.book-menu { position: relative; }
.book-menu > summary { list-style: none; cursor: pointer; }
.book-menu > summary::-webkit-details-marker { display: none; }
.book-menu > summary::after {
  content: ""; width: .4rem; height: .4rem; margin: -.2rem 0 0 .5rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.book-menu[open] > summary::after { margin-top: .2rem; transform: rotate(-135deg); }
.book-menu-panel {
  position: absolute; left: 0; top: calc(100% + .4rem); z-index: 30;
  width: min(18rem, calc(100vw - 2rem)); max-height: min(60vh, 22rem); overflow-y: auto; padding: .35rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(31, 26, 23, .16);
}
.book-menu-head { margin: .3rem .55rem .35rem; color: var(--muted); font-size: .8rem; }
.book-menu-panel a { display: flex; flex-direction: column; padding: .5rem .6rem; border-radius: 8px; color: var(--text); font-weight: 600; }
.book-menu-panel a span { color: var(--muted); font-size: .78rem; font-weight: 400; }
.book-menu-panel a:hover, .book-menu-panel a:focus-visible { background: #f6f1ea; text-decoration: none; }
.venue-tabs { margin-bottom: 1rem; }
.venue-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
.venue-bar .week-nav { margin: 0; }
.venue-info { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; }
.venue-info h2 { margin: 0 .25rem 0 0; font-size: 1.25rem; }
.venue-note { color: var(--muted); font-size: .85rem; }
.venue-legend { display: flex; flex-wrap: wrap; align-items: center; row-gap: .3rem; margin: 0 0 .5rem; }
.legend .st.vn-free { background: #fff; border-color: #c9bdb0; }
.legend .st.vn-used { background: #eef7ef; border-color: #2f7a3d; border-left-width: 4px; }
.legend .st.st-taken { background: #fbe9e7; border-color: var(--primary); border-left-width: 4px; }
.legend .st.st-busy { background: repeating-linear-gradient(135deg, #e6dfd5 0 3px, #f6f2ec 3px 6px); border-color: #d9d1c6; }
.venue-wrap { margin-bottom: 1.25rem; }
.venue-matrix { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.venue-matrix th, .venue-matrix td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.venue-matrix tr > :last-child { border-right: 0; }
.venue-matrix tbody tr:last-child > * { border-bottom: 0; }
.venue-matrix thead th {
  padding: .55rem .3rem; border-color: rgba(255, 255, 255, .12);
  background: var(--stage); color: #fff; font-size: .86rem; font-weight: 600; text-align: center; white-space: nowrap;
}
.venue-matrix thead th:first-child { position: sticky; left: 0; z-index: 2; width: 6rem; }
.venue-matrix tbody th .period-span { margin-top: .1rem; white-space: nowrap; }
.venue-matrix tbody th { position: sticky; left: 0; z-index: 1; padding: .45rem .65rem; background: #f6f1ea; text-align: left; vertical-align: middle; }
.vm-weekday { display: flex; align-items: center; justify-content: center; gap: .3rem; font-size: .95rem; font-weight: 700; }
.vm-weekday .today-tag { margin: 0; }
.vm-day { display: block; color: rgba(255, 255, 255, .7); font-size: .76rem; font-weight: 500; }
.vm-period { display: block; font-size: .92rem; font-weight: 700; }
.venue-matrix td { height: 3.75rem; padding: .35rem; background: #fff; font-size: .8rem; text-align: left; vertical-align: top; }
.venue-matrix td.vn-used { background: #eef7ef; }
.venue-matrix td.st-taken { background: #fbe9e7; color: inherit; }
.venue-matrix td.st-busy {
  background: repeating-linear-gradient(135deg, #efe9e1 0 6px, #f8f5f0 6px 12px);
  color: #a2978d; font-size: .75rem; text-align: center; vertical-align: middle;
}
.vn-crew {
  display: block; margin: 0 0 .2rem; padding: .15rem .4rem; border-left: 3px solid #2f7a3d; border-radius: 5px;
  background: #fff; box-shadow: 0 0 0 1px rgba(47, 122, 61, .16); color: #1f3d24;
  font-size: .78rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere;
}
.venue-matrix td.st-taken .vn-crew { border-left-color: var(--primary); box-shadow: 0 0 0 1px rgba(179, 38, 30, .18); color: #7a1f19; }
.vn-cap { display: block; margin-top: .15rem; color: var(--muted); font-size: .7rem; }
.venue-matrix td.st-taken .vn-cap { color: #8a1c16; font-weight: 700; }
.venue-matrix thead th.is-today { background: #2e2817; box-shadow: inset 0 -3px 0 var(--spot); }
.venue-matrix thead th.is-past { color: rgba(255, 255, 255, .5); }
.venue-matrix thead th.is-past .vm-day { color: rgba(255, 255, 255, .4); }
.venue-matrix td.is-today { box-shadow: inset 2px 0 0 rgba(244, 208, 63, .45), inset -2px 0 0 rgba(244, 208, 63, .45); }
.venue-matrix td.is-today.vn-free { background: #fffdf2; }
.venue-matrix td.is-past.vn-free, .venue-matrix td.is-past.vn-used { background: #faf8f5; }
.venue-matrix td.is-past > * { opacity: .55; }
.today-tag { display: inline-block; margin-left: .3rem; padding: 0 .35rem; border-radius: 999px; background: var(--spot); color: #4a3b00; font-size: .68rem; font-weight: 700; }
.my-bookings .card-head { margin-bottom: .35rem; }
.bk-list { list-style: none; margin: 0; padding: 0; }
.bk-row { display: flex; align-items: center; gap: .85rem; padding: .7rem 0; border-top: 1px solid var(--border); }
.bk-row:first-child { border-top: 0; }
.bk-when {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 4.6rem; margin: 0; padding: .35rem .2rem; border-radius: 10px; background: #f6f1ea; line-height: 1.3;
}
.bk-when strong { font-size: .88rem; }
.bk-when span { color: var(--muted); font-size: .75rem; }
.bk-main { flex: 1; min-width: 0; }
.bk-slot { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; margin: 0; }
.bk-venue { font-weight: 600; }
.bk-meta { margin: .1rem 0 0; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.bk-row form { flex: none; margin: 0; }
.bk-empty { margin: 0; color: var(--muted); }
@media (min-width: 900px) {
  .bk-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .bk-row:nth-child(2) { border-top: 0; }
}
@media (max-width: 640px) {
  .venue-bar .week-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; gap: .4rem; }
  .venue-bar .week-nav strong { font-size: .875rem; text-align: center; }
  .venue-bar .week-nav > a:not(.btn) { grid-column: 1 / -1; justify-self: center; }
  .venue-matrix { min-width: 680px; }
  .venue-matrix thead th:first-child { width: 5.25rem; }
  .venue-matrix tbody th { padding: .4rem .5rem; box-shadow: 2px 0 4px rgba(31, 26, 23, .06); }
}

/* notifications */
.ntf-unread-count[hidden] { display: none; }
.ntf-tabs { margin-bottom: 1rem; }
.tab-count { display: inline-block; min-width: 1.3rem; margin-left: .3rem; padding: 0 .35rem; border-radius: 999px; background: var(--primary); color: #fff; font-size: .72rem; line-height: 1.3rem; text-align: center; }
.tabs a[aria-current="page"] .tab-count { background: #fff; color: var(--primary); }
.ntf-group { margin-bottom: 1.25rem; }
.ntf-day { margin: 0 0 .45rem; color: var(--muted); font-size: .85rem; font-weight: 600; letter-spacing: .04em; }
.ntf-list { list-style: none; margin: 0; padding: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.ntf { position: relative; display: flex; gap: .85rem; padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
.ntf:last-child { border-bottom: 0; }
.ntf.is-unread { background: #fffaf1; }
.ntf.is-unread::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--primary); }
.ntf-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #efe9e1; color: #6b625c; }
.ntf-icon svg { width: 1.2rem; height: 1.2rem; }
.ntf-icon.ntf-icon-sm { width: 2rem; height: 2rem; }
.ntf-icon.ntf-icon-sm svg { width: 1rem; height: 1rem; }
.ntf-published .ntf-icon, .ntf-week .ntf-icon { background: #e3f3e6; color: #2f7a3d; }
.ntf-updated .ntf-icon { background: var(--warn-bg); color: var(--warn); }
.ntf-cancelled .ntf-icon { background: var(--danger-bg); color: var(--danger); }
.ntf-removed .ntf-icon { background: #ece9e4; color: #6b625c; }
.ntf-booking .ntf-icon { background: #fde9df; color: #b4441c; }
.ntf-notice .ntf-icon { background: var(--info-bg); color: #2d5aa0; }
.ntf-main { flex: 1; min-width: 0; }
.ntf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; color: var(--muted); font-size: .78rem; }
.ntf-kind { color: #4d453f; font-weight: 600; }
.ntf-dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.ntf.is-unread .ntf-dot { display: inline-block; }
.ntf-title { margin: .15rem 0 .25rem; font-size: 1rem; font-weight: 500; line-height: 1.4; }
.ntf.is-unread .ntf-title { font-weight: 700; }
.ntf-title a { color: var(--text); }
.ntf-title a:hover { color: var(--primary); }
.ntf-body { margin: 0; color: #4d453f; font-size: .9rem; overflow-wrap: anywhere; }
.ntf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; margin-top: .5rem; }
.ntf-actions form { margin: 0; }
.ntf-actions .link-button { padding: .2rem 0; color: var(--muted); font-size: .85rem; }
.ntf-actions .link-button:hover { color: var(--primary); }
.ntf-empty { padding: 2.5rem 1rem; text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); }
.ntf-empty p { margin: .2rem 0; }
.ntf-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; margin-bottom: .5rem; border-radius: 50%; background: #f3ece2; color: #a0968c; }
.ntf-empty-icon svg { width: 1.6rem; height: 1.6rem; }
.bell-unread { margin-left: .35rem; padding: 0 .4rem; border-radius: 999px; background: var(--danger-bg); color: #8a1c16; font-size: .72rem; font-weight: 600; }
.bell-list a { display: flex; align-items: flex-start; gap: .65rem; }
.bell-text { flex: 1; min-width: 0; }
.bell-list li.unread { background: #fffaf1; }
.bell-list .bell-empty { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.bell-empty .ntf-empty-icon { width: 2.6rem; height: 2.6rem; margin: 0; }
.ntf-mini { list-style: none; margin: 0; padding: 0; }
.ntf-mini li + li { border-top: 1px solid var(--border); }
.ntf-mini a { display: flex; align-items: flex-start; gap: .7rem; padding: .6rem .25rem; border-radius: 8px; color: var(--text); }
.ntf-mini a:hover { background: #f8f4ee; text-decoration: none; }
.ntf-mini-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ntf-mini .is-unread strong::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .35rem; border-radius: 50%; background: var(--primary); vertical-align: .1em; }
.ntf-mini-body { overflow: hidden; color: #4d453f; font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.ntf-mini-meta { color: var(--muted); font-size: .75rem; }
.ntf-mini-meta b { color: var(--primary); font-weight: 600; }

/* home: greeting, month calendar and the week ahead */
.page-home .page { max-width: none; }
.cal { position: relative; margin-bottom: 1.5rem; }
.cal.is-busy .cal-table { opacity: .6; transition: opacity .15s; }
.cal-view {
  --cal-rows: 6;
  --cal-h: 4.8rem;
  display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "hello" "card" "agenda";
}
.cal-view.rows-5 { --cal-rows: 5; }
.cal-view.rows-4 { --cal-rows: 4; }
.cal-hello { grid-area: hello; }
.cal-card { grid-area: card; }
.cal-agenda { grid-area: agenda; }
.cal-view > .cal-pop.is-static { grid-column: 1 / -1; }

.cal-hello {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
  padding: 1.15rem 1.3rem; overflow: hidden; border-radius: 20px; color: #fff;
  background:
    radial-gradient(70% 140% at 100% 0%, rgba(244, 208, 63, .26), transparent 60%),
    radial-gradient(50% 120% at 0% 100%, rgba(179, 38, 30, .32), transparent 70%),
    var(--stage);
  box-shadow: 0 10px 30px rgba(29, 27, 27, .16);
}
.cal-hello.is-solo { margin-bottom: 1.25rem; }
.cal-hello-text { min-width: 0; }
.cal-hello-date { margin: 0 0 .2rem; color: rgba(255, 255, 255, .6); font-size: .78rem; letter-spacing: .14em; }
.cal-hello h1 { margin: 0; color: #fff; font-size: 1.45rem; letter-spacing: .03em; }
.cal-hello-tag { margin: .3rem 0 0; color: var(--spot); font-size: .85rem; letter-spacing: .08em; }

.ticket {
  position: relative; display: flex; flex: 0 1 21rem; min-width: 0;
  border-radius: 12px; background: var(--spot); color: #2b1d14;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
  transition: transform .15s ease, box-shadow .15s ease;
}
a.ticket:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0, 0, 0, .34); }
.ticket::before, .ticket::after { content: ""; position: absolute; left: calc(3.5rem - 7px); width: 14px; height: 14px; border-radius: 50%; background: var(--stage); }
.ticket::before { top: -7px; }
.ticket::after { bottom: -7px; }
.ticket-stub { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.5rem; padding: .45rem 0; border-right: 2px dashed rgba(43, 29, 20, .28); line-height: 1.15; }
.ticket-stub b { font-family: var(--display); font-size: 1.65rem; line-height: 1.05; }
.ticket-stub small { font-size: .68rem; font-weight: 700; opacity: .75; }
.ticket-body { display: flex; flex-direction: column; min-width: 0; padding: .5rem .85rem .55rem; line-height: 1.4; }
.ticket-tag { font-size: .7rem; font-weight: 800; letter-spacing: .16em; opacity: .7; }
.ticket-when { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ticket-what, .ticket-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-what { font-size: .88rem; font-weight: 600; }
.ticket-where { color: rgba(43, 29, 20, .7); font-size: .8rem; }
.ticket.is-live .ticket-tag::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: .35rem; border-radius: 50%; background: var(--primary); vertical-align: .1em; animation: ticket-live 1.4s ease-in-out infinite; }
@keyframes ticket-live { 50% { opacity: .2; } }
.ticket.is-empty { display: block; margin: 0; padding: .65rem .9rem; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .72); box-shadow: none; font-size: .88rem; }
.ticket.is-empty::before, .ticket.is-empty::after { display: none; }

.cal-card { min-width: 0; padding: 1rem 1.1rem .7rem; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .25rem; }
.cal-title { display: flex; align-items: center; gap: .65rem; margin: 0; font-size: 1rem; }
.cal-month { display: flex; align-items: baseline; gap: .1rem; font-size: 1.05rem; font-weight: 700; line-height: 1; }
.cal-month b { font-family: var(--display); font-size: 2.35rem; letter-spacing: -.01em; }
.cal-sub { display: flex; flex-direction: column; gap: .1rem; padding-left: .65rem; border-left: 1px solid var(--border); line-height: 1.2; }
.cal-kicker { color: var(--primary); font-size: .7rem; font-weight: 700; letter-spacing: .26em; }
.cal-sub small { color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .14em; }
.cal-nav { display: flex; align-items: center; gap: .4rem; }
.cal-back { padding: .3rem .85rem; border-radius: 999px; background: #f3ece3; color: var(--text); font-size: .82rem; font-weight: 600; }
.cal-back:hover { background: #ebe1d4; text-decoration: none; }
.cal-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); transition: border-color .15s, background-color .15s, color .15s; }
.cal-nav-btn:hover { border-color: var(--primary); background: #fdf2f0; color: var(--primary); text-decoration: none; }
.cal-nav-btn svg { width: 18px; height: 18px; }
.cal-status { position: absolute; top: .9rem; left: 50%; z-index: 5; margin: 0; padding: .3rem .9rem; border-radius: 999px; background: #2f7a3d; color: #fff; font-size: .85rem; box-shadow: var(--shadow); transform: translateX(-50%); }
.cal-status:empty { display: none; }
.cal-table { width: calc(100% + 8px); margin: 0 -4px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.cal-table th { padding: .1rem 0 0; color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-align: center; }
.cal-table th.is-weekend { color: var(--primary); }
.cal-day { position: relative; height: var(--cal-h); padding: .2rem .25rem .25rem; overflow: hidden; vertical-align: top; background: #f8f4ee; border-radius: 10px; cursor: pointer; transition: background-color .15s; }
.cal-day:hover { background-color: #f1e9de; }
.cal-day.is-weekend { background-color: #f9efe9; }
.cal-day.is-weekend:hover { background-color: #f3e3da; }
.cal-day.is-other { background: transparent; box-shadow: inset 0 0 0 1px #efe8de; }
.cal-day.is-other:hover { background: #f8f4ee; }
.cal-day.is-today, .cal-day.is-today:hover { background: radial-gradient(120% 90% at 50% -20%, rgba(244, 208, 63, .42), transparent 65%), var(--stage); box-shadow: 0 6px 16px rgba(29, 27, 27, .25); }
.cal-day.is-picking, .cal-day.is-other.is-picking { box-shadow: inset 0 0 0 2px var(--primary); }
.cal-day.is-today.is-picking { box-shadow: 0 0 0 2px var(--primary), 0 6px 16px rgba(29, 27, 27, .25); }
.cal-date { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .25rem; border-radius: 999px; color: var(--text); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-date:hover { background: rgba(31, 26, 23, .08); text-decoration: none; }
.cal-day.is-weekend .cal-date { color: var(--primary); }
.cal-day.is-past .cal-date { color: #9a9088; }
.cal-day.is-other .cal-date { color: #c2b8ae; }
.cal-day.is-today .cal-date { background: var(--spot); color: #2b1d14; }
.cal-more { position: absolute; top: .3rem; right: .3rem; padding: 0 .35rem; border-radius: 999px; background: rgba(31, 26, 23, .08); color: var(--muted); font-size: .66rem; font-weight: 700; line-height: 1.5; }
.cal-more[hidden] { display: none; }
.cal-day.is-today .cal-more { background: rgba(255, 255, 255, .16); color: #fff; }
.cal-items { list-style: none; margin: .1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: calc(var(--cal-h) - 1.95rem); overflow: hidden; }
.cal-items .is-extra, .cal-items .is-folded { display: none; }
.cal-item { display: flex; align-items: baseline; gap: .25rem; width: 100%; padding: 0 .35rem; overflow: hidden; border: 0; border-radius: 5px; font: inherit; font-size: .7rem; line-height: 1.4; text-align: left; white-space: nowrap; cursor: pointer; }
.cal-item:hover { text-decoration: none; filter: brightness(.96); }
.cal-rehearsal { background: #f7dcd8; box-shadow: inset 3px 0 0 var(--primary); color: #6d1712; }
.cal-rehearsal.is-done { opacity: .6; }
.cal-event { background: #e2ebf8; box-shadow: inset 3px 0 0 #3b6fb6; color: #1f3f6e; }
.cal-day.is-today .cal-rehearsal { background: var(--primary); box-shadow: none; color: #fff; }
.cal-day.is-today .cal-event { background: rgba(255, 255, 255, .15); box-shadow: inset 3px 0 0 #8fb3ea; color: #fff; }
.cal-time { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cal-extra, .cal-edit { display: none; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; margin: .4rem 0 0; color: var(--muted); font-size: .76rem; }
.cal-key { display: inline-block; width: .6rem; height: .6rem; border-radius: 3px; }
.cal-key-rehearsal { background: var(--primary); }
.cal-key-event { margin-left: .7rem; background: #3b6fb6; }
.cal-count { padding: 0 .45rem; border-radius: 999px; background: #f7dcd8; color: #6d1712; font-weight: 600; }
.cal-tip { flex: 1 1 0; min-width: 0; margin-left: .6rem; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

.cal-agenda {
  --ag-ink: var(--text); --ag-muted: var(--muted); --ag-line: var(--border); --ag-hover: #f6f1ea;
  min-width: 0; margin: 0; padding: 1rem 1.1rem; color: var(--ag-ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow);
}
.cal-agenda h2 { margin: 0 0 .6rem; color: var(--ag-muted); font-size: .75rem; font-weight: 700; letter-spacing: .22em; }
.agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.agenda-date { margin: 0 0 .3rem; color: var(--ag-muted); font-size: .75rem; letter-spacing: .04em; }
.agenda-date b { margin-right: .45rem; color: var(--ag-ink); font-size: .88rem; }
.agenda-items { list-style: none; margin: 0 0 0 .2rem; padding: 0; border-left: 1px solid var(--ag-line); }
.agenda-row { position: relative; display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .5rem; padding: .28rem .4rem .28rem .8rem; border-radius: 8px; color: var(--ag-ink); }
a.agenda-row:hover { background: var(--ag-hover); text-decoration: none; }
.agenda-row::before { content: ""; position: absolute; top: .72rem; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: #3b6fb6; }
.is-rehearsal .agenda-row::before { background: var(--primary); box-shadow: 0 0 0 3px rgba(179, 38, 30, .22); }
.agenda-time { color: var(--ag-muted); font-size: .78rem; line-height: 1.6; font-variant-numeric: tabular-nums; }
.agenda-text { display: flex; flex-direction: column; min-width: 0; font-size: .88rem; line-height: 1.45; }
.agenda-text strong { font-weight: 600; overflow-wrap: anywhere; }
.agenda-text small { color: var(--ag-muted); font-size: .76rem; }
.agenda-item.is-done { opacity: .55; }
.agenda-empty { margin: 0; color: var(--ag-muted); font-size: .85rem; }

.cal-pop {
  position: absolute; z-index: 25; width: 22rem; max-width: 100%; max-height: 80vh; overflow-y: auto;
  padding: .9rem 1rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(29, 27, 27, .22);
}
.cal-pop[hidden], .cal-pop [hidden] { display: none !important; }
.cal-pop.is-static { position: static; width: auto; max-height: none; box-shadow: var(--shadow); }
.cal-pop-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.cal-pop-head h3 { margin: 0; font-size: 1.05rem; }
.cal-pop-close { padding: .1rem .45rem; color: var(--muted); font-size: 1.4rem; line-height: 1; }
.cal-pop-close:hover { color: var(--text); text-decoration: none; }
.cal-pop-list { list-style: none; margin: 0 0 .7rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.cal-pop-list .cal-item { display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem; padding: .4rem .55rem .4rem .7rem; font-size: .88rem; white-space: normal; }
.cal-pop-list .cal-time { display: none; }
.cal-pop-list .cal-text { font-weight: 600; white-space: normal; }
.cal-pop-list .cal-extra { display: block; grid-column: 1; font-size: .78rem; opacity: .85; }
.cal-pop-list .cal-edit { display: block; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #3b6fb6; font-size: .8rem; font-weight: 700; }
.cal-form { padding-top: .6rem; border-top: 1px solid var(--border); }
.cal-pop-list[hidden] + .cal-form { padding-top: 0; border-top: 0; }
.cal-form-title { margin: 0 0 .5rem; font-weight: 700; }
.cal-form .field { margin-bottom: .6rem; }
.cal-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 .5rem; }
.cal-form-row input { min-width: 0; }
.cal-f-day { grid-column: 1 / -1; }
.cal-form .actions { margin-top: .4rem; }

@media (min-width: 900px) {
  .cal-view { --cal-chrome: 384px; --cal-h: clamp(3.4rem, calc((100vh - var(--cal-chrome)) / var(--cal-rows)), 6.6rem); }
}
@media (min-width: 1000px) {
  .cal-view {
    --cal-chrome: 250px;
    grid-template-columns: minmax(0, 1fr) clamp(15rem, 25vw, 19.5rem);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "card hello" "card agenda";
    gap: 0 1.1rem;
  }
  .cal-hello {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 1.1rem;
    padding: 1.35rem 1.25rem 1.15rem; border-radius: 20px 20px 0 0; box-shadow: none;
    background: radial-gradient(120% 70% at 100% 0%, rgba(244, 208, 63, .26), transparent 60%), var(--stage);
  }
  .ticket { flex: none; }
  .cal-agenda {
    --ag-ink: #fff; --ag-muted: rgba(255, 255, 255, .55); --ag-line: rgba(255, 255, 255, .14); --ag-hover: rgba(255, 255, 255, .07);
    contain: size; overflow-y: auto; padding: 0 1.25rem 1.25rem;
    background: var(--stage); border: 0; border-radius: 0 0 20px 20px; box-shadow: none;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent;
  }
  .cal-agenda h2 { padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .1); }
  .agenda { display: block; }
  .agenda > li + li { margin-top: .85rem; }
  .agenda-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 640px) {
  .cal-view { --cal-h: 4.15rem; gap: .85rem; }
  .cal-hello { gap: .85rem; padding: 1rem 1.05rem; border-radius: 16px; }
  .cal-hello h1 { font-size: 1.25rem; }
  .ticket { flex: 1 1 100%; }
  .cal-card { padding: .8rem .55rem .6rem; border-radius: 16px; }
  .cal-head, .cal-legend { padding: 0 .25rem; }
  .cal-month b { font-size: 2rem; }
  .cal-table { width: calc(100% + 6px); margin: 0 -3px; border-spacing: 3px; }
  .cal-day { padding: .12rem; border-radius: 8px; }
  .cal-date { min-width: 1.3rem; height: 1.3rem; font-size: .74rem; }
  .cal-more { top: .15rem; right: .15rem; padding: 0 .25rem; font-size: .6rem; }
  .cal-items { max-height: calc(var(--cal-h) - 1.75rem); }
  .cal-item { padding: 0 .15rem 0 .25rem; font-size: .6rem; }
  .cal-items .cal-rehearsal .cal-text, .cal-items .cal-event.has-time .cal-text { display: none; }
  .cal-tip { flex-basis: 100%; margin-left: 0; text-align: left; white-space: normal; }
  .cal-agenda { padding: .9rem 1rem; border-radius: 16px; }
  .cal-pop:not(.is-static) { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 45; width: auto; max-height: 85vh; border-radius: 16px 16px 0 0; }
}

/* crew members */
.perm-list { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.perm-list.is-row { flex-direction: row; flex-wrap: wrap; gap: .35rem 1.1rem; }
.perm-list .check { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; white-space: nowrap; cursor: pointer; }
.perm-list .check.is-locked { color: var(--muted); cursor: not-allowed; }
.row-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.row-actions form { margin: 0; }
@media (max-width: 640px) {
  .member-table thead { display: none; }
  .member-table, .member-table tbody, .member-table td { display: block; }
  .member-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .55rem .75rem; padding: .8rem .85rem; border-bottom: 1px solid var(--border); }
  .member-table tr:last-child { border-bottom: 0; }
  .member-table td { padding: 0; border-bottom: 0; }
  .member-table td:nth-child(1), .member-table td:nth-child(2) { grid-column: 1 / -1; }
  .member-table td:nth-child(1) br { display: none; }
  .member-table td:nth-child(1) .muted { margin-left: .4rem; }
  .member-table .picker { max-width: none; }
  .member-table .perm-list { flex-direction: row; flex-wrap: wrap; gap: .3rem 1rem; }
}

/* guided tour: the page dims, one control stays lit and a note points at it */
.tour { position: fixed; inset: 0; z-index: 1000; }
.tour [hidden] { display: none !important; }
.tour.is-plain { background: rgba(24, 18, 14, .62); }
.tour-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 200vmax rgba(24, 18, 14, .62); outline: 3px solid var(--spot); pointer-events: none; transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease; }
.tour-pop { position: fixed; width: min(21.5rem, calc(100vw - 24px)); padding: 1rem 1.1rem .95rem; border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 18px 48px rgba(0, 0, 0, .32); }
.tour-pop.is-in { animation: tour-in .22s ease-out; }
.tour-pop::before { content: ""; position: absolute; left: var(--tour-arrow, 50%); width: 14px; height: 14px; margin-left: -7px; background: var(--surface); transform: rotate(45deg); }
.tour-pop[data-side="bottom"]::before { top: -7px; }
.tour-pop[data-side="top"]::before { bottom: -7px; }
.tour-pop[data-side="center"]::before, .tour-pop[data-side="over"]::before { display: none; }
.tour-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.tour-count { color: var(--primary); font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.tour-dots { display: flex; gap: 5px; }
.tour-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--border); transition: width .2s ease, background-color .2s ease; }
.tour-dots span.is-on { width: 16px; background: var(--primary); }
.tour-pop h3 { margin: .5rem 0 .3rem; font-size: 1.08rem; }
.tour-body { margin: 0; font-size: .92rem; line-height: 1.7; }
.tour-actions { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; }
.tour-skip { margin-right: auto; padding: .35rem 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: .88rem; cursor: pointer; }
.tour-skip:hover { color: var(--text); text-decoration: underline; }
.tour-skip[hidden] + .btn { margin-left: auto; }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tour-spot, .tour-dots span { transition: none; }
  .tour-pop.is-in { animation: none; }
}

/* resources: scripts and books */
.sidenav a.is-section { color: var(--primary); font-weight: 600; }
.sidenav a.is-section svg { color: currentColor; }
.lib-tabs { display: inline-flex; gap: 2px; margin-bottom: .9rem; padding: 3px; border-radius: 999px; background: #efe7dc; }
.lib-tabs a { padding: .3rem 1.1rem; border-radius: 999px; color: var(--muted); font-size: .9rem; font-weight: 600; }
.lib-tabs a:hover { color: var(--text); text-decoration: none; }
.lib-tabs a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(40, 20, 10, .14); }
.shelf-tabs { flex-wrap: nowrap; overflow-x: auto; margin-bottom: .75rem; padding-bottom: 2px; scrollbar-width: none; }
.shelf-tabs::-webkit-scrollbar { display: none; }
.shelf-tabs a { flex: none; white-space: nowrap; }
.shelf-tabs .tab-count, .shelf-tabs a[aria-current="page"] .tab-count { min-width: 0; margin-left: .3rem; padding: 0; background: none; color: inherit; opacity: .6; }
@media (min-width: 700px) { .shelf-tabs { flex-wrap: wrap; overflow: visible; } }
.book-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.book-card { display: flex; gap: .95rem; height: 100%; padding: .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); transition: box-shadow .15s ease, transform .15s ease; }
.book-card:hover { text-decoration: none; box-shadow: var(--shadow); transform: translateY(-2px); }
.book-info { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.book-title { font-size: 1.02rem; line-height: 1.35; }
.book-card .synopsis { color: var(--muted); font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-cover {
  position: relative; flex: none; display: flex; align-items: flex-end; overflow: hidden;
  width: 68px; aspect-ratio: 2 / 3; padding: .45rem .4rem .45rem .7rem; border-radius: 3px 8px 8px 3px;
  background: linear-gradient(160deg, #b3261e, #7d1913); color: #fff;
  font-family: "Songti SC", STSong, "Noto Serif SC", "Source Han Serif SC", SimSun, serif; font-size: .72rem; font-weight: 700; line-height: 1.3;
  box-shadow: inset 6px 0 0 rgba(0, 0, 0, .2), 0 6px 14px rgba(40, 20, 10, .22);
}
.book-cover::after { content: ""; position: absolute; top: 0; bottom: 0; left: 6px; width: 1px; background: rgba(255, 255, 255, .28); }
.book-cover > span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.book-cover.tone-1 { background: linear-gradient(160deg, #35505f, #1c2d38); }
.book-cover.tone-2 { background: linear-gradient(160deg, #7a5a30, #47331a); }
.book-cover.tone-3 { background: linear-gradient(160deg, #2f6553, #1b3b31); }
.book-cover.tone-4 { background: linear-gradient(160deg, #66436f, #3a2340); }
.book-cover.tone-5 { background: linear-gradient(160deg, #c99436, #8a5f17); }
.book-cover-lg { width: 112px; padding: .7rem .6rem .7rem 1rem; font-size: .95rem; }
.book-head { display: flex; align-items: flex-end; gap: 1.1rem; margin-bottom: 1.25rem; }
.book-head h1 { margin: 0 0 .3rem; }
.book-head p { margin: 0 0 .4rem; }
.file-row { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.file-row p { margin: 0 0 .4rem; }
.form-gap { margin-top: 1.5rem; }
.form-gap + .help { margin: -.35rem 0 .9rem; }
@media (prefers-reduced-motion: reduce) {
  .book-card { transition: none; }
  .book-card:hover { transform: none; }
}

/* finish: one coat of polish over the whole site, kept last so it wins over the sections above */
::selection { background: rgba(244, 208, 63, .45); }
body { background: linear-gradient(180deg, #f4eee4 0, var(--bg) 380px) no-repeat, var(--bg); }
h1, h2, h3 { color: #1a1513; }
h1 { letter-spacing: .01em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid rgba(179, 38, 30, .55); outline-offset: 2px; }

.topbar { border-bottom: 0; background: linear-gradient(180deg, #262121 0%, var(--stage) 100%); box-shadow: 0 2px 14px rgba(29, 27, 27, .2); }
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, #7d1913, var(--primary) 18%, #d2412f 50%, var(--primary) 82%, #7d1913);
}
.brand span { letter-spacing: .05em; }

.sidenav a { position: relative; font-weight: 500; transition: background-color .15s, color .15s; }
.sidenav nav > a[aria-current="page"]::before, .sidenav nav > a.is-open::before {
  content: ""; position: absolute; top: 50%; left: 0; width: 3px; height: 1rem;
  border-radius: 0 3px 3px 0; background: var(--primary); transform: translateY(-50%);
}
@media (min-width: 900px) and (max-height: 760px) {
  .sidenav { padding-top: .8rem; }
  .sidenav a { padding-top: .4rem; padding-bottom: .4rem; }
  .sidenav-sub a { padding-top: .22rem; padding-bottom: .22rem; }
  .sidenav-sep { margin: .3rem .25rem; }
}
.tabbar {
  background: rgba(255, 255, 255, .94); box-shadow: 0 -4px 16px rgba(31, 26, 23, .06);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.tabbar a { position: relative; }
.tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary); transform: translateX(-50%); }

.page-title { margin-bottom: 1.1rem; }
.page-title h1 { font-size: 1.55rem; }
.page-title h1::after { content: ""; display: block; width: 2.2rem; height: 3px; margin-top: .45rem; border-radius: 3px; background: linear-gradient(90deg, var(--primary), #e0663f); }
.card { padding: 1.1rem 1.2rem; border-color: #ebe3d8; border-radius: 14px; box-shadow: 0 1px 2px rgba(31, 26, 23, .04), 0 6px 20px rgba(31, 26, 23, .05); }
.card-head h2::before, .card > h2:first-child::before {
  content: ""; display: inline-block; width: 4px; height: .95em; margin-right: .5rem;
  border-radius: 2px; background: var(--primary); vertical-align: -.08em;
}
.empty { background: rgba(255, 255, 255, .65); border-color: #e0d6c9; }

.btn { font-weight: 600; box-shadow: 0 1px 2px rgba(31, 26, 23, .06); transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s; }
.btn:hover { background-color: #fbf8f4; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(180deg, #c42d24, var(--primary)); border-color: #a3221b; box-shadow: 0 1px 2px rgba(138, 28, 22, .3), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn-primary:hover { background: linear-gradient(180deg, #b3261e, var(--primary-dark)); border-color: var(--primary-dark); }
.btn-danger:hover { background-color: var(--danger-bg); border-color: #e8aaa4; }
.btn[disabled], .btn[disabled]:active { transform: none; }

input[type=text], input[type=email], input[type=password], input[type=search], input[type=number],
input[type=tel], input[type=url], input[type=date], input[type=time], input[type=file], select, textarea {
  border-color: #dcd3c7; transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: #c9bdae; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(179, 38, 30, .16); }

.table-wrap { border-color: #ebe3d8; box-shadow: 0 1px 2px rgba(31, 26, 23, .04); }
.table th { background: #f7f2ea; color: #574e47; font-size: .84rem; letter-spacing: .03em; }
.table tbody tr:hover td { background: #fcf9f5; }
.kv { border-color: #ebe3d8; }

.alert { border-left: 3px solid #8aa7d4; }
.alert-ok { border-left-color: #4c9a59; }
.alert-warn { border-left-color: #d69a2d; }
.alert-error, .alert-danger { border-left-color: var(--primary); }

.quick { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.quick a {
  position: relative; padding: 1rem 2.4rem 1rem 1.1rem; border-color: #ebe3d8;
  box-shadow: 0 1px 2px rgba(31, 26, 23, .04); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.quick a::after {
  content: ""; position: absolute; top: 50%; right: 1.1rem; width: .5rem; height: .5rem;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; color: #c4b8a9;
  transform: translateY(-50%) rotate(45deg); transition: color .15s, right .15s;
}
.quick a:hover { border-color: rgba(179, 38, 30, .45); box-shadow: var(--shadow); transform: translateY(-1px); }
.quick a:hover::after { right: .9rem; color: var(--primary); }
@media (max-width: 599px) {
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.script-card, .person-card, .stat { border-color: #ebe3d8; transition: border-color .15s, box-shadow .15s, transform .15s; }
.script-card:hover, .stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.person-card:hover { box-shadow: var(--shadow); }
.footer { letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  .btn, .quick a, .quick a::after, .script-card, .person-card, .stat, a.ticket { transition: none; }
  .btn:active, .quick a:hover, .script-card:hover, .stat:hover, a.ticket:hover { transform: none; }
  .ticket.is-live .ticket-tag::before { animation: none; }
}

/* personal settings: text size and calmer motion follow the account, not the device */
html[data-font="s"] { font-size: 93.75%; }
html[data-font="l"] { font-size: 112.5%; }
html[data-font="xl"] { font-size: 125%; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}
.js [data-nojs-submit], .js [data-settings-save] { display: none; }

.gear-button {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; color: #e9e4dc;
}
.gear-button:hover, .gear-button[aria-current="page"] { background: var(--stage-2); color: #fff; text-decoration: none; }
.gear-button:focus-visible { outline: 2px solid var(--spot); outline-offset: 1px; }
.gear-button svg { width: 22px; height: 22px; transition: transform .45s ease; }
.gear-button:hover svg { transform: rotate(60deg); }

.btn-quiet { background: none; border-color: transparent; color: var(--muted); }
.btn-quiet:hover { background: var(--danger-bg); border-color: transparent; color: var(--danger); }
input[type=file].sr-only { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; }
.file-button { position: relative; }
.file-button:focus-within { outline: 2px solid rgba(179, 38, 30, .35); outline-offset: 2px; }
.avatar { overflow: hidden; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* settings dialog (and the same panel as a page) */
.settings-dialog {
  width: min(680px, calc(100vw - 2rem)); max-width: none; max-height: min(86vh, 880px);
  padding: 0; border: 0; border-radius: 18px; overflow: hidden;
  background: var(--surface); color: var(--text); box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}
.settings-dialog[open] { display: flex; flex-direction: column; animation: settings-in .22s ease-out; }
.settings-dialog::backdrop { background: rgba(20, 16, 14, .55); backdrop-filter: blur(3px); }
@keyframes settings-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes settings-up { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
.settings-dialog .settings-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.settings-loading { margin: 0; padding: 3rem 1rem; color: var(--muted); text-align: center; }
.settings-head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1rem .85rem 1.25rem; border-bottom: 1px solid var(--border); }
.settings-head h2 { margin: 0 auto 0 0; font-size: 1.25rem; }
.settings-status { color: #1b5e20; font-size: .85rem; }
.settings-status.is-bad { color: var(--danger); }
.settings-x {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer;
}
.settings-x:hover { background: #f3eee7; color: var(--text); }
.settings-x svg { width: 20px; height: 20px; }
.settings-jump {
  display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none;
  padding: .55rem 1.25rem; border-bottom: 1px solid var(--border); background: #fbf8f4;
}
.settings-jump::-webkit-scrollbar { display: none; }
.settings-jump a {
  flex: none; padding: .2rem .75rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--muted); font-size: .85rem;
}
.settings-jump a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.settings-head, .settings-jump { flex-shrink: 0; }
.settings-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 1.25rem 1.25rem; }
.settings-section { padding-top: 1.1rem; scroll-margin-top: .25rem; border-radius: 8px; }
.settings-section h3 { margin: 0 0 .2rem; color: var(--primary); font-size: .8rem; font-weight: 700; letter-spacing: .08em; }
.settings-section.is-flash { animation: settings-flash 1.4s ease-out; }
@keyframes settings-flash { 0%, 35% { background: #fdf6d8; } 100% { background: transparent; } }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .8rem 0; border-bottom: 1px solid #f0ebe4; }
.settings-section .setting-row:last-child { border-bottom: 0; }
label.setting-row { cursor: pointer; }
.setting-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.setting-label { font-weight: 600; overflow-wrap: anywhere; }
.setting-desc { color: var(--muted); font-size: .85rem; line-height: 1.5; }
.setting-control { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.setting-control form { margin: 0; }
.setting-control select { width: auto; min-width: 9.5em; min-height: 38px; padding: .3rem 2rem .3rem .7rem; }
.setting-row-stack { flex-wrap: wrap; }
.setting-row-stack .setting-text { flex: 1 1 260px; }
.settings-inline-form { flex: 1 1 100%; }
.settings-save { padding-top: 1rem; }
.settings-avatar { width: 44px; height: 44px; }

input[type=checkbox].switch {
  -webkit-appearance: none; appearance: none; position: relative; flex: none;
  width: 46px; height: 28px; margin: 0; border-radius: 999px;
  background: #d9d1c7; cursor: pointer; transition: background .2s;
}
input[type=checkbox].switch::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s;
}
input[type=checkbox].switch:checked { background: var(--primary); }
input[type=checkbox].switch:checked::before { transform: translateX(18px); }
input[type=checkbox].switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.stepper { display: inline-flex; align-items: stretch; overflow: hidden; border: 1px solid #d8cfc3; border-radius: 999px; background: var(--surface); }
.stepper button { width: 40px; padding: 0; border: 0; background: none; color: var(--text); font-family: var(--display); font-weight: 700; cursor: pointer; }
.stepper button:hover:not(:disabled) { background: #f3eee7; }
.stepper button:disabled { color: #cbc2b7; cursor: default; }
.stepper sup { font-size: .65em; }
.stepper select {
  -webkit-appearance: none; appearance: none; width: auto; min-width: 4.6em; min-height: 36px;
  padding: 0 .5rem; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: 0;
  background: none; text-align: center; text-align-last: center; cursor: pointer;
}
.stepper select:focus { outline-offset: -2px; }

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: .5rem; flex: 1 1 100%; margin: .15rem 0 0; }
.swatch {
  position: relative; height: 56px; padding: 0; overflow: hidden;
  border: 2px solid transparent; border-radius: 10px; color: #fff; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: transform .15s;
}
.swatch:hover { transform: translateY(-1px); }
.swatch span { position: absolute; left: .45rem; bottom: .3rem; font-size: .75rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.swatch.is-current { border-color: var(--text); box-shadow: inset 0 0 0 2px var(--surface); }
.swatch.is-current::after { content: "✓"; position: absolute; top: .2rem; right: .4rem; font-size: .8rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.swatch-photo { display: block; background: repeating-linear-gradient(45deg, #efe9e1 0 8px, #e4dcd1 8px 16px); color: var(--text); cursor: default; }
.swatch-photo span, .swatch-photo::after { text-shadow: none; }

.settings-page { max-width: 760px; margin: 0 auto; }
.settings-page .settings-panel { overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }

@media (max-width: 639px) {
  .settings-dialog { width: 100%; max-height: 92vh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  .settings-dialog[open] { animation-name: settings-up; }
  .settings-head, .settings-jump { padding-left: 1rem; padding-right: .75rem; }
  .settings-body { padding: 0 1rem 1.5rem; }
  .setting-row:not(label) { flex-wrap: wrap; }
  .setting-row:not(label) .setting-text { flex: 1 1 100%; }
  .setting-row:not(label) .setting-control { justify-content: flex-start; }
}

/* personal homepage */
.homepage { max-width: 1120px; margin: 0 auto; }
.home-hero { position: relative; overflow: hidden; margin-bottom: 1.25rem; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.home-cover { position: relative; height: clamp(150px, 24vw, 260px); background-color: var(--stage); background-position: center; background-size: cover; }
.home-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .3)); pointer-events: none; }
.cover-edit { position: absolute; top: .75rem; right: .75rem; z-index: 1; display: flex; gap: .4rem; margin: 0; }
.cover-button {
  display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  background: rgba(20, 16, 14, .55); color: #fff; font-size: .85rem; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cover-button:hover { background: rgba(20, 16, 14, .78); }
.cover-button:focus-within { outline: 2px solid var(--spot); outline-offset: 2px; }
.cover-button svg { width: 18px; height: 18px; }
.home-id { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1.25rem; padding: 0 1.5rem 1.25rem; }
.home-avatar { position: relative; flex: none; margin-top: -58px; }
.avatar-xl { width: 116px; height: 116px; border: 4px solid var(--surface); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); font-family: var(--display); font-size: 2.7rem; }
.avatar-edit { position: absolute; right: 2px; bottom: 4px; margin: 0; }
.avatar-button {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 3px solid var(--surface); border-radius: 50%; background: var(--primary); color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2); cursor: pointer;
}
.avatar-button:hover { background: var(--primary-dark); }
.avatar-button:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.avatar-button svg { width: 16px; height: 16px; }
.avatar-edit.is-busy .avatar-button, .cover-edit.is-busy .cover-button { opacity: .6; pointer-events: none; }
.home-names { flex: 1 1 240px; min-width: 0; padding-top: .9rem; }
.home-names h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin: 0 0 .4rem; font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2rem); }
.home-nick { color: var(--muted); font-family: inherit; font-size: .95rem; font-weight: 400; }
.home-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.home-intro { margin: 0 1.5rem 1.4rem; padding: .8rem 1rem; border-left: 3px solid var(--spot); border-radius: 0 10px 10px 0; background: #fbf8f2; font-family: var(--serif); line-height: 1.85; }
.home-intro.is-empty { border-left-color: var(--border); color: var(--muted); font-family: inherit; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.profile-grid > * { min-width: 0; margin-bottom: 0; }
.home-side { display: grid; gap: 1.25rem; }
.home-side > .card { margin-bottom: 0; }
.home-card h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; }
.home-card h2::before { content: ""; width: 4px; height: 1.05em; border-radius: 2px; background: var(--primary); }
.home-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .55rem; }
.home-card-head h2 { margin: 0; }
.home-card-link { flex: none; padding: .15rem .65rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.home-card-link:hover { background: rgba(179, 38, 30, .07); text-decoration: none; }
.home-facts-note { margin: 0 0 .35rem; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.home-facts { margin: 0; }
.home-facts > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: .75rem; padding: .55rem 0; border-bottom: 1px dashed #ece5dc; }
.home-facts > div:last-child { border-bottom: 0; }
.home-facts dt { color: var(--muted); font-size: .9rem; }
.home-facts dd { margin: 0; overflow-wrap: anywhere; }
.home-facts dd a { color: inherit; text-decoration: underline dotted #c9bdae; text-underline-offset: .2em; }
.home-facts dd a:hover { color: var(--primary); text-decoration-color: currentColor; }
.home-facts.is-folded > .is-more { display: none; }
.home-facts.is-folded > div:nth-last-child(1 of :not(.is-more)) { border-bottom: 0; }
.fact-note {
  display: inline-block; margin-left: .4rem; padding: 0 .5rem; border-radius: 999px;
  background: #f3eee7; color: var(--muted); font-size: .72rem; line-height: 1.6; vertical-align: .1em; white-space: nowrap;
}
.facts-toggle {
  display: flex; align-items: center; justify-content: center; gap: .3rem; width: 100%; margin-top: .45rem;
  padding: .55rem .75rem; border: 1px dashed #e0d5c7; border-radius: 10px; background: #fcfaf6;
  color: var(--primary); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.facts-toggle[hidden] { display: none; }
.facts-toggle:hover { border-color: #e3c4bf; background: #fff5f3; }
.facts-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.facts-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.facts-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.home-missing { margin: .75rem 0 0; padding: .6rem .75rem; border-radius: 10px; background: #faf6f0; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.home-missing a { margin-left: .25rem; font-weight: 600; }
@media (min-width: 960px) {
  .profile-grid { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
  .profile-grid.is-single { grid-template-columns: minmax(0, 1fr); }
  .profile-grid.is-single .photo-wall { column-count: 4; }
}
@media (max-width: 639px) {
  .home-id { flex-direction: column; align-items: center; padding: 0 1rem 1.1rem; text-align: center; }
  .home-names { flex-basis: auto; padding-top: 0; }
  .home-names h1 { justify-content: center; }
  .home-names .chips, .home-actions { justify-content: center; }
  .home-intro { margin: 0 1rem 1.1rem; }
}

.home-photos-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.home-photos-head h2 { margin: 0; }
.photo-upload { display: grid; gap: .6rem; margin-bottom: 1rem; }
.photo-pick {
  display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem;
  border: 1.5px dashed #d8cfc3; border-radius: 12px; background: #fcfaf7; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.photo-pick:hover, .photo-pick:focus-within { border-color: var(--primary); background: #fff6f4; }
.photo-pick svg { flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: var(--primary); color: #fff; }
.photo-pick > span { display: flex; flex-direction: column; gap: .1rem; }
.photo-upload-row { display: flex; gap: .5rem; }
.photo-upload-row input { flex: 1; min-width: 0; }
.photo-upload.is-busy { opacity: .7; pointer-events: none; }
.photo-wall { column-count: 2; column-gap: .6rem; }
@media (min-width: 640px) { .photo-wall { column-count: 3; } }
.photo-tile { position: relative; overflow: hidden; margin: 0 0 .6rem; border-radius: 10px; background: #efe9e1; break-inside: avoid; }
.photo-open { display: block; }
.photo-open img { display: block; width: 100%; height: auto; transition: transform .35s ease; }
.photo-tile:hover .photo-open img { transform: scale(1.035); }
.photo-tile figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 1.3rem .6rem .45rem; background: linear-gradient(transparent, rgba(0, 0, 0, .66)); color: #fff; font-size: .8rem; pointer-events: none; }
.photo-delete { position: absolute; top: .4rem; right: .4rem; margin: 0; opacity: 0; transition: opacity .15s; }
.photo-tile:hover .photo-delete, .photo-tile:focus-within .photo-delete { opacity: 1; }
@media (hover: none) { .photo-delete { opacity: 1; } }
.photo-delete button { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(20, 16, 14, .6); color: #fff; cursor: pointer; }
.photo-delete button:hover { background: var(--danger); }
.photo-delete svg { width: 16px; height: 16px; }
.photo-empty { margin: 0; padding: 2rem 1rem; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); text-align: center; }

.photo-viewer {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 3.5rem 4rem 4.5rem;
  border: 0; background: rgba(12, 10, 9, .95); color: #fff;
}
.photo-viewer[open] { display: flex; align-items: center; justify-content: center; }
.photo-viewer::backdrop { background: rgba(0, 0, 0, .6); }
.photo-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.photo-viewer-caption { position: absolute; bottom: 1.4rem; left: 50%; max-width: min(70vw, 720px); margin: 0; transform: translateX(-50%); text-align: center; font-size: .95rem; }
.photo-viewer-count { position: absolute; top: 1.15rem; left: 1.25rem; color: rgba(255, 255, 255, .72); font-size: .85rem; }
.photo-viewer-close, .photo-viewer-nav {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
}
.photo-viewer-close:hover, .photo-viewer-nav:hover { background: rgba(255, 255, 255, .24); }
.photo-viewer-close { top: .75rem; right: .75rem; }
.photo-viewer-nav { top: 50%; transform: translateY(-50%); }
.photo-viewer-nav.is-prev { left: .75rem; }
.photo-viewer-nav.is-next { right: .75rem; }
.photo-viewer svg { width: 22px; height: 22px; }
.photo-viewer.is-single .photo-viewer-nav, .photo-viewer.is-single .photo-viewer-count { display: none; }
@media (max-width: 639px) {
  .photo-viewer { padding: 3.5rem .5rem 5rem; }
  .photo-viewer-nav { top: auto; bottom: .9rem; transform: none; }
  .photo-viewer-caption { bottom: 1.6rem; max-width: 60vw; }
}

.person-go { display: inline-flex; flex: none; align-items: center; gap: .1rem; color: var(--muted); font-size: .8rem; }
.person-go svg { width: 14px; height: 14px; }
.person-card:hover .person-go { color: var(--primary); }

/* form pages */
.form-page { max-width: 640px; }
.form-page-wide { max-width: 880px; }
.back-link { display: inline-flex; align-items: center; gap: .15rem; margin: 0 0 .5rem -.35rem; padding: .2rem .55rem .2rem .2rem; border-radius: 999px; color: var(--muted); font-size: .9rem; }
.back-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.back-link:hover { color: var(--primary); background: rgba(179, 38, 30, .07); text-decoration: none; }
.form-lead { margin: -.35rem 0 1.1rem; color: var(--muted); font-size: .92rem; }
.form-card { padding: 1.25rem 1.25rem 1.1rem; }
.form-card .form-lead { margin: 0 0 1.1rem; padding-bottom: .95rem; border-bottom: 1px dashed var(--border); }
.edit-section { padding: 1.1rem 1.25rem .3rem; }
.edit-section h2 { margin: 0 0 1rem; }
.edit-grid { display: grid; gap: 0 1.25rem; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .3rem; }
.field-head label { font-weight: 600; }
.field-audience { flex: none; padding: .1rem .55rem; border-radius: 999px; background: #f3eee7; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.edit-privacy {
  display: flex; align-items: flex-start; gap: .75rem; margin: -.25rem 0 1.1rem; padding: .85rem 1rem;
  border: 1px solid #f0dcc0; border-radius: var(--radius); background: #fffaf2; font-size: .9rem; line-height: 1.65;
}
.edit-privacy svg { flex: none; width: 22px; height: 22px; margin-top: .05rem; fill: none; stroke: var(--primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.edit-privacy p { margin: 0; }
.edit-section-note { margin: -.55rem 0 .95rem; color: var(--muted); font-size: .85rem; }
.field-head .field-name { font-weight: 600; }
.fixed-value {
  display: flex; align-items: center; min-height: 44px; margin: 0; padding: .55rem .75rem;
  border: 1px dashed #ddd3c6; border-radius: 10px; background: #faf7f2; overflow-wrap: anywhere;
}
.hide-switch {
  position: relative; display: inline-flex; flex: none; align-items: center; gap: .4rem;
  color: var(--muted); font-size: .8rem; font-weight: 500; cursor: pointer; user-select: none;
}
.hide-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.hide-switch-track { position: relative; width: 30px; height: 18px; border-radius: 999px; background: #dcd3c7; transition: background .2s; }
.hide-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s;
}
.hide-switch:hover .hide-switch-track { background: #cfc4b6; }
.hide-switch input:checked + .hide-switch-track { background: var(--primary); }
.hide-switch input:checked + .hide-switch-track::after { transform: translateX(12px); }
.hide-switch input:checked ~ .hide-switch-text { color: var(--primary); font-weight: 700; }
.hide-switch input:focus-visible + .hide-switch-track { outline: 2px solid var(--primary); outline-offset: 2px; }
.edit-field.is-hidden input:not([type=checkbox]), .edit-field.is-hidden select, .edit-field.is-hidden textarea, .edit-field.is-hidden .fixed-value {
  background: repeating-linear-gradient(-45deg, #fbf8f4 0 6px, #f4efe8 6px 12px);
}
.edit-actions {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; gap: .6rem; margin: 0 -1rem; padding: .75rem 1rem;
  border-top: 1px solid var(--border); background: rgba(250, 247, 242, .94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.has-tabbar .edit-actions { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
.edit-actions .btn { flex: 1; }
@media (min-width: 720px) {
  .edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edit-grid .field-wide { grid-column: 1 / -1; }
  .edit-actions .btn { flex: none; min-width: 7.5rem; }
}
@media (min-width: 900px) {
  .edit-actions, .has-tabbar .edit-actions {
    bottom: 0; margin: 0; padding: 1rem 0 1.1rem; border-top: 0;
    background: linear-gradient(to top, var(--bg) 70%, rgba(250, 247, 242, 0));
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* flash messages: float over the page and leave on their own */
.toasts {
  position: fixed; z-index: 70; top: calc(var(--topbar-h) + .75rem); right: 1rem;
  display: flex; flex-direction: column; gap: .55rem;
  width: min(380px, calc(100vw - 2rem)); pointer-events: none;
}
body.anon .toasts { top: 1rem; }
.toast {
  position: relative; display: flex; align-items: flex-start; gap: .65rem;
  padding: .8rem 2.6rem .85rem .85rem; overflow: hidden; pointer-events: auto;
  background: var(--surface); color: var(--text); border: 1px solid #e7dfd4; border-radius: 14px;
  box-shadow: 0 14px 36px rgba(31, 26, 23, .16), 0 2px 6px rgba(31, 26, 23, .07);
  animation: toast-in .28s cubic-bezier(.2, .8, .3, 1);
  transition: opacity .25s ease, transform .25s ease;
}
.toast.is-leaving { opacity: 0; transform: translateX(24px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
.toast-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background: #4f7cc0; color: #fff; font-size: .85rem; font-weight: 800; line-height: 1;
}
.toast-text { margin: .05rem 0 0; font-size: .93rem; line-height: 1.55; overflow-wrap: anywhere; }
.toast-close {
  position: absolute; top: .4rem; right: .4rem; display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.toast-close:hover { background: #f3eee7; color: var(--text); }
.toast-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.toast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #4f7cc0; opacity: .55; transform-origin: left center; }
.toast-success .toast-icon, .toast-success .toast-bar { background: #2f7a3d; }
.toast-warning .toast-icon, .toast-warning .toast-bar { background: #d69a2d; }
.toast-error .toast-icon, .toast-error .toast-bar { background: var(--primary); }
.toast-error { border-color: #f0c9c4; }
.toast.is-live .toast-bar { animation: toast-life var(--toast-life, 5s) linear forwards; }
.toast:hover .toast-bar, .toast:focus-within .toast-bar, .toasts.is-paused .toast-bar { animation-play-state: paused; }
@keyframes toast-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* The countdown drives dismissal, so the reduced-motion rule must not shorten it. */
html[data-motion="reduce"] .toast.is-live .toast-bar { animation-duration: var(--toast-life, 5s) !important; }
/* Without the script nothing counts down; let the toasts fade out by themselves. */
html:not(.js) .toast { animation: toast-in .28s ease-out, toast-gone .4s ease 8s forwards; }
@keyframes toast-gone { to { opacity: 0; visibility: hidden; } }
@media (max-width: 640px) {
  .toasts { left: .75rem; right: .75rem; top: calc(var(--topbar-h) + .5rem); width: auto; }
  .toast.is-leaving { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; transition: opacity .2s; }
  .toast.is-leaving { transform: none; }
}

/* achievement unlocks: a game-overlay card slides up at the bottom right and leaves by itself; no script needed */
.ach-toasts {
  position: fixed; z-index: 75; right: 1rem; bottom: 1rem;
  display: flex; flex-direction: column-reverse; gap: .5rem;
  width: min(330px, calc(100vw - 2rem)); pointer-events: none;
}
.ach-toast {
  display: flex; align-items: center; gap: .8rem; padding: .65rem 1rem .65rem .65rem;
  color: #c7d5e0; text-decoration: none; pointer-events: auto;
  background: linear-gradient(135deg, #2a3f5a 0%, #1b2838 55%, #16202d 100%);
  border: 1px solid rgba(102, 192, 244, .22); border-radius: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  animation: ach-in .45s cubic-bezier(.2, .8, .3, 1) .3s both, ach-out .5s ease 6s forwards;
}
.ach-toast:hover { color: #fff; text-decoration: none; border-color: rgba(102, 192, 244, .6); }
.ach-toast:hover, .ach-toast:focus-visible { animation-play-state: paused; }
.ach-toast:focus-visible { outline: 2px solid #66c0f4; outline-offset: 2px; }
.ach-toast:nth-child(2) { animation-delay: .6s, 6.3s; }
.ach-toast:nth-child(3) { animation-delay: .9s, 6.6s; }
.ach-toast:nth-child(4) { animation-delay: 1.2s, 6.9s; }
.ach-toast:nth-child(5) { animation-delay: 1.5s, 7.2s; }
.ach-toast-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 3.1rem; height: 3.1rem; border-radius: 3px;
  background: #f5c518; color: #2b1d14; font-size: 1.4rem; font-weight: 800; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.ach-toast-more .ach-toast-icon { background: #3d5a7a; color: #fff; font-size: 1.05rem; }
.ach-toast-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.ach-toast-label { font-size: .8rem; color: #8fa4b8; }
.ach-toast-name { font-size: 1rem; color: #fff; overflow-wrap: anywhere; }
@keyframes ach-in { from { opacity: 0; transform: translateY(120%); } to { opacity: 1; transform: none; } }
@keyframes ach-out { to { opacity: 0; visibility: hidden; transform: translateY(16px); } }
@keyframes ach-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ach-fade-out { to { opacity: 0; visibility: hidden; } }
@media (max-width: 899px) {
  .has-tabbar .ach-toasts { bottom: calc(var(--tabbar-h) + .75rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  .ach-toasts { left: .75rem; right: .75rem; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ach-toast { animation-name: ach-fade-in, ach-fade-out; }
}
@media print {
  .ach-toasts { display: none; }
}

/* plan board: why the week did not go out, until the next try */
.plan-problems { margin: .5rem 0 .75rem; }
.plan-problems p { margin: 0 0 .25rem; font-weight: 600; }
.plan-problems ul { margin: 0; padding-left: 1.2rem; }
.plan-problems li + li { margin-top: .15rem; }

/* crews page: my free time and the week table */
.crew-tools { display: grid; gap: 1rem; }
@media (min-width: 900px) {
  .crew-tools { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .crew-tools.is-single { grid-template-columns: minmax(0, 30rem); }
}
.crew-tool { display: flex; flex-direction: column; gap: .85rem; margin: 0; }
.crew-tool-head { display: flex; align-items: flex-start; gap: .75rem; }
.crew-tool-head h2 { margin: .1rem 0 .2rem; font-size: 1.05rem; }
.crew-tool-head p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.55; }
.crew-tool-icon {
  flex: none; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: 12px; background: #fbe9e7; color: var(--primary);
}
.crew-tool-icon svg, .crew-tool-go, .fw-go svg, .rh-place svg, .rh-go {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.crew-tool-icon svg { width: 20px; height: 20px; }
.crew-tool-note { margin: 0; padding: .65rem .8rem; border-radius: 10px; background: #f7f3ee; color: var(--muted); font-size: .88rem; }
.crew-tool-todo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem .9rem;
  padding: .7rem .8rem; border: 1px solid #f1dcae; border-radius: 10px; background: var(--warn-bg);
}
.crew-tool-todo p { flex: 1 1 14rem; margin: 0; color: var(--warn); font-size: .88rem; }
.free-weeks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 560px) { .free-weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.free-weeks a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "label range go" "state state go";
  align-items: center; gap: .35rem .6rem; padding: .7rem .8rem; border: 1px solid #ebe3d8; border-radius: 12px;
  background: #fffdfa; color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.free-weeks a:hover { text-decoration: none; border-color: #e3c4bf; box-shadow: 0 4px 14px rgba(31, 26, 23, .07); }
.free-weeks a:focus-visible, .crew-tool-link:focus-visible, .rh-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.fw-label { grid-area: label; font-weight: 700; }
.fw-range { grid-area: range; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.fw-state {
  grid-area: state; justify-self: start; padding: .1rem .55rem; border-radius: 999px;
  background: var(--ok-bg); color: #1b5e20; font-size: .75rem; font-weight: 600;
}
.fw-state.is-adjusted { background: var(--warn-bg); color: var(--warn); }
.fw-go { grid-area: go; display: inline-flex; align-items: center; color: var(--primary); font-size: .85rem; font-weight: 600; }
.fw-go svg { width: 16px; height: 16px; }
.crew-tool-link { flex-direction: row; align-items: center; gap: .75rem; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.crew-tool-link:hover { text-decoration: none; border-color: #e3c4bf; box-shadow: 0 1px 2px rgba(31, 26, 23, .04), 0 8px 24px rgba(31, 26, 23, .08); }
.crew-tool-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.crew-tool-text strong { font-size: 1.05rem; }
.crew-tool-text span { color: var(--muted); font-size: .85rem; line-height: 1.55; }
.crew-tool-go { flex: none; width: 20px; height: 20px; color: #b9aea3; }
.crew-tool-link:hover .crew-tool-go { color: var(--primary); }

/* crew page: upcoming rehearsals */
.rh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.rh-item {
  display: flex; align-items: center; gap: .85rem; padding: .55rem .7rem .55rem .55rem;
  border: 1px solid #ebe3d8; border-radius: 12px; background: #fffdfa; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.rh-item:hover { text-decoration: none; border-color: #e3c4bf; box-shadow: 0 4px 14px rgba(31, 26, 23, .07); }
.rh-date {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 3.4rem; padding: .35rem 0; border-radius: 10px; background: var(--stage); color: #fff; line-height: 1.2;
}
.rh-month { font-size: .7rem; opacity: .75; }
.rh-date strong { font-size: 1.4rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rh-weekday { color: var(--spot); font-size: .7rem; font-weight: 600; }
.rh-item.is-near .rh-date { background: linear-gradient(180deg, #c42d24, var(--primary)); }
.rh-item.is-near .rh-weekday { color: #ffe9a8; }
.rh-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.rh-time {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  color: var(--primary); font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rh-tag { padding: .05rem .45rem; border-radius: 999px; background: var(--spot); color: #4a3800; font-size: .7rem; font-weight: 700; line-height: 1.4; }
.rh-title {
  display: -webkit-box; overflow: hidden; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.rh-place { display: flex; align-items: center; gap: .3rem; min-width: 0; color: var(--muted); font-size: .82rem; }
.rh-place svg { flex: none; width: 14px; height: 14px; }
.rh-go { flex: none; width: 18px; height: 18px; color: #b9aea3; }
.rh-item:hover .rh-go { color: var(--primary); }
.rh-empty { margin: 0; color: var(--muted); }

/* work */
.cal-duty { background: #e3f1e1; box-shadow: inset 3px 0 0 #2f7a3d; color: #1f4d27; }
.cal-duty.is-missing { background: #fff1d6; box-shadow: inset 3px 0 0 #c98a00; color: #6b4600; }
.cal-work { background: #efe6f7; box-shadow: inset 3px 0 0 #7b4fb3; color: #45286b; }
.cal-duty.is-done, .cal-work.is-done { opacity: .6; }
.cal-work.is-done .cal-text { text-decoration: line-through; }
.cal-practice { background: #e1f3f3; box-shadow: inset 3px 0 0 #0f7f86; color: #0b4f54; }
.cal-practice.is-missing { background: var(--danger-bg); box-shadow: inset 3px 0 0 #0f7f86; color: #8a1f17; text-decoration: line-through; }
.cal-practice.is-done { opacity: .6; }
.cal-day.is-today .cal-duty, .cal-day.is-today .cal-work, .cal-day.is-today .cal-practice { background: rgba(255, 255, 255, .15); color: #fff; }
.cal-key-duty { margin-left: .7rem; background: #2f7a3d; }
.cal-key-missing { margin-left: .7rem; background: #c98a00; }
.cal-key-work { margin-left: .7rem; background: #7b4fb3; }
.cal-key-practice { margin-left: .7rem; background: #0f7f86; }
.work-cal { position: relative; --cal-h: 6.2rem; }
.work-pop-people div[id] { max-height: 8.5rem; overflow-y: auto; }
.work-day { margin-top: 1rem; }
.work-day-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.work-day-list .cal-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .6rem; padding: .5rem .7rem .5rem .8rem; font-size: .92rem; white-space: normal; }
.work-day-list .cal-time { grid-row: 1 / span 2; }
.work-day-list .cal-extra { display: block; grid-column: 2; font-size: .8rem; opacity: .85; }
.roster { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.roster-top { margin-bottom: .75rem; padding-bottom: .75rem; border-bottom: 1px dashed var(--border); }
.roster-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .9rem; }
.roster-person { display: flex; align-items: center; gap: .65rem; min-width: 0; color: var(--text); }
.roster-person:hover { text-decoration: none; }
.roster-person:hover strong { color: var(--primary); }
.roster-person strong, .roster-person .small { display: block; }
.roster-person .avatar { display: inline-flex; align-items: center; justify-content: center; }
.roster-person .avatar img { width: 100%; height: 100%; object-fit: cover; }
.roster-contacts { display: flex; flex-wrap: wrap; gap: .15rem .9rem; padding-left: calc(42px + .65rem); }
.duty-week { list-style: none; margin: 0; padding: 0; }
.duty-week li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .5rem; border-bottom: 1px solid var(--border); }
.duty-week li:last-child { border-bottom: 0; }
.duty-week li.is-today { border-radius: 8px; background: #fdf2f0; font-weight: 700; }
.duty-week li.is-past { color: var(--muted); }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo { display: flex; align-items: flex-start; gap: .65rem; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.todo:last-child { border-bottom: 0; }
.todo-check { margin: 0; }
.todo-box { width: 22px; height: 22px; margin-top: .1rem; padding: 0; border: 2px solid #b9aea3; border-radius: 6px; background: var(--surface); cursor: pointer; }
.todo-box:hover { border-color: var(--primary); }
.todo.is-done .todo-box { border-color: #2f7a3d; background: #2f7a3d; box-shadow: inset 0 0 0 3px var(--surface); }
.todo-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; color: var(--text); }
.todo-main:hover { text-decoration: none; }
.todo-main:hover .todo-title { color: var(--primary); }
.todo.is-done .todo-title { color: var(--muted); text-decoration: line-through; }
.todo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem; }
.badge.kind-activity { background: #efe6f7; color: #45286b; }
.badge.kind-venue { background: #e2ebf8; color: #1f3f6e; }
.badge.kind-meeting { background: #fff1d6; color: #6b4600; }
.badge.kind-other { background: #eee9e3; color: #4a423b; }
.work-form #id_assignees { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.work-form #id_assignees label { display: inline-flex; align-items: center; gap: .3rem; font-weight: 400; }
.week-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-bottom: .75rem; }
.week-nav-title { display: flex; flex-direction: column; line-height: 1.3; }
.duty-table { width: 100%; border-collapse: collapse; }
.duty-table th, .duty-table td { padding: .5rem .45rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.duty-table thead th { color: var(--muted); font-size: .8rem; font-weight: 600; }
.duty-table tbody th { width: 6.5rem; font-weight: 600; white-space: nowrap; }
.duty-table tr.is-today { background: #fdf2f0; }
.duty-table tr.is-past { color: var(--muted); }
.duty-table select { width: 100%; max-width: 18rem; }
.duty-load { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
@media (max-width: 640px) {
  .work-cal { --cal-h: 4.15rem; }
  .cal-items .cal-duty .cal-text, .cal-items .cal-work.has-time .cal-text, .cal-items .cal-practice .cal-text { display: none; }
  .roster-row { flex-direction: column; align-items: stretch; gap: .2rem; }
  .duty-table th:nth-child(3), .duty-table td:nth-child(3) { display: none; }
}

.is-duty .agenda-row::before { background: #2f7a3d; }
.is-work .agenda-row::before { background: #7b4fb3; }
.post-row { display: flex; align-items: center; justify-content: space-between; gap: .3rem .75rem; }
.post-row > span { min-width: 0; }
.post-row > span > .muted { white-space: nowrap; }
.post-row > form { flex-shrink: 0; }
.roster-note { margin: .85rem 0 0; }

/* 甲团材料 */
.mat-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.mat-filter .tabs { margin-bottom: .6rem; }
.mat-filter .filters { margin-bottom: .4rem; }
.mat-scope { margin: 0; }
.mat-month-title { display: flex; align-items: baseline; gap: .5rem; margin: 1.5rem 0 .6rem; font-size: 1.05rem; }
.mat-month-title span { font-size: .8rem; font-weight: 400; color: var(--muted); }
.mat-card { margin-bottom: .75rem; scroll-margin-top: calc(var(--topbar-h) + 1rem); }
.mat-card:target { box-shadow: 0 0 0 2px var(--spot), var(--shadow); }
.mat-head { display: flex; align-items: flex-start; gap: .85rem; }
.mat-date { flex: none; width: 3.1rem; padding: .3rem 0 .25rem; border: 1px solid #ebe3d8; border-radius: 10px; background: #fcfaf7; text-align: center; line-height: 1.15; }
.mat-date strong { display: block; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.mat-date span { font-size: .72rem; color: var(--muted); }
.mat-heading { flex: 1; min-width: 0; }
.mat-heading h3 { margin: .05rem 0 .2rem; font-size: 1.05rem; overflow-wrap: anywhere; }
.mat-heading p { margin: 0; }
.mat-body { margin-top: .65rem; overflow-wrap: anywhere; }
.mat-body p { margin: 0 0 .5rem; }
.mat-body p:last-child { margin-bottom: 0; }
.mat-photos { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); margin-top: .75rem; }
.mat-photos a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: #efe8de; }
.mat-photos img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.mat-photos a:hover img { transform: scale(1.04); }
.mat-files { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.mat-files li { display: inline-flex; align-items: baseline; gap: .4rem; max-width: 100%; padding: .3rem .7rem; border: 1px solid var(--border); border-radius: 999px; background: #fcfaf7; font-size: .875rem; }
.mat-files a { overflow-wrap: anywhere; }
.mat-files span { flex: none; font-size: .75rem; color: var(--muted); }
.mat-current { margin: 0 0 1rem; padding: 0; border: 0; }
.mat-current legend { padding: 0; font-weight: 600; }
.mat-current-list { display: grid; gap: .35rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.mat-current-list label { display: flex; align-items: center; gap: .6rem; font-size: .9rem; overflow-wrap: anywhere; }
.mat-current-list img, .mat-file-mark { flex: none; width: 3.2rem; height: 2.4rem; border-radius: 6px; }
.mat-current-list img { object-fit: cover; }
.mat-file-mark { display: inline-flex; align-items: center; justify-content: center; background: #efe8de; color: var(--muted); font-size: .72rem; }
.mat-tips { display: grid; gap: .4rem; margin: 0; padding-left: 1.1rem; }
.mat-people { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 0; }
.mat-gaps { margin: .5rem 0 0; padding: .45rem .7rem; border-radius: 8px; background: var(--warn-bg); color: var(--warn); }
.badge.mat-sec-0 { background: #fdecea; color: #8a1c16; }
.badge.mat-sec-1 { background: #efe6f7; color: #45286b; }
.badge.mat-sec-2 { background: #e2ebf8; color: #1f3f6e; }
.badge.mat-sec-3 { background: #fff1d6; color: #6b4600; }
.badge.mat-sec-4 { background: #e3f2e6; color: #1e5b2c; }

/* week paging */
.btn.is-disabled, .cal-nav-btn.is-disabled { opacity: .4; pointer-events: none; }
.week-nav-title { align-items: center; text-align: center; }
.training-bookings { margin-top: .5rem; }
.training-bookings summary { cursor: pointer; color: var(--primary); font-size: .875rem; }