/* ============================================================================
   FIELD — the toolkit as an app you keep on your phone.
   A launcher with four doors, a segmented control, and the index as a grid of
   cards you can hit with a thumb.
   ========================================================================== */

html[data-theme="field"] {
  --paper: #F6F2EA;
  --card: #FFFFFF;
  --ink: #14232A;
  --muted: #5C6C72;
  --teal: #0F5158;
  --teal-soft: #DCE9E6;
  --sand: #B4832F;
  --line: #E2D9C9;
  --mark: #F7E3B4;
  --shadow: 0 1px 1px rgba(20,35,42,.04), 0 10px 26px -16px rgba(20,35,42,.28);
  --radius: 18px;
}

/* ---------------------------------------------------------------- masthead */
html[data-theme="field"] .masthead { padding: calc(14px + env(safe-area-inset-top)) 0 6px; }
html[data-theme="field"] .brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; }
html[data-theme="field"] .logo { height: 28px; }
html[data-theme="field"] .kicker {
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); border-left: 1px solid var(--line); padding-left: 10px;
}
html[data-theme="field"] .install { background: var(--teal); color: #fff; }

/* ---------------------------------------------------------------- search + segmented tabs */
html[data-theme="field"] .sticky { padding: 8px 0 10px; }
html[data-theme="field"] .searchbar { height: 50px; border-radius: 14px; background: var(--card); }
html[data-theme="field"] .quick { display: flex; gap: 7px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; }
html[data-theme="field"] .quick::-webkit-scrollbar { display: none; }
html[data-theme="field"] .quick button {
  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap;
  color: var(--teal); background: var(--teal-soft); border: 0; border-radius: 999px;
  padding: 7px 13px; cursor: pointer;
}
html[data-theme="field"] .tabs {
  display: grid; grid-auto-flow: column; gap: 2px; margin-top: 8px;
  background: color-mix(in srgb, var(--line) 55%, transparent);
  border-radius: 12px; padding: 3px;
}
html[data-theme="field"] .tab {
  border: 0; border-radius: 9px; background: none; padding: 9px 4px;
  font-size: 13px; font-weight: 600; color: var(--muted);
}
html[data-theme="field"] .tab.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(20,35,42,.10); }

/* ---------------------------------------------------------------- home launcher */
html[data-theme="field"] .home-head { padding: 26px 0 18px; }
html[data-theme="field"] .home-head h1 { font-size: clamp(26px, 6.6vw, 34px); }
html[data-theme="field"] .tiles { display: grid; grid-template-columns: 1fr; gap: 10px; }
html[data-theme="field"] .tile {
  display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto;
  column-gap: 14px; row-gap: 2px; align-items: center; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; cursor: pointer; box-shadow: var(--shadow); font: inherit; color: inherit;
}
html[data-theme="field"] .tile:active { transform: scale(.995); }
html[data-theme="field"] .tile-ico {
  grid-row: span 2; width: 44px; height: 44px; border-radius: 12px;
  background: var(--teal-soft); display: grid; place-items: center; color: var(--teal);
}
html[data-theme="field"] .tile-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="field"] .tile-t { font-family: var(--serif); font-size: 19px; font-weight: 600; }
html[data-theme="field"] .tile-d { grid-column: 2; font-size: 13.5px; color: var(--muted); }
html[data-theme="field"] .tile-n {
  grid-row: span 2; font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sand); text-align: right; max-width: 84px;
}
html[data-theme="field"] .home-note { margin: 22px 0 6px; }
html[data-theme="field"] .home-note-t {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 8px;
}
html[data-theme="field"] .recent { display: flex; flex-wrap: wrap; gap: 7px; }
html[data-theme="field"] .recent button {
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px; cursor: pointer;
}

/* ---------------------------------------------------------------- heads */
html[data-theme="field"] .panel-head { padding: 18px 0 12px; }

/* ---------------------------------------------------------------- A-Z */
html[data-theme="field"] .az { padding: 2px 0 12px; }
html[data-theme="field"] .az button { min-width: 30px; height: 30px; border-radius: 8px; }
html[data-theme="field"] .az button.is-on { color: #fff; background: var(--teal); }

/* ---------------------------------------------------------------- topic grid */
html[data-theme="field"] .topics { gap: 9px; }
html[data-theme="field"] .topic { position: relative; }
html[data-theme="field"] .topic > summary { padding: 15px 16px 15px 15px; }
html[data-theme="field"] .topic > summary::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--teal); opacity: 0;
  transition: opacity .15s;
}
html[data-theme="field"] .topic[open] > summary::before { opacity: 1; }
html[data-theme="field"] .topic-name { font-size: 18px; }
html[data-theme="field"] .count { font-size: 11.5px; }
html[data-theme="field"] .verses { padding: 2px 0 8px; }
html[data-theme="field"] .verse { padding: 12px 16px; }
html[data-theme="field"] .related { padding: 8px 16px 16px; }

/* ---------------------------------------------------------------- one step */
html[data-theme="field"] .step { padding: 18px; }
html[data-theme="field"] .step-q { font-size: 20px; }
html[data-theme="field"] .step-row { padding: 9px 0; }

/* ---------------------------------------------------------------- icebreakers */
html[data-theme="field"] .ice-item { padding: 15px 16px; }
html[data-theme="field"] .ice-q { font-family: var(--serif); font-size: 17px; }

/* ---------------------------------------------------------------- fun */
html[data-theme="field"] .fun li { background: var(--card); box-shadow: var(--shadow); border-color: transparent; }

/* ---------------------------------------------------------------- results */
html[data-theme="field"] .res { padding: 14px 16px; box-shadow: var(--shadow); border-color: transparent; }
html[data-theme="field"] .res .where { color: var(--sand); }

/* ---------------------------------------------------------------- wide screens */
@media (min-width: 760px) {
  html[data-theme="field"] .tiles { grid-template-columns: 1fr 1fr; }
  html[data-theme="field"] .topics { grid-template-columns: 1fr 1fr; align-items: start; }
  html[data-theme="field"] .topic[open] { grid-column: 1 / -1; }
  html[data-theme="field"] .steps { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---------------------------------------------------------------- dark */
@media (prefers-color-scheme: dark) {
  html[data-theme="field"] {
    --paper: #0F161A; --card: #172127; --ink: #ECE8E0; --muted: #98A5AA;
    --teal: #7FC3BE; --teal-soft: #1C3034; --sand: #D6A964; --line: #253136; --mark: #4A3C1C;
  }
  html[data-theme="field"] .install { color: #08191B; }
}