/* shell.css — reset, nav (bottom bar / left rail), strips, shared pieces. */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; scroll-padding-top: 24px; }
body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
h1 { font-size: var(--fs-1); } h2 { font-size: var(--fs-2); } h3 { font-size: var(--fs-3); }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: var(--lake); text-decoration: underline; text-underline-offset: 3px; }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--lake); outline-offset: 2px; border-radius: 6px; }
button:disabled { cursor: wait; opacity: .6; }
.tnum { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Screen container */
.screen { min-height: 100vh; padding: 16px 16px calc(84px + env(safe-area-inset-bottom, 0px)); max-width: 1100px; }
.screen:focus { outline: none; }
.screen-enter { animation: fadeIn 160ms var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 18px; border-radius: var(--radius-s); font-size: var(--fs-body); font-weight: 600; text-decoration: none; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.btn-primary { background: var(--lake); color: var(--on-accent); }
.btn-primary:hover { background: var(--lake-hover); }
.btn-ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--line-hover); }
.btn-danger { background: var(--bad); color: #fff; }
.btn-small { min-height: 40px; padding: 0 14px; font-size: var(--fs-small); }
.btn-link { color: var(--lake); text-decoration: underline; text-underline-offset: 3px; min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 4px; font-weight: 600; }

.cap { font-size: var(--fs-cap); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.eyebrow { font-size: var(--fs-small); font-weight: 700; color: var(--pine); letter-spacing: .02em; }
.muted { color: var(--ink-dim); }
.small { font-size: var(--fs-small); }

/* Cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.card + .card { margin-top: 14px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.card-head h2, .card-head h3 { flex: 1 1 200px; }
.stack > * + * { margin-top: 12px; }
.grid-2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-3 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* Chips / badges */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 11px; border-radius: 999px; font-size: var(--fs-small); font-weight: 600; background: var(--card-2); color: var(--ink); border: 1px solid var(--line); }
.chip-good { background: var(--good-dim); color: var(--good); border-color: transparent; }
.chip-warn { background: var(--warn-dim); color: var(--warn); border-color: transparent; }
.chip-bad { background: var(--bad-dim); color: var(--bad); border-color: transparent; }
.chip-lake { background: var(--lake-dim); color: var(--lake); border-color: transparent; }
.chip-pine { background: var(--pine-dim); color: var(--pine); border-color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Pills (filters) */
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-weight: 600; font-size: var(--fs-small); }
.pill[aria-pressed="true"] { background: var(--pine); color: #fff; border-color: var(--pine); }

/* Hero */
.hero { padding: 26px 20px; border-radius: var(--radius); background: linear-gradient(135deg, var(--lake-dim), var(--pine-dim)); border: 1px solid var(--line); }
.hero h1 { font-size: var(--fs-hero); line-height: 1.05; margin: 6px 0 10px; }
.hero p { font-size: var(--fs-3); color: var(--ink-dim); max-width: 48ch; }
.hero .btn { margin-top: 16px; }

/* Empty states */
.empty { padding: 22px; text-align: center; border: 1px dashed var(--line-hover); border-radius: var(--radius); background: var(--card-2); }
.empty h3 { margin-bottom: 6px; }
.empty p { color: var(--ink-dim); max-width: 46ch; margin: 0 auto 12px; }

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
th, td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { font-weight: 700; background: var(--card-2); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

/* Status line + strips */
.status { min-height: 24px; color: var(--pine); font-weight: 600; font-size: var(--fs-small); margin-top: 10px; }
.app-chrome { position: sticky; top: 0; z-index: 30; }
.app-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 16px; background: var(--card-2); border-bottom: 1px solid var(--line); color: var(--ink-dim); font-size: var(--fs-small); }
.app-strip b { color: var(--pine); }
.save-problem { padding: 14px 16px; background: var(--bad-dim); border-bottom: 1px solid var(--bad); color: var(--ink); }
.save-problem p { margin: 4px 0 10px; }
[hidden] { display: none !important; }
.notice { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: var(--fs-small); font-weight: 600; box-shadow: var(--shadow); max-width: calc(100vw - 32px); z-index: 50; }
.notice[hidden] { display: none; }
@media (min-width: 1024px) { .notice { bottom: 24px; left: calc(50% + var(--rail) / 2); } }

/* Nav */
.nav { z-index: 40; }
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--tap); min-width: 44px; color: var(--ink-dim); font-size: var(--fs-cap); font-weight: 700; letter-spacing: .03em; border-radius: var(--radius-s); text-decoration: none; }
.nav-item svg { width: 24px; height: 24px; flex: none; }
.nav-item[aria-current="page"] { color: var(--lake); }
.nav-brand, .nav-desktop { display: none; }
@media (max-width: 1023px) {
  .nav { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: rgba(250, 246, 238, .97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
}
@media (min-width: 1024px) {
  .nav { position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); display: flex; flex-direction: column; gap: 2px; padding: 22px 14px; background: var(--card); border-right: 1px solid var(--line); }
  .nav-mobile-only { display: none; }
  .nav-brand, .nav-desktop { display: flex; }
  .nav-brand { flex-direction: column; padding: 4px 12px 18px; }
  .nav-mark { font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--pine); }
  .nav-sub { font-size: var(--fs-small); color: var(--ink-dim); margin-top: 4px; }
  .nav-item { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 12px; font-size: var(--fs-body); font-weight: 600; letter-spacing: 0; }
  .nav-item[aria-current="page"] { background: var(--lake-dim); }
  .nav-sep { height: 1px; background: var(--line); margin: 14px 10px; }
  .screen, .app-chrome { margin-left: var(--rail); }
  .screen { padding-bottom: 40px; }
}
.skip-link { position: fixed; top: 10px; left: 10px; padding: 12px 18px; background: var(--ink); color: #fff; z-index: 100; transform: translateY(-150%); border-radius: var(--radius-s); }
.skip-link:focus { transform: none; }

/* Sheet rows (More menu) */
.sheet-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 0 14px; margin-bottom: 8px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s); }
.sheet-row b { font-weight: 700; display: block; }
.sheet-row span.sub { display: block; color: var(--ink-dim); font-size: var(--fs-small); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Shared mode: sign-in gate, strip, conflicts, import preview */
.gate{display:flex;justify-content:center;padding:10vh 16px 24px}.gate[hidden]{display:none}.gate-card{max-width:460px;width:100%;background:var(--card,#fff);border-radius:20px;padding:28px 24px;box-shadow:0 10px 40px rgba(23,60,52,.08);text-align:center}.gate-card h1{font-size:1.6rem;line-height:1.2;margin:0 0 10px}.gate-status{margin:8px 0;color:var(--muted)}
.gate-emulator{margin-top:22px;padding-top:16px;border-top:1px dashed var(--line,#d9e0dc);text-align:left}.gate-emulator label{display:block;font-size:.9rem;margin:8px 0}.gate-emulator input{display:block;width:100%;margin-top:4px;min-height:44px;padding:8px 10px;border:1px solid var(--line,#cfd8d3);border-radius:10px;font:inherit}
.strip-signout{margin-left:auto;min-height:32px;padding:4px 10px}.mode-device .strip-signout{display:none}
.conflict-list{margin:12px 0 0;display:grid;gap:8px}.conflict-list li{padding:8px 10px;border:1px solid var(--line,#d9e0dc);border-radius:10px}
.import-rows{margin:10px 0 0;display:grid;gap:6px}.import-rows li{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line,#d9e0dc);border-radius:10px}.import-rows input{margin-top:3px;width:auto;min-height:0}.import-rows .kind{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.import-rows .is-new .kind{color:var(--teal,#087d68)}.import-rows .is-changed .kind{color:#8b5924}
.share-box{background:var(--soft,#eef4f1);border-radius:12px;padding:12px 14px;margin-top:10px}.share-box pre{white-space:pre-wrap;font:inherit;margin:8px 0 0}
.interest-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}.interest-row .chip{min-height:26px}

/* Organizers panel (Save & share, shared mode) */
.org-list .org-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line, #e3e0d6); }
.org-list .org-row:first-child { border-top: 0; }
.org-list .org-row > div { flex: 1 1 160px; min-width: 0; }