/* teru.page — visual rules borrowed from soara-web app/globals.css v3.0 "Night Flight" / "Monochrome Flight"
   (HEAD 6f4d2e0). Rules only: black/paper surfaces, restrained sky accent, hairline borders, radius 0–2px,
   no shadows, no gradients, tight display type. No SOARA name, logo or component markup. */

:root {
  --black: #020508; --ink: #070b10; --charcoal: #10151b; --surface: #121820;
  --white: #ffffff; --paper: #f3f4f4; --silver: #c8cdd1; --gray: #8b949d;
  --sky: #39ccf5; --sky-bright: #72ddfb; --sky-deep: #087fa3;
  --border-dark: rgba(255,255,255,.16); --border-light: rgba(2,5,8,.18);
  --on-dark-1: #ffffff; --on-dark-2: rgba(255,255,255,.76); --on-dark-3: rgba(255,255,255,.54);
  --on-light-1: #05070a; --on-light-2: rgba(5,7,10,.74); --on-light-3: rgba(5,7,10,.54);
  --radius: 0; --radius-sm: 2px;
  --t: 180ms cubic-bezier(.2,.7,.2,1);
  --font-display: "Chakra Petch", "Noto Sans JP", "Hiragino Sans", "Segoe UI", -apple-system, sans-serif;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Segoe UI", -apple-system, sans-serif;
  --font-mono: "Geist Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--on-dark-1); font-family: var(--font-sans); font-size: 16px; line-height: 1.7; font-feature-settings: "palt"; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--sky); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* surfaces: headings inherit the surface colour */
.theme-dark { background: var(--black); color: var(--on-dark-1); }
.theme-light { background: var(--paper); color: var(--on-light-1); }
.theme-dark .t2 { color: var(--on-dark-2); } .theme-dark .t3 { color: var(--on-dark-3); }
.theme-light .t2 { color: var(--on-light-2); } .theme-light .t3 { color: var(--on-light-3); }
.theme-dark { --line: var(--border-dark); --line-soft: rgba(255,255,255,.10); --hover: rgba(255,255,255,.07); --accent: var(--sky); }
.theme-light { --line: var(--border-light); --line-soft: rgba(2,5,8,.10); --hover: rgba(2,5,8,.05); --accent: var(--sky-deep); }

.wrap { width: min(100% - 48px, 1100px); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: min(100% - 32px, 1100px); } }

/* type */
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.045em; line-height: .98; margin: 0; font-weight: 800; }
h1 { font-size: clamp(3rem, 7vw, 6.4rem); letter-spacing: -.06em; line-height: .93; max-width: 12ch; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: 1.1rem; letter-spacing: -.01em; line-height: 1.25; font-weight: 700; }
.eyebrow { margin: 0 0 var(--s-4); font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.mono { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }

/* nav: hairline top bar, mono labels */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(2,5,8,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-dark); color: var(--white); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.brand { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; }
.brand span { color: var(--sky); }
.nav-links { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav-links a { display: inline-block; padding: 10px 14px; color: rgba(255,255,255,.63); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-left: 1px solid transparent; transition: color var(--t), background-color var(--t); }
.nav-links a:hover { color: var(--white); background: rgba(255,255,255,.07); }
@media (max-width: 640px) { .nav-links a { padding: 10px 8px; letter-spacing: .08em; } }

/* hero: black, one sky trajectory line, oversized name */
.hero { position: relative; overflow: hidden; padding: clamp(72px, 12vh, 150px) 0 clamp(56px, 8vh, 100px); border-bottom: 1px solid var(--border-dark); }
.hero::after { content: ""; position: absolute; left: 0; top: 58%; width: min(64vw, 980px); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(57,204,245,.18) 15%, var(--sky) 68%, transparent 100%); opacity: .72;
  transform-origin: left center; animation: trajectory 1s cubic-bezier(.22,1,.36,1) .1s both; }
@keyframes trajectory { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero .name-en { display: block; margin-top: var(--s-3); font-family: var(--font-mono); font-size: .8rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); }
.lead { max-width: 56ch; margin: var(--s-6) 0 0; font-size: 1.05rem; color: var(--on-dark-2); }
.chips { display: flex; flex-wrap: wrap; gap: 0; list-style: none; padding: 0; margin: var(--s-6) 0 var(--s-8); border: 1px solid var(--border-dark); width: fit-content; }
.chip { padding: 8px 14px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); border-right: 1px solid var(--border-dark); }
.chip:last-child { border-right: 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cta { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 18px; background: var(--white); color: var(--black); border: 1px solid var(--white);
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--radius); transition: background-color var(--t), border-color var(--t), color var(--t); }
.cta:hover { background: var(--sky); border-color: var(--sky); }
.cta.ghost { background: transparent; color: var(--white); border-color: var(--border-dark); }
.cta.ghost:hover { border-color: var(--white); }

/* sections */
section.block { padding: clamp(56px, 8vh, 96px) 0; border-bottom: 1px solid var(--line); }
.sec-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-8); }
.sec-head .sub { margin: 0; max-width: 60ch; }

