/* ============================================================
   FuelLog · COMPONENTS
   Every shape the app uses. A screen composes these and adds
   nothing of its own. If a shape is not here and on demo.html,
   it does not exist. Tokens only: no raw sizes, colours, radii
   or durations.
   ============================================================ */

/* ---- LAYOUT ---- */
.app{
  max-width:var(--col-max);margin:0 auto;min-height:100dvh;
  padding-bottom:calc(var(--fab) + var(--s-7) + env(safe-area-inset-bottom));
}
.page{display:flex;flex-direction:column;gap:var(--s-3);padding:0 var(--page-pad-x);}
.page-first{padding-top:calc(env(safe-area-inset-top) + var(--s-6));}
.page-title{font-size:var(--fs-title);line-height:var(--lh-snug);}
.section{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-2);}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding:0 var(--s-1);}
.section-head > :first-child{font-size:var(--fs-heading);}
.section-head > :last-child:not(:first-child){font-size:var(--fs-small);color:var(--fg2);text-align:right;}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);}
.stack{display:flex;flex-direction:column;gap:var(--s-3);}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);}

/* ---- BAR · sticky, blurs what scrolls under it ---- */
.bar{
  position:sticky;top:0;z-index:var(--z-sticky);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:calc(env(safe-area-inset-top) + var(--s-3)) var(--page-pad-x) var(--s-3);
  background:var(--glass);-webkit-backdrop-filter:var(--glass-fx);backdrop-filter:var(--glass-fx);
}
.bar-main{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s-2);min-width:0;}
.bar-title{
  display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--hit);max-width:100%;
  font-size:var(--fs-title);line-height:var(--lh-snug);text-align:left;color:var(--fg);
  border-radius:var(--radius);transition:opacity var(--dur-fast) var(--ease);
}
.bar-title:active{opacity:.6;}
.bar-title .icon{color:var(--fg3);}
.bar-heading{font-size:var(--fs-title);line-height:var(--lh-snug);}
.bar-sub{flex-basis:100%;font-size:var(--fs-small);color:var(--fg2);}
.bar-actions{display:flex;align-items:center;gap:var(--s-1);flex:none;}
.bar-back{margin-left:calc(var(--s-2) * -1);}

/* ---- SURFACES ---- */
.card{background:var(--bg);border:var(--bw) solid var(--hairline);border-radius:var(--r-box);box-shadow:var(--shadow-1);}
.card-pad{padding:var(--s-4);}
.card-title{font-size:var(--fs-heading);line-height:var(--lh-snug);}

.hero{display:flex;flex-direction:column;gap:var(--s-1);}
.hero-label{font-size:var(--fs-small);color:var(--fg2);}
.hero-value{font-family:var(--font-num);font-size:var(--fs-hero);line-height:var(--lh-tight);text-wrap:balance;}
.hero-sub{font-size:var(--fs-body);color:var(--fg2);}

.meter{height:6px;margin-top:var(--s-3);border-radius:var(--r-xs);background:var(--bg3);overflow:hidden;}
.meter-fill{
  width:100%;height:100%;border-radius:var(--r-xs);background:var(--amber);
  transform-origin:left center;transform:scaleX(var(--p,0));
  transition:transform var(--dur-slow) var(--ease-out);
}
.meter.is-over .meter-fill{background:var(--no);}
.meter-legend{display:flex;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-1);font-size:var(--fs-caption);color:var(--fg3);}

.stat{display:flex;flex-direction:column;gap:var(--s-0);padding:var(--s-3) var(--s-4);min-width:0;}
.stat-label{font-size:var(--fs-small);color:var(--fg2);}
.stat-value{font-family:var(--font-num);font-size:var(--fs-stat);line-height:var(--lh-snug);}
.stat-value .unit{margin-left:var(--s-1);font-family:var(--font-body);font-size:var(--fs-small);color:var(--fg2);}
.stat-sub{font-size:var(--fs-caption);color:var(--fg3);}

