/*
 * 人生時鐘網頁小工具（2026-10-23，docs/website.md §3.10）。
 * 結果卡的底色跟著人生時段（清晨…夜晚、延長賽），由 life-clock.js 設定 --lc-*；分享圖卡用同一組顏色。
 * 字級全部 ≥ .94rem（16px），錶面刻度數字 16px。
 */
.lc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 這頁的小時固定淺色（放在彩色結果卡與分享圖卡上），座標與 home.css 相同。 */
[data-life-clock] {
  --xs-outline: #262626;
  --xs-body: #ffffff;
  --xs-shade: #efe8db;
  --xs-feature: #262626;
  --xs-cheek: #f6a393;
  --xs-cheek-o: .55;
  --xs-knob: #2dd4bf;
  --xs-tongue: #f07f72;
  --xs-shadow: #262626;
  --xs-shadow-o: .12;
  --xs-gloss-o: 0;
  --lc-from: var(--card);
  --lc-to: var(--card);
  --lc-ink: var(--ink);
  --lc-soft: var(--muted);
  --lc-accent: var(--accent);
}

.lc-page { padding-bottom: 72px; }
.lc-hero { padding: 36px 0 24px; }
.lc-hero h1 {
  margin: 4px 0 10px;
  font-family: var(--font-display); font-size: clamp(2rem, 5.4vw, 3.6rem); line-height: 1.12; letter-spacing: -.025em;
  text-wrap: balance;
}
.lc-lead { max-width: 36em; margin: 0; color: var(--muted); font-size: 1.13rem; line-height: 1.6; }

.lc-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.lc-board > * { min-width: 0; }
/* 電腦：標題與表單在左欄，結果卡在右欄從頂端開始，沒按 F11 的矮視窗也能整張看到。 */
@media (min-width: 900px) {
  .lc-page {
    display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); grid-template-rows: auto 1fr auto;
    column-gap: 40px; width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; padding-top: 28px;
  }
  .lc-page > .wrap { width: auto; margin-inline: 0; }
  .lc-board { display: contents; }
  .lc-hero { grid-column: 1; grid-row: 1; padding: 8px 0 24px; }
  .lc-hero h1 { font-size: clamp(2rem, 2.8vw, 2.8rem); }
  .lc-form { grid-column: 1; grid-row: 2; align-self: start; }
  .lc-stage { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .lc-more { grid-column: 1 / -1; grid-row: 3; }
}

.lc-form {
  display: grid; gap: 18px; padding: 24px;
  border-radius: var(--r-tile); background: var(--card); box-shadow: var(--tile-edge);
}
.lc-field { display: grid; gap: 10px; min-width: 0; }
.lc-label { font-size: 1rem; font-weight: 700; }
.lc-input {
  width: 100%; min-height: 52px; padding: 10px 14px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink);
  font: 600 1.06rem/1.3 var(--font); color-scheme: light dark;
}
.lc-input:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; border-color: var(--accent); }
.lc-stepper { display: flex; align-items: center; gap: 12px; }
.lc-step {
  width: 48px; height: 48px; flex: none;
  border: 0; border-radius: 50%; background: var(--fill); color: var(--ink);
  font: 600 1.4rem/1 var(--font); cursor: pointer;
}
.lc-step:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 16%, var(--fill)); }
.lc-step:disabled { opacity: .4; cursor: default; }
.lc-span { flex: 0 1 5.5em; min-width: 0; text-align: center; font: 800 1.3rem/1.2 var(--font-round); font-variant-numeric: tabular-nums; }
.lc-error { margin: -6px 0 0; color: var(--high); font-size: .94rem; font-weight: 600; }
.lc-privacy { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.5; }

.lc-stage > div {
  display: grid; justify-items: center; gap: 10px; padding: 36px 28px 32px; text-align: center;
  border-radius: var(--r-stage); overflow-wrap: anywhere;
}
.lc-stage > [hidden] { display: none; }
.lc-empty { background: var(--card); box-shadow: var(--tile-edge); color: var(--ink); }
.lc-empty .lc-dial { opacity: .35; }

