/* Shared shell for every RESTARY page: theme tokens, topbar, buttons, dialogs
   and the account panel. Page stylesheets only add what is unique to a page,
   so a new tool can be mounted by writing one HTML file and one CSS file. */

:root {
  color-scheme: dark;
  --bg: #0a1116;
  --bg-soft: #0f181e;
  --bg-raise: #121d24;
  --panel: rgba(15, 24, 30, 0.94);
  --fg: #f2efe6;
  --fg-soft: rgba(242, 239, 230, 0.66);
  /* 0.42 只有 ~2.6:1，达不到 WCAG AA 的 4.5:1；0.58 约 5.9:1。
     这个 token 专门给次要文字用，所以对比度优先于「更淡一点」的观感。 */
  --fg-dim: rgba(242, 239, 230, 0.66);
  --line: rgba(242, 239, 230, 0.14);
  --line-strong: rgba(242, 239, 230, 0.28);
  --accent: #d8a94a;
  --accent-soft: rgba(216, 169, 74, 0.16);
  --ring: #5edfd4;
  --danger: #e2726a;
  --danger-soft: rgba(226, 114, 106, 0.14);
  --ok: #6bbd8a;
  --scrim: rgba(10, 17, 22, 0.8);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.44);
  --radius: 8px;
  --radius-sm: 6px;
  --top-height: 64px;
  --font-ui: "Segoe UI Variable Text", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --font-display: "Bahnschrift SemiBold", "Segoe UI Variable Display", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", sans-serif;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f2efe6;
  --bg-soft: #e9e5da;
  --bg-raise: #fffdf8;
  --panel: rgba(255, 253, 248, 0.96);
  --fg: #16232b;
  --fg-soft: rgba(22, 35, 43, 0.68);
  --fg-dim: rgba(22, 35, 43, 0.66);
  --line: rgba(22, 35, 43, 0.16);
  --line-strong: rgba(22, 35, 43, 0.32);
  --accent: #a9761f;
  --accent-soft: rgba(169, 118, 31, 0.14);
  --ring: #1f8f86;
  --danger: #b34b42;
  --danger-soft: rgba(179, 75, 66, 0.12);
  --ok: #347d52;
  --scrim: rgba(242, 239, 230, 0.84);
  --shadow: 0 20px 44px rgba(22, 35, 43, 0.18);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  animation: page-in 320ms ease-out both;
}

@keyframes page-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Cross-document view transitions where the browser supports them. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: fade-out 160ms ease both;
}

::view-transition-new(root) {
  animation: page-in 280ms ease both;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------------ topbar */

.top {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--top-height);
  padding: 0 26px;
  background: var(--scrim);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--line), transparent) 1;
}

.brand {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.brand span {
  color: var(--fg);
}

.brand__mark {
  width: 22px;
  height: 22px;
}

.brand[data-home-link][aria-current="page"]::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 2px;
  content: "";
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--ring));
}

.top__nav {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.top__nav::-webkit-scrollbar {
  display: none;
}

.top__nav a {
  position: relative;
  flex: none;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  color: var(--fg-soft);
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease;
}

.top__nav a:hover {
  color: var(--fg);
  background: var(--accent-soft);
}

.top__nav a[aria-current="page"] {
  color: var(--fg);
}

.top__nav a[aria-current="page"]::after {
  position: absolute;
  right: 12px;
  bottom: 2px;
  left: 12px;
  height: 2px;
  content: "";
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--ring));
}

.top__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

.theme-toggle {
  display: grid;
  width: 34px;
  aspect-ratio: 1;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  transition: border-color 160ms ease, background 160ms ease;
}

.theme-toggle:hover {
  border-color: var(--line-strong);
  background: var(--accent-soft);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle__moon {
  display: none;
}

html[data-theme="light"] .theme-toggle__sun {
  display: none;
}

html[data-theme="light"] .theme-toggle__moon {
  display: block;
}

/* ------------------------------------------------------------- primitives */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 160ms ease, background 160ms ease, opacity 160ms ease;
}

.btn:hover {
  border-color: var(--line-strong);
  background: var(--accent-soft);
}

.btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn--primary {
  border-color: transparent;
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
}

.btn--primary:hover {
  background: var(--fg);
  opacity: 0.88;
}

.btn--accent {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), #c98a2c);
  color: #1a1305;
  font-weight: 600;
}

.btn--danger {
  border-color: transparent;
  background: var(--danger-soft);
  color: var(--danger);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.icon-btn {
  display: grid;
  width: 34px;
  aspect-ratio: 1;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  transition: border-color 160ms ease, background 160ms ease;
}

.icon-btn:hover {
  border-color: var(--line-strong);
  background: var(--accent-soft);
}

.icon-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 160px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 13.5px;
  transition: border-color 160ms ease, background 160ms ease;
}