.grid { display: grid; gap: 0; grid-template-columns: 1fr; border: 1px solid var(--line); }
@media (min-width: 768px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }
.grid > .card { border: 0; }
.grid.cols-2 > .card + .card { border-top: 1px solid var(--line); }
@media (min-width: 768px) { .grid.cols-2 > .card + .card { border-top: 0; border-left: 1px solid var(--line); } }
.card { padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--radius); background: transparent; }
.card.solo { margin-top: var(--s-6); }
.card .meta { margin: 0 0 var(--s-3); font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.card h3 { margin: 0 0 var(--s-4); }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-5); margin: 0; font-size: .92rem; }
.facts dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding-top: 4px; }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.theme-dark .facts dt { color: var(--on-dark-3); } .theme-light .facts dt { color: var(--on-light-3); }

/* numbers: a ruled strip, not tiles */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); margin: 0 0 var(--s-8); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: var(--s-5) var(--s-5) var(--s-4); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat:nth-child(2n) { border-right: 0; }
@media (min-width: 768px) { .stat { border-bottom: 0; } .stat:nth-child(2n) { border-right: 1px solid var(--line); } .stat:last-child { border-right: 0; } }
.stat .n { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .n small { font-size: .45em; letter-spacing: 0; font-weight: 600; margin-left: 2px; }
.stat .l { margin-top: var(--s-2); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.theme-dark .stat .l { color: var(--on-dark-3); } .theme-light .stat .l { color: var(--on-light-3); }

/* prose slot: visibly unwritten — Teru writes it */
.todo-prose { padding: var(--s-4); border: 1px dashed var(--line); font-size: .85rem; }
.theme-dark .todo-prose { color: var(--on-dark-3); } .theme-light .todo-prose { color: var(--on-light-3); }
.todo-prose::before { content: "TEXT — TO BE WRITTEN BY TERU"; display: block; margin-bottom: var(--s-2); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em; }

/* timeline: ruled rows, mono dates */
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 1fr; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .timeline li { grid-template-columns: 140px 1fr; column-gap: var(--s-6); } .timeline .note { grid-column: 2; } }
.timeline .when { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; padding-top: 3px; }
.theme-dark .timeline .when { color: var(--sky); } .theme-light .timeline .when { color: var(--sky-deep); }
.timeline .what { font-weight: 700; }
.timeline .note { font-size: .9rem; }
.theme-dark .timeline .note { color: var(--on-dark-2); } .theme-light .timeline .note { color: var(--on-light-2); }

/* projects: ruled list */
.projects { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.projects li { display: grid; grid-template-columns: 1fr; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); transition: background-color var(--t); }
@media (min-width: 768px) { .projects li { grid-template-columns: 220px 1fr; column-gap: var(--s-6); } }
.projects li:hover { background: var(--hover); }
.projects .pname { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; font-weight: 700; }
.projects .pdesc { font-size: .92rem; }
.theme-dark .projects .pdesc { color: var(--on-dark-2); } .theme-light .projects .pdesc { color: var(--on-light-2); }

footer.foot { padding: var(--s-8) 0 var(--s-12); color: var(--on-dark-3); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
footer.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); }

