/* phone-shell-v1.css
 * Universal phone-first app shell.  Mobile first, theme-tokenized,
 * no external fonts or frameworks.  ADA labels and 44px touch targets.
 */

:root {
  --accent:        #2ec27e;
  --accent-dark:   #1f8d5b;
  --bg:            #0b0d11;
  --panel:         #15181f;
  --ink:           #e7e9ee;
  --muted:         #8b91a0;
  --line:          #2a2f3a;
  --topbar-h:      54px;
  --strip-h:       54px;
  --tap:           48px;
  --radius:        10px;
  --offline-ok:    #2ec27e;
  --offline-bad:   #e25555;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
}

button {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 0 14px;
  min-height: var(--tap);
  min-width: var(--tap);
  cursor: pointer;
  touch-action: manipulation;
}
button:active { transform: translateY(1px); }
button.primary {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #0b0d11;
  font-weight: 700;
}
button[aria-pressed="true"] {
  background: var(--accent-dark);
  border-color: var(--accent);
  color: #fff;
}

input[type="number"],
input[type="text"],
textarea {
  background: #0e1117;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  min-height: var(--tap);
  width: 100%;
}
textarea { resize: vertical; }

label.field {
  display: block;
  margin: 10px 0;
  color: var(--muted);
  font-size: 0.9em;
}
label.field span { display: block; margin-bottom: 4px; }

/* -----------------------------------------------------------------
 * Shell layout
 * ----------------------------------------------------------------- */
.shell {
  position: fixed; inset: 0;
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
  background: var(--bg);
}

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 0 8px;
  z-index: 30;
}
.topbar .title  { font-weight: 700; padding-left: 6px; font-size: 1.02rem; letter-spacing: -0.01em; }
.topbar .status { color: var(--muted); font-size: 0.82em; text-align: center; }
.topbar .ham    {
  justify-self: end;
  background: transparent;
  border: 1px solid var(--line);
  width: var(--tap);
  height: var(--tap);
  font-size: 1.4em;
}

.offline-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--offline-bad);
  margin-right: 6px;
  vertical-align: middle;
}
.offline-dot.ok { background: var(--offline-ok); }

/* Top and bottom strips */
.strip {
  position: absolute;
  left: 0; right: 0;
  height: var(--strip-h);
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 4px;
  z-index: 25;
  transform: translateY(-100%);
  transition: transform 220ms ease;
  border-bottom: 1px solid var(--line);
}
.strip.bottom {
  top: auto;
  bottom: 0;
  transform: translateY(100%);
  border-bottom: 0;
  border-top: 1px solid var(--line);
}
.strip.top    { top: var(--topbar-h); }
.shell.open .strip.top    { transform: translateY(0); }
.shell.open .strip.bottom { transform: translateY(0); }
.shell.locked-open .strip.top    { transform: translateY(0); }
.shell.locked-open .strip.bottom { transform: translateY(0); }

.strip button {
  flex: 1;
  margin: 6px 4px;
  height: calc(var(--strip-h) - 12px);
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink);
  font-size: 0.86em;
}
.strip button:active { background: var(--line); }
.strip button .icon { display: block; font-size: 1.05em; line-height: 1.1; }
.strip button .label { display: block; font-size: 0.72em; color: var(--muted); margin-top: 2px; }

/* Main scrollable content */
.main {
  position: relative;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 80px;
  height: 100%;
}

/* Home grid */
.home h1 { font-size: 1.2rem; margin: 6px 0 8px; }
.home p.intro { color: var(--muted); margin: 0 0 14px; line-height: 1.45; }

.showcase {
  background: linear-gradient(180deg, rgba(46,194,126,0.10), rgba(46,194,126,0.03));
  border: 1px solid var(--accent-dark);
  border-radius: var(--radius);
  padding: 14px;
  margin: 10px 0 16px;
}
.showcase h2 { margin: 0 0 4px; font-size: 1.1rem; color: var(--accent); }
.showcase p  { margin: 0 0 10px; color: var(--ink); }

.app-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.app-tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 10px;
  min-height: 92px;
  text-align: left;
  color: var(--ink);
  display: flex; flex-direction: column; justify-content: space-between;
}
.app-tile:active { background: #1c2029; }
.app-tile .name { font-weight: 700; font-size: 0.98rem; margin-bottom: 4px; }
.app-tile .desc { color: var(--muted); font-size: 0.78em; line-height: 1.35; }

@media (min-width: 600px) {
  .app-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .app-grid { grid-template-columns: repeat(4, 1fr); }
}

/* App content panel */
.app-content { max-width: 720px; }
.app-content h2 { margin: 4px 0 6px; font-size: 1.2rem; }
.app-content p.muted { color: var(--muted); margin: 0 0 14px; }

.row-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 10px 0;
}
.row-actions button { flex: 1 1 auto; min-width: 90px; }

/* Golf module */
.golf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 6px;
  margin: 8px 0;
}
.club { padding: 0 8px; height: 44px; font-size: 0.88em; }
.golf-shot-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.qual { flex: 1 1 30%; height: 44px; }
.golf-summary {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  margin: 12px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  font-size: 0.92em;
}
.shot-log {
  list-style: none; padding: 0; margin: 8px 0 0;
}
.shot-log li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.85em;
  margin-bottom: 6px;
}

/* Calculator result */
.calc-result {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  font-size: 1.05em;
  margin-top: 10px;
}
.calc-result strong { color: var(--accent); }

/* BetterWithBret */
.bret-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin: 6px 0 10px;
}
.bret-card blockquote { margin: 0; font-size: 1.05em; line-height: 1.45; }

/* Yoga */
.yoga-pose {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin: 8px 0;
}

/* Knee checklist */
.check-list { list-style: none; padding: 0; margin: 8px 0; }
.check-list li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.check-list label {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.check-list input[type="checkbox"] {
  width: 22px; height: 22px;
  accent-color: var(--accent);
}

/* Song viewer */
.song-viewer {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-top: 10px;
}
.song-viewer pre {
  white-space: pre-wrap;
  margin: 8px 0 0;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.95em;
  line-height: 1.45;
}

/* Disclosure / footer */
.disclosure {
  background: rgba(46,194,126,0.06);
  border-left: 4px solid var(--accent);
  padding: 10px 14px;
  margin: 10px 0;
  border-radius: 8px;
  font-size: 0.88em;
}

/* ADA mode adjustments (G6) */
.shell.ada-large {
  font-size: 1.12rem;
}
.shell.ada-large .app-tile .name { font-size: 1.08rem; }
.shell.ada-large .app-tile .desc { font-size: 0.86em; }
.shell.ada-large button { min-height: 56px; }

/* Landscape adjustments */
@media (orientation: landscape) {
  .shell.landscape-game .topbar { display: none; }
  .shell.landscape-game .strip  { display: none; }
  .shell.landscape-game .main   { padding: 8px; }
}

/* Helpers */
.hidden { display: none !important; }
.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;
}