/* ---- LIST · a card of rows, each row one big button ---- */
.list{background:var(--bg);border:var(--bw) solid var(--hairline);border-radius:var(--r-box);box-shadow:var(--shadow-1);overflow:hidden;}
.row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-3);
  width:100%;min-height:var(--fab);padding:var(--s-3) var(--s-4);text-align:left;
  border-bottom:var(--bw) solid var(--hairline);
  transition:background-color var(--dur-fast) var(--ease);
}
.row:last-child{border-bottom:none;}
.row:active{background:var(--bg2);}
.row:focus-visible{outline-offset:calc(var(--focus-w) * -1);border-radius:var(--r-sm);}
.row-dot{width:var(--s-2);height:var(--s-2);border-radius:50%;background:var(--amber);}
.row-dot.is-partial{background:transparent;border:var(--s-0) solid var(--amber);}
.row-main{display:flex;flex-direction:column;gap:var(--s-0);min-width:0;}
.row-title{font-family:var(--font-num);font-size:var(--fs-heading);line-height:var(--lh-snug);}
.row-sub{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);font-size:var(--fs-small);color:var(--fg2);}
.row-trail{display:flex;flex-direction:column;gap:var(--s-0);text-align:right;}
.row-amount{font-family:var(--font-num);font-size:var(--fs-body);}
.row-meta{font-size:var(--fs-caption);color:var(--fg3);}

.chip{
  display:inline-block;padding:var(--s-0) var(--s-2);border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:var(--fs-caption);line-height:var(--lh);
  background:var(--amber-wash);color:var(--amber-ink);vertical-align:middle;
}

.nudge{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);border-radius:var(--r-box);
  background:var(--amber-wash);color:var(--amber-ink);font-size:var(--fs-small);
}
.nudge-action{flex:none;}

/* ---- BUTTONS · default, hover, active, focus-visible, disabled, loading ---- */
.btn{
  --spin:var(--fg);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  height:var(--ctrl-h);padding:0 var(--s-4);border-radius:var(--radius);
  background:var(--bg3);color:var(--fg);font-size:var(--fs-body);white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.btn:active{transform:scale(var(--press));}
.btn-primary{--spin:var(--amber-on);background:var(--amber);color:var(--amber-on);}
.btn-ghost{background:transparent;}
.btn-danger{--spin:var(--no);background:transparent;color:var(--no);}
.btn-lg{height:var(--ctrl-h-lg);font-size:var(--fs-heading);}
.btn-block{display:flex;width:100%;}

/* loading: the label goes invisible in place, so the button never changes width */
.btn.is-loading{color:transparent;pointer-events:none;}
.btn.is-loading .icon{opacity:0;}
.btn.is-loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:var(--s-4);height:var(--s-4);
  border-radius:50%;border:var(--s-0) solid var(--spin);border-right-color:transparent;
  animation:spin var(--dur-spin) linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.btn-icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:var(--hit);height:var(--hit);border-radius:50%;color:var(--fg2);
  transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.btn-icon:active{transform:scale(var(--press));background:var(--bg3);}

.fab{
  position:fixed;z-index:var(--z-fab);
  right:max(var(--s-4),calc(50vw - (var(--col-max) / 2) + var(--s-4)));
  bottom:calc(var(--s-5) + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--fab);height:var(--fab);border-radius:50%;
  background:var(--amber);color:var(--amber-on);box-shadow:var(--shadow-fab);
  transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.fab:active{transform:scale(var(--press));background:var(--amber-press);}
.fab:focus-visible{outline-color:var(--fg);}

.link{
  position:relative;display:inline-block;color:var(--amber-ink);font-size:inherit;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:var(--s-0);
  border-radius:var(--r-xs);transition:opacity var(--dur-fast) var(--ease);
}
.link::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--hit);transform:translateY(-50%);}
.link:active{opacity:.6;}