/* ---- /app shell ---- */
.app { padding: var(--s-8) 0 var(--s-10); min-height: 60vh; }
.app-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.day-nav { display: flex; align-items: center; gap: var(--s-5); font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; }
.day-nav a { color: var(--on-dark-2); }
.day-nav a:hover { color: var(--white); }
.day-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; color: var(--white); }
.day-title .dow { margin-left: 8px; font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .12em; color: var(--sky); }
.linkish { background: none; border: 0; padding: 0; color: var(--on-dark-3); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.linkish:hover { color: var(--white); }
.login-wrap { max-width: 420px; }
.login-form { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.login-form input[type=password] { width: 100%; min-height: 44px; padding: 0 12px; background: transparent; color: var(--white); border: 1px solid var(--border-dark); border-radius: var(--radius); font-size: 1rem; }
.login-form input[type=password]:focus { outline: 0; border-color: var(--sky); }
.login-form .cta { justify-content: center; }

/* ---- day strip ---- */
.strip-wrap { border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.strip { display: block; width: 100%; height: 84px; }
.lane-svg { display: block; width: 100%; height: 22px; }
.seg { stroke: none; }
.seg.cat-work { fill: #4C6EF5; }
.seg.cat-study { fill: #7048E8; }
.seg.cat-comm { fill: #12B886; }
.seg.cat-fun { fill: #F76707; }
.seg.cat-move { fill: #A47B50; }
.seg.cat-away { fill: #6B7280; }
.seg.cat-unk { fill: #D0D4D9; }
.seg.cat-desk { fill: #7F93A8; }
.seg.cat-bed { fill: #3A4A5C; }
.seg.cat-none { fill: transparent; }
.seg.future { fill: rgba(255,255,255,.04); }
.seg:hover { stroke: var(--white); stroke-width: 2; vector-effect: non-scaling-stroke; }
.hatch { pointer-events: none; }
.tick { stroke: rgba(2,5,8,.6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.now { stroke: var(--sky); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ticks { display: flex; justify-content: space-between; padding: 6px 0 0; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; color: var(--on-dark-3); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); font-size: .78rem; color: var(--on-dark-2); }
.lg { display: inline-flex; align-items: center; gap: 8px; }
.sw { display: inline-block; width: 14px; height: 14px; border: 1px solid rgba(255,255,255,.25); }
.sw.cat-work { background: #4C6EF5; } .sw.cat-study { background: #7048E8; } .sw.cat-comm { background: #12B886; } .sw.cat-fun { background: #F76707; }
.sw.cat-move { background: #A47B50; } .sw.cat-away { background: #6B7280; } .sw.cat-unk { background: #D0D4D9; }
.sw.cat-desk { background: #7F93A8; } .sw.cat-bed { background: #3A4A5C; }
.sw.measured-key { background: var(--white); }
.sw.estimated-key { background: repeating-linear-gradient(45deg, var(--white) 0 3px, rgba(2,5,8,.7) 3px 5px); }
.sw.none-key { background: transparent; border-style: dashed; }
.sw.estimated { background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(2,5,8,.55) 3px 5px); }
.lanes { border: 1px solid var(--line); }
.lane { display: grid; grid-template-columns: 140px 1fr; align-items: center; border-bottom: 1px solid var(--line-soft); }
.lane:last-child { border-bottom: 0; }
.lane-name { padding: 4px 12px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); border-right: 1px solid var(--line-soft); }
.lane-name .t3 { text-transform: none; letter-spacing: 0; }
.lane-empty { fill: rgba(255,255,255,.28); font-family: var(--font-mono); font-size: 11px; }
.totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0; border: 1px solid var(--line); }
.tot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); font-size: .85rem; }
.tot-cat { min-width: 3em; }
.tot-min { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--white); }
@media (max-width: 640px) { .lane { grid-template-columns: 90px 1fr; } .day-nav { gap: var(--s-3); } .app-bar { flex-wrap: wrap; } }

/* ---- application runway ---- */
.runway { --accent: var(--on-dark-3); background: #05070a; }
.runway a { color: #68d7ff; }
.runway .linkish { color: #68d7ff; }
.runway-head { padding: var(--s-8) 0 var(--s-10); border-bottom: 1px solid var(--line); }
.runway-head h1 { max-width: none; font-size: clamp(2.7rem, 7vw, 5.8rem); }
.runway-lede { max-width: 62ch; margin: var(--s-5) 0 0; color: var(--on-dark-2); }
.runway-stats { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; border: 1px solid var(--line); }
.runway-stats > div { min-width: 0; padding: var(--s-5); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.runway-stats > div:nth-child(2n) { border-right: 0; }
.runway-stats dt { min-height: 3em; color: var(--on-dark-3); font-family: var(--font-mono); font-size: .66rem; line-height: 1.45; letter-spacing: .08em; text-transform: uppercase; }
.runway-stats dd { margin: var(--s-2) 0 0; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.runway-stats small { margin-left: 3px; color: var(--on-dark-3); font-size: .38em; }
.runway-section { padding: var(--s-10) 0; border-bottom: 1px solid var(--line); }
.runway-section h2 { margin-bottom: var(--s-6); }
.runway-moves { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.runway-moves li { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.runway-moves p { max-width: 72ch; margin: var(--s-2) 0 0; color: var(--on-dark-2); }
.move-no { color: var(--on-dark-3); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; }
.runway-meta { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; }
.runway-note { padding-left: var(--s-3); border-left: 1px solid var(--line); }
.runway-table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.runway-table { width: 100%; min-width: 680px; border-collapse: collapse; text-align: left; }
.runway-table th, .runway-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.runway-table th { color: var(--on-dark-3); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.runway-table td { color: var(--on-dark-2); font-size: .88rem; }
.runway-table td:nth-child(1), .runway-table td:nth-child(2) { color: var(--white); font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.runway-table tr.critical td:first-child { border-left: 4px solid var(--white); }
.runway-table tr.warning td:first-child { border-left: 4px solid var(--gray); }
.runway-cols { display: grid; grid-template-columns: 1fr; gap: var(--s-8); }
.runway-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.runway-list li { display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.runway-list b { font-size: .9rem; }
.runway-list span { color: var(--on-dark-3); font-size: .8rem; }
.runway-foot { margin: var(--s-6) 0 0; color: var(--on-dark-3); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .06em; }
@media (min-width: 760px) {
  .runway-stats { grid-template-columns: repeat(4, 1fr); }
  .runway-stats > div { border-bottom: 0; }
  .runway-stats > div:nth-child(2n) { border-right: 1px solid var(--line); }
  .runway-stats > div:last-child { border-right: 0; }
  .runway-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .runway .day-nav { width: 100%; order: 3; justify-content: space-between; }
  .runway-moves li { grid-template-columns: 36px 1fr; }
}