/* menu v1 (canon №210): the floating pill over the tab roots — pill 64px, fade ramp 44px, values from
   tools/render_menu_samples.py (FRAME_CSS, tab_bar). menu.js sets --pill-bottom/--pill-solid/--pill-fade/--root-pad. */
.menu-fade{position:fixed;left:0;right:0;bottom:0;height:var(--pill-fade,130px);z-index:19;pointer-events:none;
  background:linear-gradient(to top,var(--bg) 0,var(--bg) var(--pill-solid,86px),transparent 100%)}
.tabs.pill{position:fixed;left:16px;right:16px;bottom:var(--pill-bottom,12px);height:var(--pill-h);box-sizing:border-box;display:flex;
  padding:var(--pill-pad);gap:var(--gap-xs);background:var(--surface);border:1px solid var(--line);border-radius:var(--pill-r);
  box-shadow:var(--shadow-float);z-index:20;font-family:var(--font);font-variation-settings:var(--flar-ui)}
.tabs.pill::before{content:"";position:absolute;top:var(--pill-pad);bottom:var(--pill-pad);left:var(--pill-pad);
  width:calc((100% - 2 * var(--pill-pad) - (var(--tab-n, 2) - 1) * var(--gap-xs)) / var(--tab-n, 2));border-radius:calc(var(--pill-r) - var(--pill-pad));background:var(--accent);
  transform:translateX(calc(var(--tab-i, 0) * (100% + var(--gap-xs))));transition:transform var(--tab-ms) var(--ease-voice)}