/* ---- FIELDS ---- */
.field{display:flex;flex-direction:column;gap:var(--s-1);min-width:0;}
.field-label{font-size:var(--fs-small);color:var(--fg2);}
.field-box{
  display:flex;align-items:center;gap:var(--s-2);height:var(--ctrl-h-lg);padding:0 var(--s-4);
  background:var(--bg2);border:var(--bw) solid var(--border);border-radius:var(--radius);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.field-box:focus-within{border-color:var(--focus);box-shadow:0 0 0 var(--focus-w) var(--focus);}
.field-box.is-warn{border-color:var(--amber-ink);}
.field-box.is-invalid{border-color:var(--no);}
.field-box:has(:disabled){opacity:.45;}
.field-prefix,.field-suffix{flex:none;font-size:var(--fs-body);color:var(--fg3);}
.field-input,.field-select{
  flex:1;min-width:0;height:100%;background:transparent;border:none;outline:none;
  color:var(--fg);font-size:var(--fs-heading);-webkit-appearance:none;appearance:none;border-radius:0;
}
.field-input:disabled,.field-select:disabled{opacity:1;}
.field-input::placeholder{color:var(--fg3);opacity:1;}
.field-input.num{font-family:var(--font-num);}
.field-input::-webkit-inner-spin-button,.field-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.field-input[type="date"]{min-width:0;text-align:left;}
.field-input[type="date"]::-webkit-date-and-time-value{text-align:left;}
.field-input[type="date"]::-webkit-calendar-picker-indicator{opacity:.6;}
.field-select{
  padding-right:var(--s-5);
  background-image:linear-gradient(45deg,transparent 50%,var(--fg3) 50%),linear-gradient(135deg,var(--fg3) 50%,transparent 50%);
  background-position:calc(100% - var(--s-2)) 50%,calc(100% - var(--s-1)) 50%;
  background-size:var(--s-1) var(--s-1);background-repeat:no-repeat;
}
.field-hint{font-size:var(--fs-small);color:var(--fg3);}
.field-error{font-size:var(--fs-small);color:var(--no);}
.field-warn{font-size:var(--fs-small);color:var(--amber-ink);}

/* ---- SEGMENTED · radios underneath, so arrows and screen readers just work ---- */
.seg{display:flex;height:var(--ctrl-h);padding:var(--s-0);border-radius:var(--radius);background:var(--bg3);}
.seg-item{position:relative;flex:1 1 0;min-width:0;display:flex;}
.seg-item input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.seg-item span{
  flex:1;display:flex;align-items:center;justify-content:center;min-width:0;padding:0 var(--s-1);
  border-radius:var(--r-sm);font-size:var(--fs-body);color:var(--fg2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.seg-item input:checked + span{background:var(--bg);color:var(--fg);box-shadow:var(--shadow-1);}
.seg-item input:focus-visible + span{outline:var(--focus-w) solid var(--focus);outline-offset:calc(var(--focus-w) * -1);}
.seg-item input:disabled + span{opacity:.45;}

/* ---- SWITCH ROW ---- */
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:var(--fab);cursor:pointer;}
.switch-text{display:flex;flex-direction:column;gap:var(--s-0);min-width:0;}
.switch-title{font-size:var(--fs-body);}
.switch-hint{font-size:var(--fs-small);color:var(--fg2);}
.switch{
  -webkit-appearance:none;appearance:none;flex:none;position:relative;
  width:calc(var(--hit) + var(--s-1));height:calc(var(--s-5) + var(--s-0));
  border-radius:var(--r-round);background:var(--bg3);cursor:pointer;
  transition:background-color var(--dur) var(--ease);
}
.switch::before{
  content:"";position:absolute;top:var(--s-0);left:var(--s-0);
  width:calc(var(--s-5) - var(--s-0));height:calc(var(--s-5) - var(--s-0));
  border-radius:50%;background:var(--white);box-shadow:var(--shadow-1);
  transition:transform var(--dur) var(--ease-out);
}
.switch:checked{background:var(--amber);}
.switch:checked::before{transform:translateX(calc(var(--s-4) + var(--s-0)));}

/* ---- SHEET · slides up from the bottom, a centred dialog on a wide screen ---- */
.sheet{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:flex-end;justify-content:center;}
.sheet-backdrop{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity var(--dur-exit) var(--ease-in);}
.sheet-panel{
  position:relative;display:flex;flex-direction:column;width:100%;max-width:var(--col-max);max-height:92dvh;
  background:var(--bg);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow-pop);
  padding-bottom:env(safe-area-inset-bottom);
  opacity:0;transform:translateY(var(--s-5));
  transition:transform var(--dur-exit) var(--ease-in),opacity var(--dur-exit) var(--ease-in);
}
.sheet.is-open .sheet-backdrop{opacity:1;transition:opacity var(--dur-slow) var(--ease-out);}
.sheet.is-open .sheet-panel{opacity:1;transform:none;transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur) var(--ease-out);}
.sheet.is-entering .sheet-panel{transform:translateY(100%);opacity:1;transition:none;}
.sheet-grabber{flex:none;width:var(--s-6);height:var(--s-1);margin:var(--s-2) auto 0;border-radius:var(--r-round);background:var(--border2);}
.sheet-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-2) var(--s-2) var(--s-1) var(--s-4);}
.sheet-title{font-size:var(--fs-heading);}
.sheet-form{display:contents;}
.sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-2) var(--s-4) var(--s-4);}
.sheet-foot{flex:none;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-top:var(--bw) solid var(--hairline);}

