/* Field mode (plans/field-mode.md): big targets for cold thumbs, system fonts so it looks the same offline. */
:root { --paper: #f4efe4; --paper-2: #e9e2d3; --ink: #2b2620; --muted: #6d6458; --line: #cfc5b3; --accent: #7a4b2a;
  --unc: #8a5a00; --ok: #3d6b3a; --warn: #9b3324; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #1d1b18; --paper-2: #2a2723; --ink: #ece5d8; --muted: #a59b8c; --line: #45403a;
    --accent: #d7a173; --unc: #e0b45c; --ok: #8fc189; --warn: #f08a76; }
}
:root[data-theme="dark"] { --paper: #1d1b18; --paper-2: #2a2723; --ink: #ece5d8; --muted: #a59b8c; --line: #45403a;
  --accent: #d7a173; --unc: #e0b45c; --ok: #8fc189; --warn: #f08a76; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.45 Georgia, "Times New Roman", serif; }
a { color: inherit; }
h1 { font-weight: normal; font-size: 1.45rem; margin: .2rem 0 .3rem; }
h2 { font-weight: normal; font-size: 1.15rem; margin: 1.2rem 0 .4rem; color: var(--muted); }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.bar a { text-decoration: none; min-height: 40px; display: flex; align-items: center; }
.bar-out { font-size: .9rem; color: var(--muted); }
.bar-out.is-due { color: var(--warn); font-weight: bold; }
main { max-width: 34rem; margin: 0 auto; padding: 12px 16px calc(40px + env(safe-area-inset-bottom)); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--paper-2); color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; }
.btn.quiet { min-height: 40px; font-size: .9rem; color: var(--muted); }
.btn.is-busy { opacity: .5; }
.warn { color: var(--warn); }
.ok { color: var(--ok); }

form label { display: block; margin: .6rem 0; }
form input:not([type]), form input[type=text] { display: block; width: 100%; min-height: 48px; margin-top: 4px; padding: 0 12px;
  font: inherit; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); }
.tick { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.tick input { width: 22px; height: 22px; }
.rules { padding-left: 1.2rem; color: var(--muted); }
.rules li { margin: .4rem 0; }

.rows, .stones, .photos, .parts, .asks { list-style: none; padding: 0; margin: 0; }
.rows li a, .stones li a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0;
  border-bottom: 1px solid var(--line); text-decoration: none; }
.th { width: 44px; height: 60px; flex: none; object-fit: contain; }
.st-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.st-name { overflow: hidden; text-overflow: ellipsis; }
.stones .st-name { white-space: nowrap; font-size: .95rem; }
.mk { color: var(--muted); font-size: .9rem; margin-left: 4px; }
.crumb { margin: 0; font-size: .9rem; color: var(--muted); }

.head { display: flex; gap: 14px; align-items: center; margin: .3rem 0; }
.head .th { width: 66px; height: 90px; }
.head .st-name { margin: 0; }
.ins { margin: .6rem 0; padding: .5rem .7rem; border-left: 3px solid var(--line); font-size: .95rem; }
.ins.verse { font-style: italic; }
.unc { color: var(--unc); border-bottom: 1px dotted var(--unc); }
.lost { color: var(--muted); }
.asks li { margin: .4rem 0; padding: .4rem .7rem; background: var(--paper-2); border-radius: 4px; font-size: .95rem; }
.asks li::before { content: "? "; color: var(--unc); font-weight: bold; }

.shoot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1rem 0; }
.shoot .btn { min-height: 64px; text-align: center; }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photos li { position: relative; }
.photos img, .photos .gone { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; background: var(--paper-2); }
.photos .gone { display: flex; align-items: center; justify-content: center; font-size: .8rem; color: var(--muted); }
.ph-tag { display: block; font-size: .78rem; color: var(--muted); }
.del { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 3px;
  background: color-mix(in srgb, var(--paper) 80%, transparent); color: var(--ink); font-size: 14px; }
.nav { display: flex; justify-content: space-between; margin-top: 1.4rem; }

.parts li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.pt-name { word-break: break-all; }
.parts .btn { margin: 6px 6px 0 0; }