/* 錶面＋時間疊在一起（同分享圖卡）：時間放在圈內，指針與刻度數字收起。 */
.lc-face { position: relative; display: grid; place-items: center; width: min(280px, 70vw); container-type: inline-size; }
.lc-face > * { grid-area: 1 / 1; }
.lc-face .lc-dial { width: 100%; }
.lc-face .lc-hand, .lc-face .lc-hub, .lc-face .lc-dial-label { display: none; }
.lc-face-text { display: grid; justify-items: center; gap: 2px; padding-top: 2%; text-align: center; }
.lc-face .lc-time { margin: 0; font-size: 19cqw; }
.lc-result[data-period="overtime"] .lc-face .lc-time { font-size: 14cqw; }
.lc-lived { margin: 0; color: var(--lc-soft); font-size: clamp(.94rem, 6cqw, 1.2rem); font-weight: 700; }
.lc-empty-text { margin: 0; color: var(--muted); font-size: 1rem; }
.lc-result {
  position: relative; overflow: hidden;
  /* 太陽／月亮的光暈跟分享圖卡一樣沿錶面上方的弧移動（位置由 life-clock.js 設定）。 */
  background:
    radial-gradient(circle at var(--lc-sun-x, 50%) var(--lc-sun-y, 8%), var(--lc-glow, transparent) 0, transparent 48%),
    linear-gradient(180deg, var(--lc-from), var(--lc-to));
  color: var(--lc-ink);
  box-shadow: var(--shadow);
  transition: background-color .4s ease;
}
.lc-result[data-period="night"]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 14%, #fff 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 28% 8%, #fff 60%, transparent 61%),
    radial-gradient(2px 2px at 80% 12%, #fff 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 90% 28%, #fff 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 16% 36%, #fff 60%, transparent 61%),
    radial-gradient(2px 2px at 70% 5%, #fff 60%, transparent 61%);
}
.lc-result > * { position: relative; }

.lc-dial { width: min(280px, 70vw); height: auto; color: inherit; }
/* 電腦：錶面跟著視窗高度縮放，沒按 F11 時整張結果卡也在一個畫面內。 */
@media (min-width: 900px) {
  .lc-face { width: clamp(200px, 38vh, 320px); }
}
.lc-track { fill: none; stroke: currentColor; stroke-opacity: .18; stroke-width: 12; }
.lc-arc {
  fill: none; stroke: var(--lc-accent); stroke-width: 12; stroke-linecap: round;
  stroke-dasharray: 0 1000;
  transform: rotate(-90deg); transform-origin: 110px 110px;
  transition: stroke-dasharray .7s cubic-bezier(.2, .8, .2, 1);
}
.lc-tick { stroke: currentColor; stroke-opacity: .35; stroke-width: 1.5; stroke-linecap: round; }
.lc-tick-major { stroke-opacity: .7; stroke-width: 2.5; }
.lc-dial-label {
  fill: currentColor; fill-opacity: .72; font: 700 12px var(--font-round);
  text-anchor: middle; dominant-baseline: middle;
}
.lc-hand, .lc-knob { transform-origin: 110px 110px; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.lc-hand line { stroke: currentColor; stroke-width: 5; stroke-linecap: round; }
.lc-knob circle { fill: var(--lc-accent); stroke: var(--lc-from); stroke-width: 3; }
.lc-hub { fill: currentColor; }

.lc-time {
  margin: 4px 0 0;
  font-family: var(--font-round); font-size: clamp(3.6rem, min(15vw, 10.5vh), 6.6rem); font-weight: 800; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.lc-time-empty { opacity: .35; }
.lc-period { margin: 0; font-size: 1.25rem; font-weight: 700; }
.lc-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 0; color: var(--lc-soft); font-size: 1rem; font-weight: 600; }
.lc-stats span { padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--lc-ink) 8%, transparent); }
.lc-age { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; margin: 6px 0 0; color: var(--lc-soft); font-size: 1rem; font-weight: 600; }
.lc-age strong { color: var(--lc-ink); font: 800 1.5rem/1.2 var(--font-round); font-variant-numeric: tabular-nums; }
/* 分享鈕用結果卡的文字色當底，淺色時段是墨色鈕、傍晚與夜晚是白色鈕。 */
.lc-share {
  gap: 8px; margin-top: 14px; padding-inline: 26px; background: var(--lc-ink); color: var(--lc-from);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .55);
}
.lc-share:hover { transform: translateY(-1px); }
.lc-share svg, .lc-sheet-actions .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.lc-more { display: grid; gap: 20px; margin-top: 40px; }
.lc-how {
  padding: 4px 24px; border-radius: var(--r-tile); background: var(--card); box-shadow: var(--tile-edge);
}
.lc-how summary { min-height: 52px; display: flex; align-items: center; font-size: 1.06rem; font-weight: 700; cursor: pointer; }
.lc-how p { margin: 0 0 20px; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.lc-app {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px 20px; padding: 24px;
  border-radius: var(--r-tile); background: var(--card); box-shadow: var(--tile-edge);
}
.lc-app h2 { margin: 0 0 6px; font-size: 1.25rem; line-height: 1.3; }
.lc-app p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.lc-app .btn { grid-column: 1 / -1; justify-self: start; }
.lc-app-mascot { width: 72px; height: 72px; }
@media (min-width: 760px) {
  .lc-app { grid-template-columns: auto 1fr auto; }
  .lc-app .btn { grid-column: auto; }
}

.lc-sheet {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, .55);
}
.lc-sheet[hidden] { display: none; }
.lc-sheet-panel {
  display: grid; gap: 14px; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 20px; box-sizing: border-box;
  border-radius: 28px; background: var(--card); box-shadow: var(--shadow);
}
.lc-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lc-sheet-head h2 { margin: 0; font-size: 1.13rem; }
.lc-sheet-x {
  display: grid; flex: none; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: var(--fill); color: var(--ink); cursor: pointer;
}
.lc-sheet-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.lc-formats { display: flex; padding: 3px; border-radius: 999px; background: var(--fill); }
.lc-formats button {
  flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); font: 700 .94rem/1.2 var(--font); cursor: pointer;
}
.lc-formats button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
.lc-sheet-frame { display: grid; place-items: center; min-height: 0; }
.lc-sheet-image {
  display: block; width: auto; max-width: 100%; height: auto; max-height: min(58dvh, 620px);
  border-radius: 16px; box-shadow: var(--tile-edge), 0 18px 40px -22px rgba(0, 0, 0, .5);
}
.lc-copy-status { margin: 0; color: var(--muted); font-size: .94rem; text-align: center; overflow-wrap: anywhere; }
.lc-copy-status:empty { display: none; }
.lc-sheet-hint { margin: 0; color: var(--muted); font-size: 1rem; text-align: center; }
.lc-sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lc-sheet-actions .btn { flex: 1 1 140px; }
.lc-sheet-actions [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lc-arc, .lc-hand, .lc-knob, .lc-result { transition: none; }
}

@media (max-width: 560px) {
  .lc-hero { padding: 24px 0 18px; }
  .lc-form { gap: 16px; padding: 20px; }
  .lc-stage > div { padding: 28px 16px 26px; }
  .lc-stats { gap: 6px; font-size: .94rem; }
  .lc-stats span { padding: 4px 10px; }
}

@media (min-width: 900px) and (max-height: 760px) {
  .lc-stage > div { gap: 8px; padding: 24px 24px 22px; }
  .lc-face { width: clamp(190px, 34vh, 320px); }
  .lc-share { margin-top: 8px; }
}