:root { --ss-accent: #2d7d6f; }

body { max-width: 720px; margin: 0 auto; padding: 0 1rem 6rem; }

.brand { font-weight: 700; color: var(--ss-accent); text-decoration: none; font-size: 1.2rem; }
header.ss-header { display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .8rem 0; border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 1.2rem;
  position: sticky; top: 0; background: var(--pico-background-color); z-index: 10; }
.ss-nav { display: flex; gap: .4rem; align-items: center; }
.ss-nav [role="button"], .ss-nav button { margin: 0; padding: .35rem .7rem; font-size: .85rem; width: auto; }

/* --- login button: brand green like the logo --- */
.login-btn { background: var(--ss-accent); border-color: var(--ss-accent); color: #fff; }
.login-btn:hover, .login-btn:focus { background: #256b60; border-color: #256b60; color: #fff; }

/* --- participation progress (protocol §3.3): two right-aligned lines under the nav --- */
.ss-right { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.ss-progress { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.ss-progress small { font-size: .72rem; color: var(--pico-muted-color); }

.ok-banner { background: #d8efe9; color: var(--ss-accent); padding: .6rem .9rem;
  border-radius: var(--pico-border-radius); }

/* Submission toast: floats under the header and fades away after ~2 s. */
.ok-toast { position: fixed; top: 4.2rem; left: 50%; transform: translateX(-50%);
  z-index: 60; max-width: min(92vw, 34rem); margin: 0; padding: .6rem 1rem;
  background: #d8efe9; color: var(--ss-accent); font-weight: 600; text-align: center;
  border: 1px solid var(--ss-accent); border-radius: var(--pico-border-radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18); pointer-events: none;
  animation: ss-toast 2.2s ease forwards; }
@keyframes ss-toast {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  8%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* --- a food section --- */
.section { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
  padding: 1rem; margin-bottom: 1rem; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.section-num { font-weight: 600; color: var(--ss-accent); }
.del-section, .del-photo { width: auto; margin: 0; padding: .1rem .5rem; background: none;
  border: none; color: var(--pico-muted-color); cursor: pointer; }
.fields > * { margin-bottom: .6rem; }
.weight-row-grid { display: grid; grid-template-columns: 2fr 1fr; gap: .5rem;
  align-items: stretch; }
/* Pico gives inputs/selects a bottom margin; inside the row it breaks vertical alignment. */
.weight-row-grid > input, .weight-row-grid > select, .weight-row-grid > button { margin-bottom: 0; }
.weight-hint { display: block; margin-top: -.3rem; color: #9a6700; /* amber */ font-size: .8rem; }

/* --- photos --- */
.camera-btn { display: inline-block; cursor: pointer; padding: .5rem .9rem; margin: 0;
  border: 1px dashed var(--ss-accent); border-radius: var(--pico-border-radius);
  color: var(--ss-accent); font-weight: 600; width: auto; }
.photos { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0; }
.photo-wrap { position: relative; display: inline-block; }
.photo-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; display: block; }
.photo-wrap .del-photo { position: absolute; top: -6px; right: -6px; background: #fff;
  border-radius: 999px; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,.3); font-size: .7rem; }

/* --- bottom action bar --- */
.action-bar { position: sticky; bottom: 0; display: flex; gap: .6rem; padding: .8rem 0;
  background: var(--pico-background-color); border-top: 1px solid var(--pico-muted-border-color); }
.action-bar .add-food { flex: 1; margin: 0; }
.action-bar form { flex: 1; margin: 0; }
.action-bar form button { width: 100%; margin: 0; }

/* --- history --- */
.history-list { margin-top: 1rem; }
.history-entry { display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  padding: .8rem; border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius); margin-bottom: .5rem; }
.history-entry:hover { border-color: var(--ss-accent); }
.badge { font-size: .72rem; padding: .15rem .5rem; border-radius: 999px;
  background: var(--pico-muted-border-color); }

/* --- log detail / misc --- */
.log-item { padding: .8rem; }
.log-item table { margin: .4rem 0; }
.comment { font-style: italic; color: var(--pico-muted-color); }
.error { color: var(--pico-del-color); }
dialog article { max-width: 540px; }

/* --- Guided help tour --- */
#tour-spot { position: fixed; z-index: 1000; border-radius: 8px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.6); transition: all .2s ease; }
#tour-tip { position: fixed; z-index: 1001; max-width: 300px; background: var(--pico-background-color);
  border: 1px solid var(--pico-muted-border-color); border-radius: 10px; padding: .9rem 1rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.25); }
#tour-tip h4 { margin: 0 0 .3rem; color: var(--ss-accent); }
#tour-tip p { margin: 0 0 .7rem; font-size: .9rem; }
.tour-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tour-count { font-size: .8rem; color: var(--pico-muted-color); }
.tour-btns { display: flex; gap: .4rem; }
.tour-btns button { margin: 0; padding: .3rem .7rem; font-size: .8rem; width: auto; }

/* --- weight auto-fill (prototypes: bluetooth ⚖️ / vision 🔍) --- */
.weight-row-grid.with-autofill { grid-template-columns: auto 2fr 1fr; }
/* The ⚖️/🔍 button copies Pico's form-element metrics (padding/border/line-height), so its
   natural height is EXACTLY the height of the weight/unit inputs beside it. */
.autofill-btn { display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto; margin: 0;
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  font-size: 1rem; line-height: var(--pico-line-height, 1.5);
  background: none; border: var(--pico-border-width, 1px) solid var(--ss-accent);
  color: var(--ss-accent); border-radius: var(--pico-border-radius); cursor: pointer;
  box-shadow: none; }
.autofill-btn:hover, .autofill-btn:focus { background: #d8efe9; color: var(--ss-accent); }
.weight-area { margin-bottom: .6rem; }
.autofill-msg { display: block; margin-top: -.3rem; font-size: .8rem; }
.ok { color: var(--ss-accent); }
.photo-instruction { display: block; color: var(--pico-muted-color); font-size: .8rem; }

/* --- cooking-method prompt (prototype: myfoodrepo) --- */
select.attention { border-color: #9a6700; }
.method-prompt { display: block; margin-top: -.3rem; color: #9a6700; font-size: .8rem; }

/* --- meal photo block (prototype: myfoodrepo) --- */
.meal-photo-block { border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius); padding: 1rem; margin-bottom: 1rem; }
.meal-photo-block .camera-btn { margin: .4rem 0; }
.meal-photo { max-width: 100%; max-height: 260px; border-radius: var(--pico-border-radius);
  display: block; margin-bottom: .5rem; }

/* --- uncertain-recognition suggestion (prototype: vision) --- */
.suggest-box { border: 1px solid #9a6700; border-radius: var(--pico-border-radius);
  padding: .6rem .8rem; margin: .2rem 0 .6rem; background: #fff8e6; }
.suggest-box small { color: #6b4a00; }
.suggest-actions { margin-top: .4rem; }
.suggest-actions .suggest-accept { width: auto; margin: 0 0 .3rem; padding: .35rem .8rem;
  font-size: .85rem; background: var(--ss-accent); border-color: var(--ss-accent); }
.suggest-actions small { display: block; }
.warning { background: #fff8e6; color: #6b4a00; padding: .6rem .9rem;
  border-radius: var(--pico-border-radius); border: 1px solid #9a6700; }

/* ============================== prototype "vision" ============================== */

/* --- start-confirmation page (the button itself wears .vision-submit) --- */
.meal-type-form { display: flex; flex-direction: column; gap: .8rem; margin-top: .6rem; }

/* --- 10-step rainbow (red -> purple), light shades; component i uses hue-(i % 10) --- */
.hue-0 { --hue-bg: hsl(0, 78%, 89%);   --hue-border: hsl(0, 55%, 55%); }
.hue-1 { --hue-bg: hsl(31, 82%, 87%);  --hue-border: hsl(31, 60%, 48%); }
.hue-2 { --hue-bg: hsl(62, 80%, 85%);  --hue-border: hsl(62, 55%, 40%); }
.hue-3 { --hue-bg: hsl(93, 70%, 87%);  --hue-border: hsl(93, 45%, 42%); }
.hue-4 { --hue-bg: hsl(124, 62%, 88%); --hue-border: hsl(124, 42%, 42%); }
.hue-5 { --hue-bg: hsl(156, 65%, 86%); --hue-border: hsl(156, 48%, 38%); }
.hue-6 { --hue-bg: hsl(187, 70%, 87%); --hue-border: hsl(187, 52%, 40%); }
.hue-7 { --hue-bg: hsl(218, 80%, 90%); --hue-border: hsl(218, 58%, 55%); }
.hue-8 { --hue-bg: hsl(249, 75%, 91%); --hue-border: hsl(249, 52%, 60%); }
.hue-9 { --hue-bg: hsl(280, 72%, 90%); --hue-border: hsl(280, 48%, 55%); }

/* --- plate regions (2026-07 plate-based flow) --- */
.plate-region { border: 1px solid var(--pico-muted-border-color);
  border-radius: 10px; padding: 1rem; margin-bottom: 1rem; background: #fcfcfb; }
.plate-head { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .6rem; }
.plate-title { font-weight: 700; color: var(--ss-accent); }
.plate-head .plate-del { margin: 0; }
.plate-comment-label { margin-top: .8rem; }
.plate-region textarea { margin-bottom: 0; }

/* the ➕ Add-a-plate button: always below the existing plate regions */
.add-plate { display: flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; margin: 0 0 .8rem; padding: .8rem; font-size: 1.05rem; font-weight: 700;
  background: none; border: 2px dashed var(--ss-accent); color: var(--ss-accent);
  border-radius: 10px; cursor: pointer; box-shadow: none; }
.add-plate:hover, .add-plate:focus { background: #d8efe9; color: var(--ss-accent); }

/* --- one colored card per component; stacked, always visible --- */
.vision-card { position: relative; background: var(--hue-bg);
  border: 1px solid var(--hue-border); border-radius: var(--pico-border-radius);
  padding: 1.4rem 1rem 1rem; margin-bottom: .8rem; }
.vision-card .card-del { position: absolute; top: .3rem; right: .4rem; }
.panel-label { display: block; font-weight: 600; margin-bottom: .2rem; }

/* photo the component was added from (opens enlarged in the lightbox) */
.card-photo { display: block; width: 6.5rem; height: 6.5rem; object-fit: contain;
  background: #f4f3f0; border: 1px solid var(--hue-border, var(--pico-muted-border-color));
  border-radius: var(--pico-border-radius); }

/* --- food-name box: library-suggestion dropdown + labelled region scope --- */
/* The region column stretches to exactly the name input's height; the Region: label
   takes the top half and the select the bottom half, so label + select together equal
   the name box (the "Food component name:" label above spans its own full line). */
.name-box { display: grid; grid-template-columns: 1fr auto; gap: 0 .4rem;
  align-items: stretch; }
.name-wrap { position: relative; display: block; min-width: 0; }
.name-wrap input { margin-bottom: 0; }
.region-col { display: flex; flex-direction: column; min-width: 0; }
.region-label { flex: 0 0 50%; display: flex; align-items: center;
  margin: 0 0 0 .1rem; font-size: .7rem; font-weight: 700; line-height: 1; }
.name-region { flex: 0 0 50%; height: 50%; min-height: 0; width: auto; margin: 0;
  padding: 0 1.5rem 0 .5rem; font-size: .8rem; line-height: 1.1; }

/* suggestion dropdown: exact FatSecret entries, region-tagged, tap to fill */
.name-drop { position: absolute; z-index: 30; top: calc(100% + 2px); left: 0; right: 0;
  background: var(--pico-background-color); border: 1px solid var(--pico-muted-border-color);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); overflow: hidden; }
.name-drop:empty { display: none; }
.sugg { display: flex; gap: .45rem; align-items: baseline; width: 100%; margin: 0;
  padding: .45rem .6rem; background: none; border: none; box-shadow: none; border-radius: 0;
  color: #000; font-size: .9rem; text-align: left; cursor: pointer; }
.sugg:hover, .sugg:focus { background: #eaf5f2; color: #000; }
.sugg + .sugg { border-top: 1px solid var(--pico-muted-border-color); }
.sugg-region { flex: none; }
.sugg-name { flex: 1 1 auto; min-width: 0; }
.sugg-brand { flex: none; font-size: .75rem; color: var(--pico-muted-color); }
.sugg-hint, .sugg-note { margin: 0; padding: .4rem .6rem; font-size: .75rem;
  color: var(--pico-muted-color); }
.sugg-note { border-top: 1px solid var(--pico-muted-border-color); background: #fafaf9; }

/* ✓/⚠ exact-library-entry verification badge under the name box — same size/weight as
   the method reminder below it so the two lines read as one aligned block */
.name-verified { display: block; margin-top: .3rem; font-size: .78rem; font-weight: 600; }
.name-verified.ok { color: var(--ss-accent); }
.name-verified.warn { color: #b8860b; }
.name-verified:empty { display: none; }

/* unit select while scale-unit recognition failed and nothing was picked yet */
select.unit-missing { border-color: #e11900; color: #e11900; }

/* ⚠ method-review reminder (name mentions no cooking/processing term) — bright red so
   the participant can't miss it */
.method-hint { display: block; margin-top: .3rem; font-size: .78rem; font-weight: 600;
  color: #e11900; }
.method-hint:empty { display: none; }

/* 🕘 verified-history rows at the top of the suggestion dropdown */
.sugg-history { background: #f6faf8; }
.sugg-history + .sugg:not(.sugg-history) { border-top: 2px solid var(--pico-muted-border-color); }

/* --- image lightbox: enlarged view of example media / uploaded photos --- */
.ss-zoom { cursor: zoom-in; }
#ss-lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center;
  justify-content: center; padding: 1.2rem; background: rgba(15, 15, 15, .82);
  cursor: zoom-out; }
#ss-lightbox[hidden] { display: none; }
#ss-lightbox img { max-width: 94vw; max-height: 90vh; object-fit: contain;
  border-radius: 8px; box-shadow: 0 10px 50px rgba(0, 0, 0, .6); background: #fff; }

/* --- instruction + example section on the logger page --- */
.step-title { margin: .2rem 0 .5rem; font-size: 1.05rem; }
.step-text { margin: 0 0 .6rem; font-size: .92rem; }
.step-list { margin: 0 0 .6rem; padding-left: 1.3rem; font-size: .92rem; }
.step-list li { margin-bottom: .25rem; }
/* one size larger than the instruction body text (.step-text/.step-list = .92rem) */
.example-label { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 700; }
.example-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .8rem; }
.example-media, .example-ph { width: 7.5rem; height: 7.5rem;
  border-radius: var(--pico-border-radius); }
.example-media { object-fit: cover; border: 1px solid var(--pico-muted-border-color); }
.example-ph { display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--pico-muted-border-color); color: var(--pico-muted-color);
  font-size: .8rem; background: #fafaf9; }

/* the orange 📷 Add-a-component button at the top of each plate region */
.take-photo { display: flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; margin: 0 0 .3rem; padding: .8rem; border-radius: 10px; cursor: pointer;
  font-weight: 700; border: 1px solid var(--pico-muted-border-color); }
.take-photo.option-photo { background: #ffedd8; border-color: #e8871e; color: #a35a00; }
.take-photo.option-photo:hover { background: #ffe2c2; }

/* --- per-field recognition errors (add-by-photo) — bright red for salience --- */
.field-error { display: block; margin-top: .5rem; margin-bottom: .4rem; font-size: .8rem;
  font-weight: 600; color: #e11900; }

/* --- add-a-component overlay (background blurred) --- */
.add-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center;
  justify-content: center; padding: 1rem; background: rgba(250, 250, 249, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.add-overlay[hidden] { display: none; }
.add-card { position: relative; width: 100%; max-width: 460px; padding: 1.2rem 1.4rem;
  background: var(--pico-background-color); border: 1px solid var(--pico-muted-border-color);
  border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.add-card h3 { margin-bottom: .4rem; }
.add-close { position: absolute; top: .4rem; right: .5rem; width: auto; margin: 0;
  padding: .2rem .55rem; background: none; border: none; color: var(--pico-muted-color);
  cursor: pointer; box-shadow: none; font-size: 1rem; }
.add-option-title { margin: .8rem 0 .5rem; font-size: .95rem; }
.add-option-btn { display: flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; margin: 0 0 .2rem; padding: .8rem; font-size: 1.05rem; font-weight: 600;
  background: none; border: 2px dashed var(--ss-accent); color: var(--ss-accent);
  border-radius: var(--pico-border-radius); cursor: pointer; box-shadow: none; }
.add-option-btn:hover, .add-option-btn:focus { background: #d8efe9; color: var(--ss-accent); }
/* Option 1 (photo) is the light-orange one; option 2 keeps the green accent. */
.add-option-btn.option-photo { background: #ffedd8; border-color: #e8871e; color: #a35a00; }
.add-option-btn.option-photo:hover, .add-option-btn.option-photo:focus { background: #ffe2c2;
  color: #a35a00; }
.add-card hr { margin: .9rem 0; }
.add-busy { display: none; margin: .4rem 0 0; color: var(--ss-accent); font-weight: 600;
  font-size: .9rem; }
.add-busy.htmx-request { display: block; }

/* --- Submit + the "sucked into History" exit --- */
/* Primary submit buttons wear the brand green (the logo's --ss-accent). */
.vision-submit, .action-bar form button { background: var(--ss-accent);
  border-color: var(--ss-accent); color: #fff; }
.vision-submit:hover, .vision-submit:focus,
.action-bar form button:hover, .action-bar form button:focus { background: #256b60;
  border-color: #256b60; color: #fff; }
.vision-submit { width: 100%; font-size: 1.15rem; padding: .8rem; margin-top: 1rem; }
#vision-suck { transform-origin: center center; }
#vision-suck.sucking { transition: transform .7s cubic-bezier(.55, 0, .9, .4), opacity .6s ease;
  pointer-events: none; }

/* --- Account: signed-consent placeholder frame (consent_document.html) --- */
.consent-doc-frame { min-height: 14rem; margin: .6rem 0 1rem; border: 2px dashed var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius); display: flex; align-items: center; justify-content: center;
  color: var(--pico-muted-color); background: #fafaf9; }