.tabs.pill .tab{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:0;
  background:none;color:var(--muted);padding:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tabs.pill .tab .ico{display:flex;align-items:center;justify-content:center;height:26px;position:relative}
/* the forecast tab's dot (board CHAIR sec. 1.7): a state mark in ink, never yellow (canon 105, 229) and not a pager */
.tabs.pill .tab.has-dot .ico::after{content:"";position:absolute;top:0;right:-5px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.tabs.pill .tab.has-dot[aria-selected="true"] .ico::after{background:var(--accent-ink)}
.tabs.pill .tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.tabs.pill .tab .lb{font:var(--t-tab);font-variation-settings:var(--flar-ui)}
.tabs.pill .tab{transition:color var(--tab-ms) var(--ease-voice)}
.tabs.pill .tab[aria-selected="true"]{color:var(--accent-ink)}
#menu[hidden],#menu-fade[hidden]{display:none}
body.menu-root #screen > [data-tab-root]{padding-bottom:var(--root-pad,146px)}

/* ----- menu blocks (render A), built only from existing tokens/components ----- */
.mn-root{padding-bottom:var(--gap-xl)}
.mn-head{margin-top:var(--gap-l)}
.mn-lock-row{cursor:pointer}
.mn-lock-row .g-end{gap:var(--gap-s)}
.mn-lock-row .g-end .icon,.mn-list .g-end .icon{margin-top:0}
.mn-card .scene-label{margin:0 0 var(--gap-label-body);font:var(--t-title);color:var(--text)}
.mn-why{margin:0 0 var(--gap-m);font:var(--t-sub);color:var(--muted)} .mn-circle{display:flex;flex-direction:column;gap:var(--gap-m)}
.mn-circle .cr{display:flex;flex-direction:column;gap:var(--gap-xs)} .mn-circle .cr-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap-s);min-height:18px;font:var(--t-meta)}
.mn-circle .cr-h .lbl{min-width:0} .mn-circle .cr-h .w{color:var(--text)}
.mn-circle .cr-h .g{color:var(--muted)} .mn-circle .cr-h .ct{flex:none;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mn-circle .cr-b{display:flex;min-width:0;height:62px} .mn-circle .pair-circle{width:var(--avatar-m);height:var(--avatar-m);font-size:calc(var(--avatar-m) * .42);flex:none}
.mn-c0 .pair-circle{width:var(--avatar-l);height:var(--avatar-l);font-size:calc(var(--avatar-l) * .42);flex:none} .mn-card .pair-circle.you{background:var(--accent);color:var(--accent-ink);border:0}
.mn-circle .slot{width:52px;flex:none;display:flex;flex-direction:column;align-items:center;gap:var(--gap-xs)}
.mn-circle .slot .nm{font:var(--t-tab);color:var(--muted);height:14px;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-circle .more{display:flex;align-items:center;justify-content:center;width:var(--avatar-m);height:var(--avatar-m);border-radius:50%;background:var(--progress-off);color:var(--text);font:var(--t-meta);font-variant-numeric:tabular-nums}
.mn-card .gap-disc{display:flex;align-items:center;justify-content:center;width:var(--avatar-m);height:var(--avatar-m);min-width:var(--tap-min);min-height:var(--tap-min);border-radius:50%;border:var(--bw-state) dashed var(--line-strong);background:transparent;color:var(--muted);flex:none}
.mn-c0 .gap-disc{width:var(--avatar-l);height:var(--avatar-l)} .mn-circle .cr-empty{align-items:flex-start;gap:var(--gap-s);padding-left:4px}
.mn-circle .cr-empty .t{height:var(--avatar-m);display:flex;align-items:center;font:var(--t-meta);color:var(--muted)} .mn-c0{display:flex;gap:var(--gap-s);align-items:flex-start;height:74px}
.mn-c0 .c0-you{display:flex;flex-direction:column;align-items:center;gap:var(--gap-xs)} .mn-c0 .cap{font:var(--t-tab);color:var(--muted);height:14px}
.mn-circle + .mn-sky-text{margin-top:var(--gap-l)}
.mn-sky-few{margin:var(--gap-s) 0 0;font:var(--t-sub);color:var(--muted)}
.mn-sky-text{margin:var(--gap-m) 0 0;font:var(--t-body)}
.mn-list{margin-top:var(--gap-l)}
.mn-list .g-row{cursor:pointer}
.mn-list .g-row.add .icon{margin-top:0;color:var(--text)}
.mn-av{width:var(--avatar-s);height:var(--avatar-s);flex:none}
.mn-invite{margin-top:var(--gap-s)}
.mn-invite .surface-card .read-p{margin-top:0}
.mn-invite .surface-card .chips{margin-top:var(--gap-l)}              /* №244: the button never sticks to the text (reading.css used to win here with --gap-s) */
.mn-set .g-row{cursor:pointer}
.mn-set + .mn-set{margin-top:var(--gap-xl)}
.mn-sets{margin-top:var(--gap-l)}
/* forecast P1: the settings switch (S8) */
.mn-weekly .g-sub{display:block;margin:2px 0 0;font:var(--t-sub);color:var(--muted)}
.mn-switch{display:inline-block;position:relative;width:44px;height:26px;border-radius:var(--r-chip);background:var(--line-strong);transition:background var(--state-ms)}
.mn-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);transition:transform var(--state-ms)}
/* P1.1: the state lives on the row (role="switch" aria-checked), so every switch of the screen draws it - the weekly one and the reminder kinds */
[role="switch"][aria-checked="true"] .mn-switch{background:var(--accent)}
[role="switch"][aria-checked="true"] .mn-switch::after{transform:translateX(18px)}
.mn-weekly[data-can-write="0"]{cursor:default}
.mn-set-note{margin:var(--gap-xs) var(--gap-m) 0;font:var(--t-meta);color:var(--muted)}
.mn-set + .mn-set-note + .mn-set,.mn-set-note + .mn-set{margin-top:var(--gap-xl)}
.mn-offer-wrap{padding-top:var(--gap-l)}
.mn-offer-wrap .ending{margin-top:0}
.mn-offer-wrap .ending-card{animation:none}
.ending-preview .chips{margin-top:var(--gap-m)}

/* canon №227: the settings gear, top-right of the two tab roots, in the title row. 44px target, 24px icon in the tab
   bar's line style; the title keeps clear of it (wraps first). The row variant is for the buyer root (no title). */