/* ---- TOAST ---- */
.toast-wrap{
  position:fixed;z-index:var(--z-toast);left:0;right:0;
  bottom:calc(var(--fab) + var(--s-6) + env(safe-area-inset-bottom));
  display:flex;justify-content:center;padding:0 var(--page-pad-x);pointer-events:none;
}
.toast{
  pointer-events:auto;display:flex;align-items:center;gap:var(--s-3);max-width:calc(var(--col-max) - var(--s-6));
  padding:var(--s-1) var(--s-1) var(--s-1) var(--s-4);min-height:var(--ctrl-h-lg);border-radius:var(--r-box);
  background:var(--fg);color:var(--canvas);font-size:var(--fs-body);box-shadow:var(--shadow-soft);
  opacity:0;transform:translateY(var(--s-2));
  transition:transform var(--dur-exit) var(--ease-in),opacity var(--dur-exit) var(--ease-in);
}
.toast.is-open{opacity:1;transform:none;transition:transform var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out);}
.toast.is-error{background:var(--no);color:var(--white);}
.toast-msg{padding:var(--s-2) var(--s-3) var(--s-2) 0;}
.toast-action{flex:none;min-width:var(--hit);min-height:var(--hit);padding:0 var(--s-3);border-radius:var(--radius);color:var(--amber);}
.toast.is-error .toast-action{color:var(--white);}
.toast-action:active{opacity:.6;}

/* ---- THE FOUR SCREEN STATES · empty, loading, error, full ---- */
.empty,.error-state{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);padding:var(--s-6) var(--s-4);text-align:center;}
.empty-title{font-size:var(--fs-heading);}
.empty-body{max-width:32ch;font-size:var(--fs-body);color:var(--fg2);}
.skeleton{gap:var(--s-3);}
.sk-line,.sk-block{border-radius:var(--r-box);background:var(--bg3);animation:pulse var(--dur-pulse) var(--ease) infinite alternate;}
.sk-line{height:var(--s-6);width:60%;border-radius:var(--radius);}
.sk-block{height:var(--s-9);}
@keyframes pulse{from{opacity:1;}to{opacity:.45;}}

/* ---- ARRIVAL · one staggered reveal when a screen opens, never on a redraw ---- */
.is-arriving .page > *{animation:rise var(--dur) var(--ease-out) both;}
.is-arriving .page > :nth-child(2){animation-delay:var(--stagger);}
.is-arriving .page > :nth-child(3){animation-delay:calc(var(--stagger) * 2);}
.is-arriving .page > :nth-child(4){animation-delay:calc(var(--stagger) * 3);}
.is-arriving .page > :nth-child(n+5){animation-delay:calc(var(--stagger) * 4);}
.is-arriving .meter-fill{animation:fill var(--dur-slow) var(--ease-out) calc(var(--stagger) * 3) both;}
@keyframes rise{from{opacity:0;transform:translateY(var(--s-2));}}
@keyframes fill{from{transform:scaleX(0);}}

/* ---- UTILITIES ---- */
.num{font-family:var(--font-num);}
.muted{color:var(--fg2);}
.faint{color:var(--fg3);}
.icon{width:20px;height:20px;flex:none;}
.icon-sm{width:16px;height:16px;}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* the add button carries a larger plus */
.fab .icon{width:24px;height:24px;}