.account-button:hover {
  border-color: var(--line-strong);
  background: var(--accent-soft);
}

.account-button__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-button__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(107, 189, 138, 0.18);
}

.field {
  display: grid;
  gap: 6px;
}

.field > span {
  color: var(--fg-soft);
  font-size: 12.5px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(94, 223, 212, 0.16);
}

.field textarea {
  min-height: 72px;
  resize: vertical;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-soft);
  font-size: 12px;
  white-space: nowrap;
}

.chip--accent {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent);
}

.chip--ok {
  border-color: transparent;
  background: rgba(107, 189, 138, 0.14);
  color: var(--ok);
}

.chip--danger {
  border-color: transparent;
  background: var(--danger-soft);
  color: var(--danger);
}

.chip--warn {
  border-color: transparent;
  background: rgba(216, 169, 74, 0.16);
  color: var(--accent);
}

.note {
  color: var(--fg-dim);
  font-size: 12.5px;
}

.error-text {
  color: var(--danger);
  font-size: 13px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

/* Scroll reveal: site.js adds .is-in once a block enters the viewport. */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 560ms ease, transform 560ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------- account UI */

.account {
  width: min(392px, calc(100vw - 28px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  box-shadow: var(--shadow);
}

.account::backdrop {
  background: rgba(4, 8, 11, 0.62);
  backdrop-filter: blur(3px);
}

.account__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}

.account__head strong {
  font-family: var(--font-display);
  font-size: 15px;
}

.account__body {
  display: grid;
  gap: 14px;
  padding: 16px 18px 18px;
}

.account__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.account__tabs button {
  min-height: 32px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--fg-soft);
  font-size: 13.5px;
}

.account__tabs button.is-active {
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
}

.account form {
  display: grid;
  gap: 12px;
}

.account__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account__actions .btn {
  flex: 1;
}

.account__identity {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

.account__identity strong {
  font-family: var(--font-display);
  font-size: 17px;
}

.account__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg-soft);
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-button:hover {
  color: var(--fg);
}

/* ------------------------------------------------------------------- toast */

.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.toast {
  min-width: 180px;
  max-width: min(360px, calc(100vw - 36px));
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: var(--shadow);
  font-size: 13.5px;
  animation: toast-in 220ms ease-out both;
}

.toast--error {
  border-color: var(--danger);
  color: var(--danger);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 720px) {
  :root {
    --top-height: 56px;
  }

  .top {
    gap: 8px;
    padding: 0 12px;
  }

  .brand span {
    display: none;
  }

  .top__nav a {
    padding: 6px 9px;
    font-size: 13px;
  }

  .top__nav a[aria-current="page"]::after {
    right: 9px;
    left: 9px;
  }

  .account-button {
    max-width: 104px;
    padding: 0 10px;
  }

  .field-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body,
  .reveal,
  .toast {
    animation: none;
    transition: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------- shared portal pieces
   These used to live in schedule.css, which only the timetable loads. Every
   portal page needs dialogs, segmented controls and the login gate, so they
   are defined here once; schedule.css keeps its copies for now. */

.gate {
  padding: 40px 22px;
  text-align: center;
}

.gate__body {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.gate h2 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

.sheet {
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100svh - 40px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  box-shadow: var(--shadow);
}

.sheet::backdrop {
  background: rgba(4, 8, 11, 0.6);
  backdrop-filter: blur(3px);
}

.sheet__form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100svh - 40px);
}

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px 12px;
  border-bottom: 1px solid var(--line);
}

.sheet__head strong {
  font-family: var(--font-display);
  font-size: 15px;
}

.sheet__body {
  display: grid;
  gap: 13px;
  padding: 16px 18px;
  overflow: auto;
}

.sheet__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}

.sheet__spacer {
  flex: 1;
}

.seg {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.seg__btn {
  min-height: 30px;
  padding: 0 14px;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--fg-soft);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.seg__btn.is-active {
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
}

.seg__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-soft);
  font-size: 12.5px;
  cursor: pointer;
}

.check input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

/* Friend pickers, share lists and the holiday editor render the same rows. */
.friend-list,
.friend-search,
.share-list,
.holiday-list {
  display: grid;
  gap: 8px;
}

.friend-row,
.share-row,
.holiday-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 12.5px;
}

/* ------------------------------------------------------- generic controls */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip[aria-pressed="true"] {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--fg);
}

.input,
.select {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 13.5px;
}

.input:focus,
.select:focus {
  border-color: var(--ring);
  outline: none;
}

.empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 34px 22px;
  text-align: center;
}