.head.has-gear{position:relative;padding-right:40px}
.mn-gear{position:absolute;top:-5px;right:-10px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:var(--pill-r);background:none;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mn-gear svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.mn-gear:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tabs.pill .tab:focus-visible{outline-offset:-2px}
/* C1, moved into the blocks.html head by №318 row 32: on the buyer root the head has no title, so it is only the gear: no height, no margin, and the gear
   floats over the wheel card's empty top-right corner (no row of its own) */
.head.head-gear-only{height:0;margin:0;padding:0}
.head.head-gear-only .mn-gear{top:calc(var(--gap-l) + var(--gap-xs));right:var(--gap-xs);z-index:1}

/* style D1: on a short phone (375x667) the empty People tab trims spacing and type steps so the invite button comes as high as it can */
@media (max-height: 700px) {
  .screen-people .mn-card { margin-top: var(--gap-m); padding-block: var(--gap-s); }
  .screen-people .mn-card .scene-label { margin-bottom: var(--gap-xs); }
  .screen-people .mn-list .g-row.add { min-height: var(--tap-min); padding-block: var(--gap-xs); }
  .screen-people .mn-list { margin-top: var(--gap-s); }
  .screen-people .head { margin-top: var(--gap-s); }
  .mn-root .voice-strong[data-role="mn-empty"] { margin-top: var(--gap-s); }
  .mn-invite .field { padding-block: var(--gap-s); }
  .mn-invite .field .field-text { font: var(--t-row); font-variation-settings: var(--flar-voice); }
  .mn-invite .surface-card { padding-block: var(--gap-m); }        /* №244: was --gap-s (8px): the text touched the card's edges; the sides keep the card's 16px (review R7) */
  .mn-invite .surface-card .read-p { font: var(--t-sub); }
  .mn-invite .btn-primary { height: var(--btn-h); }
}
/* P7 row 5: the picture the friend gets. P4.1 (row 44): it sits in the white card under the yellow question at the gift preview's size, framed
   (one yellow surface per view, canon 105) */
.mn-invite-pic{display:block;width:176px;height:176px;margin:0 auto var(--gap-m);border-radius:var(--r-media);box-shadow:0 0 0 1px var(--frame)}
@media (max-width: 380px){.mn-invite-pic{width:160px;height:160px}}
.mn-gifts{margin-top:var(--gap-l)}

/* forecast P2 tab (board CHAIR sec. 1.3; canon 105, 232, 229): existing tokens and components only. Order: head, week range, section label, the ONE yellow
   field (.field, --t-voice-field), the proof caption right under it (P4.5), the feeling (.read-p), the do / dont card, the buyer row, the write row, the year card, the next line. */
.screen-ahead .scene-label{margin:var(--gap-xl) 0 0;font:var(--t-section);color:var(--muted)}
.screen-ahead .scene-label + .ah-field{margin-top:var(--gap-s)}
.ah-wink{margin:var(--gap-m) 0 0;font:var(--t-read);font-style:italic;font-variation-settings:var(--flar-ui);color:var(--text);text-wrap:pretty}   /* P3.1: her aside, outside the field */
.ah-tips{padding:var(--gap-l)}
.ah-tips p{margin:var(--gap-m) 0 0;font:var(--t-read);font-variation-settings:var(--flar-ui);text-wrap:pretty}
.ah-tips p:first-child{margin-top:0}
.ah-tips b{font-weight:700}
.screen-ahead .ah-field + .ah-proof{margin-top:var(--gap-s)}   /* P4.5: her chart's fact right under the head, as in the Sunday message */
.ah-mine,.ah-write{margin-top:var(--gap-xl)}
.ah-mine + .ah-write{margin-top:var(--gap-m)}
.screen-ahead .yr-card{margin-top:var(--gap-xl)}
.screen-ahead .ah-next{margin-top:var(--gap-l)}
.screen-ahead-wheel .ah-proof{margin:var(--gap-l) 0 0;font:var(--t-read);font-variation-settings:var(--flar-ui);color:var(--text);text-wrap:pretty}

/* canon №334: the gift row under a hand-added person's chart */
.fc-gift { margin-top: var(--gap-l); }

/* Polish (Impeccable harden): the two destructive rows - delete my data, cancel the subscription - are not a row of a list: an outlined ghost row on the page, its label centred
   (tokens only; the one list of the page that has no card fill, so it never reads as a neighbour of the plain rows) */
.mn-set:has(> [data-role="mn-delete"]), .mn-set:has(> [data-sub-action="cancel"]) { background: none; border: 1px solid var(--line-strong); padding-bottom: 0; }
.mn-set:has(> [data-role="mn-delete"]) .g-row, .mn-set:has(> [data-sub-action="cancel"]) .g-row { justify-content: center; }
.mn-set:has(> [data-role="mn-delete"]) .g-main, .mn-set:has(> [data-sub-action="cancel"]) .g-main { text-align: center; }