/* ============================================================
   Added for the full home screen: the split hero, the totals
   banner, charts, small count bars, and a list that opens.
   ============================================================ */

/* ---- HERO, split · the last fill on the left, the next one on the right ---- */
.hero-split{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);}
.hero-main{display:flex;flex-direction:column;gap:var(--s-1);min-width:0;}
.hero-value .unit{margin-left:var(--s-2);font-family:var(--font-body);font-size:var(--fs-heading);color:var(--fg2);}
.hero-side{flex:none;display:flex;flex-direction:column;gap:var(--s-0);text-align:right;}
.hero-side-label{font-size:var(--fs-small);color:var(--fg2);}
.hero-side-value{font-family:var(--font-num);font-size:var(--fs-heading);line-height:var(--lh-snug);}
.hero-side-sub{font-size:var(--fs-small);color:var(--fg2);}

/* ---- BANNER · two totals side by side ---- */
.banner{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) var(--s-4);}
.banner-side{display:flex;flex-direction:column;gap:var(--s-0);min-width:0;}
.banner-side:last-child{text-align:right;}
.banner-label{font-size:var(--fs-small);color:var(--fg2);}
.banner-value{font-family:var(--font-num);font-size:var(--fs-stat);line-height:var(--lh-snug);}

.stat.is-best{border-color:var(--amber);}

/* ---- CHART · one series, thin marks, quiet grid. Text wears text colours, never the series colour ---- */
.chart{position:relative;padding:var(--s-3) var(--s-3) var(--s-2);}
.chart-svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y;-webkit-user-select:none;user-select:none;}
.chart-grid{stroke:var(--hairline);stroke-width:1;}
.chart-axis{stroke:var(--border2);stroke-width:1;}
.chart-tick{font-family:var(--font-num);font-size:var(--fs-caption);fill:var(--fg3);}
.chart-value{font-family:var(--font-num);font-size:var(--fs-caption);fill:var(--fg2);}
.chart-bar{fill:var(--chart-1);transition:opacity var(--dur-fast) var(--ease);}
.chart-bar.is-dim{opacity:.4;}
.chart-line{fill:none;stroke:var(--chart-1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.chart-area{fill:var(--chart-1);opacity:.12;}
.chart-dot{fill:var(--chart-1);stroke:var(--bg);stroke-width:2;}
.chart-dot.is-hollow{fill:var(--bg);stroke:var(--chart-1);}
.chart-focus{opacity:0;transition:opacity var(--dur-fast) var(--ease);}
.chart-focus.is-open{opacity:1;}
.chart-cross{stroke:var(--border2);stroke-width:1;}
.chart-hit{fill:transparent;}
.chart-tip{
  position:absolute;top:0;left:0;z-index:var(--z-sticky);pointer-events:none;
  display:flex;flex-direction:column;gap:var(--s-0);padding:var(--s-1) var(--s-2);border-radius:var(--r-sm);
  background:var(--fg);color:var(--canvas);font-size:var(--fs-caption);white-space:nowrap;box-shadow:var(--shadow-2);
  opacity:0;transition:opacity var(--dur-fast) var(--ease);
}
.chart-tip.is-open{opacity:1;}
.chart-tip .num{font-size:var(--fs-small);}
.chart-empty{padding:var(--s-5) var(--s-4);text-align:center;font-size:var(--fs-small);color:var(--fg3);}

/* ---- BARS · small horizontal counts ---- */
.bars{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-3) var(--s-4);min-width:0;}
.bars-title{margin-bottom:var(--s-1);font-size:var(--fs-small);color:var(--fg2);}
.bars-row{display:grid;grid-template-columns:var(--s-6) minmax(0,1fr) var(--s-4);align-items:center;gap:var(--s-2);font-size:var(--fs-caption);color:var(--fg2);}
.bars-track{display:block;height:6px;border-radius:var(--r-xs);background:var(--bg3);overflow:hidden;}
.bars-fill{display:block;height:100%;border-radius:var(--r-xs);background:var(--chart-1);transform-origin:left center;transform:scaleX(var(--p,0));}
.bars-count{font-family:var(--font-num);color:var(--fg3);text-align:right;}

/* segmented, sized to its words, for a section head */
.seg-inline{display:inline-flex;}
.seg-inline .seg-item{flex:0 0 auto;}
.seg-inline .seg-item span{padding:0 var(--s-3);}
.section-head > .seg{font-size:var(--fs-body);}

/* the last row of a list, which opens or closes it */
.row-more{
  display:flex;align-items:center;justify-content:center;gap:var(--s-1);width:100%;min-height:var(--ctrl-h-lg);
  color:var(--amber-ink);font-size:var(--fs-body);border-top:var(--bw) solid var(--hairline);
  transition:background-color var(--dur-fast) var(--ease);
}
.row-more:active{background:var(--bg2);}
.row-more:focus-visible{outline-offset:calc(var(--focus-w) * -1);border-radius:var(--r-sm);}
.row-more .icon{transition:transform var(--dur) var(--ease-out);}
.row-more[aria-expanded="true"] .icon{transform:rotate(180deg);}
.list .row:has(+ .row-more){border-bottom:none;}

/* a nudge that asks a question: the words on top, the two answers under them */
.nudge.is-stacked{flex-direction:column;align-items:stretch;gap:var(--s-3);}
.nudge-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);}
.nudge-actions .btn{flex:1 1 auto;}
.nudge .btn-ghost{color:var(--amber-ink);}

