:root{color-scheme:light;font:17px/1.5 system-ui,sans-serif;color:#173b40;background:#f6f4ec}*{box-sizing:border-box}body{margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.top{padding:18px max(18px,calc((100% - 980px)/2));background:#134f55;color:white;display:flex;flex-direction:column}.top a{font-weight:800;letter-spacing:.13em;color:inherit;text-decoration:none}.top span{font-size:.85rem}main{max-width:980px;margin:auto;padding:20px 16px 110px}h1{font-size:clamp(1.65rem,5vw,2.5rem);line-height:1.15}h2{font-size:1.3rem}p{overflow-wrap:anywhere}button,.button{font:inherit;min-height:48px;border:1px solid #8ba7a4;border-radius:12px;background:white;color:#173b40;padding:12px 16px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #d78a30;outline-offset:3px}button[aria-pressed=true],.primary{background:#134f55;color:white;border-color:#134f55}button:disabled{opacity:.55;cursor:wait}.actions,.choices{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.choices button{flex:1 1 140px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.species{position:relative;flex-direction:column;padding:8px;font-size:.9rem;min-width:0}.species img{width:100%;aspect-ratio:16/9;object-fit:contain;border-radius:8px;background:#e3eeeb}.species[aria-pressed=true]:after{content:'✓';position:absolute;top:10px;right:10px;background:#134f55;border:2px solid white;color:white;border-radius:50%;width:28px;height:28px;text-align:center;font-weight:900}.card{background:white;padding:18px;border:1px solid #ccd9d4;border-radius:16px;margin:16px 0;overflow-wrap:anywhere}.card h2{margin:0 0 8px}.muted,small{color:#516968}input,select,textarea{font:inherit;width:100%;border:1px solid #819d99;border-radius:10px;padding:13px;color:inherit;background:white;min-height:48px}textarea{min-height:140px;resize:vertical}label{display:block;margin:16px 0}label input[type=checkbox]{width:26px;min-height:26px;vertical-align:middle;margin-right:14px}.consent{padding:12px;background:#eef3ef;border-radius:10px;min-height:52px}.stepnav{position:sticky;bottom:calc(36px + env(safe-area-inset-bottom));display:flex;gap:12px;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:#f6f4ec;z-index:2}.stepnav button{flex:1}.counter{font-weight:700}.user-text{white-space:pre-wrap}.conditions{display:grid;grid-template-columns:1fr;gap:8px}.stepper{display:flex;align-items:center;gap:12px}.stepper output{flex:1;text-align:center}.stepper button{min-width:48px}#status{position:fixed;bottom:0;left:0;right:0;padding:8px 16px calc(8px + env(safe-area-inset-bottom));margin:0;background:#e4efec;font-size:.85rem;z-index:3;pointer-events:none}dialog{width:min(96vw,880px);max-height:94dvh;border:0;border-radius:16px;padding:16px;background:#f6f4ec;color:inherit}dialog::backdrop{background:#092a35b3}#close-modal{position:sticky;top:0;z-index:5;display:block;margin-left:auto}dialog iframe{display:block;width:100%;height:76dvh;border:0}body:has(dialog[open]){overflow:hidden}img{max-width:100%}.question{display:block;width:100%;margin-top:12px;text-align:left}.danger{color:#952f23}.error{color:#952f23;font-weight:600}.notice{padding:14px;background:#e4efec;border-radius:10px}details>summary{padding:12px;min-height:48px;cursor:pointer}a{color:#155e68}.offline-ready{color:#21623d}@media(min-width:600px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.conditions{grid-template-columns:repeat(2,minmax(0,1fr))}main{padding:30px 24px 100px}}@media(min-width:900px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(prefers-reduced-motion:no-preference){button{transition:background .12s}}

/* Numeric conditions: compact controls and prominent, aligned values. */
.conditions{gap:16px;align-items:stretch}
.conditions>section{min-width:0;padding:18px 14px 12px;background:#fff;border:1px solid #ccd9d4;border-radius:16px;text-align:center;display:flex;flex-direction:column;align-items:center}
.conditions>section h2{font-size:1.05rem;line-height:1.35;margin:0 0 16px}
.conditions .stepper{display:grid;grid-template-columns:52px minmax(80px,1fr) 52px;gap:12px;width:100%;max-width:280px;margin:auto 0 8px}
.conditions .stepper output{font-size:2.5rem;line-height:1.2;font-weight:750;font-variant-numeric:tabular-nums;min-width:0}
.conditions .stepper button{width:52px;height:52px;padding:0;font-size:1.7rem;line-height:1;background:#e4efec;border-color:#a7c0ba}
.conditions>section>button{margin:0;min-height:44px;padding:8px 16px;border-color:transparent;background:transparent;font-size:.85rem;color:#516968;text-decoration:underline;text-underline-offset:3px}
.conditions>label{min-width:0;margin:0}
.conditions>label:first-child{grid-column:1/-1;margin-bottom:4px}

/* Encounter pages give the diver's own words a distinct place. */
.encounter-card{padding:16px;display:grid;gap:16px;align-items:start}
.encounter-card>.species{width:100%;padding:0;overflow:hidden;border:0;border-radius:10px;background:#edf3ef;gap:0}
.encounter-card>.species img{border-radius:0;width:100%;aspect-ratio:16/9;object-fit:contain}
.encounter-card>.species>span{padding:12px 16px;font-size:1.15rem;font-weight:700}
.encounter-note{min-width:0;background:#f7f3e7;border-left:4px solid #ba8150;padding:18px 20px;border-radius:0 12px 12px 0}
.encounter-note h3{margin:0 0 10px;font:700 .72rem/1.4 system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#835631}
.encounter-note .user-text{margin:0;font:1.2rem/1.65 Georgia,serif;color:#24494d;overflow-wrap:anywhere}
.encounter-badge{color:#805020;font-size:.85rem;background:#f6ecd7;border-radius:8px;padding:8px 12px;width:fit-content}
.encounter-highlight{border-color:#ba985f}
.encounter-card>.question{margin:0;background:#e9f1ee;border-color:#b8ccc6;font-size:.95rem;text-align:left}
@media(min-width:700px){.encounter-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;padding:22px}.encounter-card>.species{grid-column:1;grid-row:1 / span 3}.encounter-card>.encounter-note,.encounter-card>.encounter-badge,.encounter-card>.question{grid-column:2}.encounter-card>.species:only-child{grid-column:1/-1;max-width:600px;justify-self:center}}

.selection-rail{position:sticky;top:0;z-index:4;background:#f6f4ec;border-bottom:1px solid #b8ccc6;padding:calc(10px + env(safe-area-inset-top)) 0 10px;margin:12px 0 18px;box-shadow:0 7px 12px -12px #173b40}
.selection-rail .counter{margin:0 0 8px;font-size:.9rem}
.selection-chips{display:flex;gap:8px;overflow-x:auto;padding:3px 2px 6px;overscroll-behavior-x:contain;scrollbar-width:thin}
.selection-chip{flex:0 0 auto;min-height:44px;border-radius:24px;padding:8px 14px;background:#134f55;color:white;border-color:#134f55;font-size:.88rem;white-space:nowrap}
.selection-empty{color:#516968;font-size:.85rem;min-height:44px;display:flex;align-items:center}

/* Large sharing controls, with the whole label acting as a touch target. */
#modal .consent{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:80px;margin:14px 0;padding:16px 20px;border:2px solid #b9ceca;border-radius:16px;font-size:1.1rem;font-weight:650;line-height:1.4;cursor:pointer;touch-action:manipulation}
#modal .consent input[type=checkbox]{appearance:none;-webkit-appearance:none;display:grid;place-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:3px solid #668b87;border-radius:10px;background:white;cursor:pointer}
#modal .consent input[type=checkbox]:checked{background:#134f55;border-color:#134f55}
#modal .consent input[type=checkbox]:checked::after{content:'✓';color:white;font:800 32px/1 system-ui,sans-serif}
#modal .consent:has(input:checked){background:#dcece5;border-color:#39746a}
#modal .consent:focus-within{outline:3px solid #d78a30;outline-offset:3px}
@media(max-width:400px){#modal .consent{padding:14px;gap:12px;font-size:1rem}}

.conditions select{appearance:none;-webkit-appearance:none;min-height:64px;padding:16px 44px 16px 16px;font-size:1.1rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='m5 7 5 5 5-5' fill='none' stroke='%23134f55' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;touch-action:manipulation}
.conditions>section>button,.stop-item>button{min-height:56px;min-width:110px;padding:12px 20px;background:#edf3ef;border:1px solid #a7c0ba;border-radius:12px;font-size:1rem;text-decoration:none}
.conditions .stop-settings{grid-column:1/-1}
.stop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;width:100%}
.stop-item{min-width:0;padding:12px 0;border-top:1px solid #ccd9d4;text-align:center}
.stop-item h3{margin:0 0 12px;font-size:1.2rem}
.conditions .stop-item .stepper{margin:0 auto 12px;grid-template-columns:56px minmax(70px,1fr) 56px;gap:8px}
.conditions .stop-item output{font-size:1.55rem}
.conditions .stepper button{min-width:56px;width:56px;height:56px}
.conditions .stepper{grid-template-columns:56px minmax(70px,1fr) 56px}