/* the line under the next-fill date that leans on the person's usual fill day */
.hero-side-habit{color:var(--amber-ink);}

/* ---- NOTES · a short stack of plain sentences, one fact each ---- */
.notes{display:flex;flex-direction:column;}
.note{padding:var(--s-3) var(--s-4);font-size:var(--fs-body);line-height:var(--lh);color:var(--fg);border-bottom:var(--bw) solid var(--hairline);text-wrap:pretty;}
.note:last-child{border-bottom:none;}
.note + .note{margin-top:0;}

/* ---- TEXT AREA · for pasting several lines. Mono, so columns of figures line up ---- */
.field-area{
  display:block;width:100%;min-height:calc(var(--s-9) + var(--s-8));padding:var(--s-3) var(--s-4);
  background:var(--bg2);border:var(--bw) solid var(--border);border-radius:var(--radius);
  color:var(--fg);font-family:var(--font-num);font-size:var(--fs-heading);line-height:var(--lh);
  resize:vertical;-webkit-appearance:none;appearance:none;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.field-area::placeholder{color:var(--fg3);opacity:1;}
.field-area:focus-visible{outline:none;border-color:var(--focus);box-shadow:0 0 0 var(--focus-w) var(--focus);}

/* ---- CHECK ROW · a list row that is ticked rather than opened ---- */
.check-row{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s-3);
  min-height:var(--fab);padding:var(--s-3) var(--s-4);border-bottom:var(--bw) solid var(--hairline);cursor:pointer;
}
.check-row:last-child{border-bottom:none;}
.check-row.is-off{cursor:default;}
.check-gap{width:var(--s-5);}
.check{
  -webkit-appearance:none;appearance:none;position:relative;flex:none;width:var(--s-5);height:var(--s-5);margin:0;
  border:var(--s-0) solid var(--border2);border-radius:var(--r-sm);background:var(--bg);cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.check::after{
  content:"";position:absolute;left:50%;top:45%;width:var(--s-1);height:var(--s-2);
  border:solid var(--amber-on);border-width:0 var(--s-0) var(--s-0) 0;
  transform:translate(-50%,-50%) rotate(45deg) scale(0);transition:transform var(--dur-fast) var(--ease-out);
}
.check:checked{background:var(--amber);border-color:var(--amber);}
.check:checked::after{transform:translate(-50%,-50%) rotate(45deg) scale(1);}
.check:disabled{opacity:.45;cursor:not-allowed;}

/* ---- CARD PREVIEW · the picture exactly as it will be posted, just smaller ---- */
.card-preview{display:flex;justify-content:center;}
.card-canvas{display:block;width:100%;max-width:calc(var(--col-max) - var(--s-8));height:auto;border-radius:var(--r-box);outline:var(--bw) solid var(--hairline);outline-offset:calc(var(--bw) * -1);}