/* Mobius -- the note page: layout containers, the nine widgets, the row card
   and its shapes, the two previews.
   ---------------------------------------------------------------------------
   Rendered by 45-layout.js (App.renderSection / renderBlock / rowCard /
   PREVIEWS). The page modes (.page[data-mode], .lhead, .lcard, .lmore, the
   peek, the keyboard bar, .pop) land with the page and grow this file; the
   page rules still in 7-db.css move here then. Sizes are Appendix C's: chips
   28 desktop / 30 phone (24 inside cards), tiles 72, stat value 28, buttons
   and rows 44, label column 112 (stacked on the phone), grid gap 12.
   Flat surfaces only, pure ASCII.

     1 containers   2 chips   3 widgets   4 the row card   5 shapes
     6 previews   7 phone */

/* ---------- 1. containers: section, grid, block, fold ------------------------ */
.lsec{min-width:0;}
.lsec+.lsec{margin-top:24px;}
.lsec-hd{
  display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;
  min-height:36px;padding:0;margin:0 0 8px;border:0;background:none;color:var(--text-2);
  text-align:left;cursor:pointer;
}
.lsec-hd strong{font-size:15px;font-weight:600;min-width:0;overflow-wrap:anywhere;}
.lsec-hd em{font-style:normal;font-family:var(--font-mono);font-size:11px;color:var(--text-3);}
.lsec-hd svg{margin-left:auto;color:var(--text-3);flex-shrink:0;transition:transform 140ms var(--ease-out);
  transform:rotate(-90deg);}
.lsec-hd[aria-expanded="true"] svg{transform:none;}
@media (pointer:coarse){.lsec-hd{min-height:44px;}}

.lgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;}
@media (min-width:768px){.lsec[data-cols="2"] .lgrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.lblk[data-span="2"],.lgrid > .fold{grid-column:1 / -1;}

/* a block: side labels = icon | 112px label | value; top = an 11px caps
   label above the value; none = the value alone */
.lblk{
  display:grid;grid-template-columns:20px 112px minmax(0,1fr);gap:2px 12px;align-items:start;
  min-height:40px;padding:6px 0;box-sizing:border-box;border-radius:10px;min-width:0;
}
.lblk[data-act]{cursor:pointer;}
@media (hover:hover){.lblk[data-act]:hover{background:color-mix(in srgb, var(--text-1) 4%, transparent);}}
.lico{display:grid;place-items:center;height:22px;color:var(--text-3);}
.lico svg{width:16px;height:16px;}
.llbl{font-size:13px;color:var(--text-3);line-height:22px;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.lval{display:block;min-width:0;font-size:14px;line-height:22px;color:var(--text-1);overflow-wrap:anywhere;}
.lval .tag,.lval .dbtag{white-space:normal;margin:1px 4px 1px 0;}
.lval .dblong{display:block;-webkit-line-clamp:unset;overflow:visible;}
.lval .dbimg{width:44px;height:44px;object-fit:cover;border-radius:8px;vertical-align:middle;margin:0 6px 4px 0;}
.lsec[data-labels="top"] .lblk{grid-template-columns:minmax(0,1fr);gap:4px;}
.lsec[data-labels="top"] .lico{display:none;}
.lsec[data-labels="top"] .llbl,.leye{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);line-height:16px;display:block;-webkit-line-clamp:unset;
}
.lsec[data-labels="none"] .lblk{grid-template-columns:minmax(0,1fr);}
/* the widgets that own their label: an eyebrow above, the value below */
.lblk.w-block,.lblk.w-stat,.lblk.w-media,.lblk.w-button,.lblk.w-cards,.lblk.w-body,
.lblk[data-preview]{grid-template-columns:minmax(0,1fr);gap:6px;}
.lblk[data-preview]{padding:0;}
.lempty{color:var(--text-3);font-size:14px;}
.lempty.verb{color:var(--text-3);}

.fold{
  display:flex;align-items:center;gap:8px;min-height:36px;width:100%;box-sizing:border-box;
  padding:0 4px;border:0;background:none;color:var(--text-3);cursor:pointer;text-align:left;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-radius:8px;
}
.fold svg{flex-shrink:0;transition:transform 140ms var(--ease-out);transform:rotate(-90deg);}
.fold[aria-expanded="true"] svg{transform:none;}
.fold:hover{color:var(--text-1);background:color-mix(in srgb, var(--text-1) 4%, transparent);}
@media (pointer:coarse){.fold{min-height:44px;}}

/* ---------- 2. chips --------------------------------------------------------
   One pill for status, select, multiselect, person, relation, checkbox,
   date and url. The hue comes from data-fn (the [data-fn] family in
   1-tokens.css resolves --c / --c-dim); a status chip is a button that
   advances the value. 28px on the page, 30 on the phone, 24 in a card. */
.lchip{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;box-sizing:border-box;
  border-radius:999px;border:1px solid transparent;font:inherit;font-size:12.5px;line-height:1;
  background:color-mix(in srgb, var(--c,var(--text-1)) 12%, transparent);
  color:var(--text-1);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  vertical-align:middle;margin:2px 6px 2px 0;
}
.lchip i{width:6px;height:6px;border-radius:2px;flex-shrink:0;background:var(--c,var(--text-3));font-style:normal;}
.lchip svg{width:12px;height:12px;flex-shrink:0;}
.lchip[data-fn="leadership"]{color:var(--fn-text-leadership);}
.lchip[data-fn="team"]{color:var(--fn-text-team);}
.lchip[data-fn="operations"]{color:var(--fn-text-operations);}
.lchip[data-fn="marketing"]{color:var(--fn-text-marketing);}
.lchip[data-fn="sales"]{color:var(--fn-text-sales);}
.lchip[data-fn="finance"]{color:var(--fn-text-finance);}
.lchip.ghost{background:none;border-color:var(--border-2);color:var(--text-3);}
.lchip.more{background:none;border-color:var(--border-1);color:var(--text-3);font-family:var(--font-mono);font-size:11px;}
.lchip.mono{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;}
button.lchip{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
button.lchip:active{transform:var(--press);}
button.lchip.st:hover{border-color:var(--border-2);}
.lval > .lchip:last-child{margin-right:0;}

/* ---------- 3. the nine widgets --------------------------------------------- */
/* block: a surface-2 box that grows, no clamp; .md renders markdown */
.w-box{
  background:var(--surface-2);border-radius:12px;padding:12px 14px;box-sizing:border-box;
  font-size:15px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;min-height:44px;
}
.w-box.md{white-space:normal;}
.w-box.md p{margin:0 0 10px;}
.w-box.md p:last-child{margin-bottom:0;}
.w-box .lval{font-size:inherit;line-height:inherit;}
.w-body .w-box{font-size:16px;line-height:1.6;}

/* stat: the Health / Amie tile */
.w-stat .lval{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;line-height:1.1;}
.w-stat .lval b{font-size:28px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.w-stat .lval small{font-size:15px;color:var(--text-2);}

/* media: tiles (72px), cover (a band at --ar), grid (3 across, 2px gutter) */
.w-tiles{display:flex;flex-wrap:wrap;gap:8px;}
.w-thumb,.w-add{
  width:72px;height:72px;border-radius:10px;overflow:hidden;flex-shrink:0;display:block;
  background:var(--surface-2);
}
.w-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.w-add,.w-drop,.w-add-card{
  border:1.5px dashed var(--border-2);background:none;color:var(--text-3);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;font:inherit;font-size:12px;
  -webkit-tap-highlight-color:transparent;
}
.w-add:hover,.w-drop:hover,.w-add-card:hover{color:var(--text-1);border-color:var(--text-3);}
.w-add svg{width:14px;height:14px;}
.w-cover{width:100%;aspect-ratio:var(--ar,16 / 9);max-height:420px;border-radius:12px;overflow:hidden;background:var(--surface-2);}
.w-cover .w-thumb{width:100%;height:100%;border-radius:0;}
.w-cover + .w-tiles{margin-top:8px;}
.w-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;border-radius:12px;overflow:hidden;}
.w-grid .w-thumb,.w-grid .w-add{width:auto;height:auto;aspect-ratio:1 / 1;border-radius:0;}
.w-drop{width:100%;min-height:72px;border-radius:12px;font-size:14px;box-sizing:border-box;}

/* toggle: a flat switch, 30x18 (51x31 on the phone), on = accent */
.w-toggle .lval{display:flex;align-items:center;min-height:22px;}
.w-switch{
  width:30px;height:18px;border-radius:999px;border:0;padding:0;position:relative;flex-shrink:0;
  background:var(--surface-3);cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.w-switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:999px;
  background:var(--bg-1);transition:left 120ms var(--ease-out);}
.w-switch[aria-checked="true"]{background:var(--accent);}
.w-switch[aria-checked="true"]::after{left:14px;background:var(--accent-text);}

/* button: a full-width 44px pill on surface-3, a copy circle at the right */
.w-button .lval{display:flex;align-items:center;gap:8px;}
.w-btn{
  flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 16px;box-sizing:border-box;border-radius:999px;
  background:var(--surface-3);color:var(--text-1);text-decoration:none;font-size:14px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.w-btn svg{width:14px;height:14px;flex-shrink:0;color:var(--text-3);}
.w-btn:hover{background:color-mix(in srgb, var(--text-1) 12%, var(--surface-3));}
.w-btn.ghost{background:none;border:1px solid var(--border-2);color:var(--text-3);font-weight:400;}
.w-copy{
  width:44px;height:44px;border-radius:999px;border:1px solid var(--border-1);background:none;
  color:var(--text-2);cursor:pointer;display:grid;place-items:center;flex-shrink:0;padding:0;
}
.w-copy:hover{color:var(--text-1);border-color:var(--border-2);}

/* cards: linked rows as mini cards */
.w-cards{display:flex;flex-direction:column;gap:8px;}
.w-card{
  display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;box-sizing:border-box;
  border:1px solid var(--border-1);border-radius:12px;background:var(--surface-1);cursor:pointer;
}
.w-card:hover{border-color:var(--border-2);}
.w-card-thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0;display:block;}
.w-card-thumb.wash{background:color-mix(in srgb, var(--c,var(--awol-marketing)) 16%, transparent);}
.w-card-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.w-card-main b{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.w-card-chips .lchip{height:24px;font-size:11.5px;padding:0 8px;margin:0 4px 0 0;}
.w-card > svg{color:var(--text-3);flex-shrink:0;}
.w-add-card{min-height:44px;border-radius:12px;font-size:13px;width:100%;box-sizing:border-box;}

/* progress: "3/7" mono + the 4px bar (.pbar, 6-shell.css) */
.w-progress .lval{display:flex;align-items:center;gap:10px;}
.w-progress .pbar{flex:1;min-width:60px;}
.w-progress .dbmono{flex-shrink:0;}

/* ---------- 4. the row card ---------------------------------------------------
   article.rc: .rc-cover | .rc-main (.rc-title .rc-sub .rc-meta .rc-props) |
   .rc-trail, then .rc-x. Flex, so a missing cover leaves no gap. The
   truncation law: the sub loses first (its clamp), then the meta ("+N" is
   written by JS), then the props; the title (two lines, then a clamp) and
   the trail (min 72px, never shrinks) never lose. */
.rc{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 12px;width:100%;box-sizing:border-box;
  padding:var(--cell-pad,11px) 12px;border-radius:12px;border:0;background:none;
  color:var(--text-1);text-align:left;cursor:pointer;margin:0;position:relative;
}
.rc > .rc-cover{flex:0 0 44px;width:44px;height:44px;border-radius:10px;overflow:hidden;
  background:var(--surface-2);display:grid;place-items:center;}
.rc > .rc-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.rc-wash{background:color-mix(in srgb, var(--c,var(--awol-marketing)) 16%, transparent);}
.rc-pill{font-family:var(--font-mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c,var(--text-2));font-weight:600;}
.rc-namecard{
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:10px 16px;
  border:1px solid color-mix(in srgb, var(--c,var(--text-1)) 40%, transparent);border-radius:12px;
  background:color-mix(in srgb, var(--bg-1) 70%, transparent);text-align:center;max-width:80%;
}
.rc-namecard small{font-family:var(--font-mono);font-size:7px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);}
.rc-namecard b{font-family:var(--font-display);font-weight:400;font-size:15px;line-height:1.2;color:var(--text-1);
  overflow-wrap:anywhere;}
.rc > .rc-main{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px;}
.rc .rc-title{
  margin:0;font-size:14.5px;font-weight:400;line-height:1.35;max-width:none;flex:none;
  white-space:normal;text-overflow:clip;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.rc .rc-sub{
  margin:0;font-size:13px;line-height:1.4;color:var(--text-3);flex:none;min-width:0;
  white-space:pre-line;text-overflow:clip;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rc-clamp,var(--lines,2));overflow:hidden;
}
.rc .rc-sub:empty,.rc .rc-meta:empty{display:none;}
.rc .rc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;flex:none;max-width:100%;}
.rc .rc-meta .lchip,.rc .rc-trail .lchip,.rc .rc-props .lchip{
  height:auto;min-height:24px;font-size:11.5px;padding:3px 8px;margin:0;line-height:1.25;
  white-space:normal;overflow:visible;text-overflow:clip;text-align:left;
}
.rc .rc-trail .lchip{white-space:nowrap;}
.rc .rc-meta .tag,.rc .rc-meta .dbtag{margin:0;}
.rc > .rc-trail{flex:0 0 auto;min-width:72px;display:flex;justify-content:flex-end;align-items:center;
  gap:6px;min-height:24px;}
.rc > .rc-trail:empty{display:none;}
.rc-when{font-size:11px;letter-spacing:.06em;color:var(--text-3);white-space:nowrap;}
.rc > .rc-x{flex-basis:100%;width:100%;}
.rc .rc-props{margin:2px 0 0;flex:none;}
.rc[aria-current="true"]{background:var(--select-bg);}
.rc .rc-tag,.rc .rc-tok{font-style:normal;color:var(--fn-text-operations);}

/* ---------- 5. shapes ------------------------------------------------------- */
/* feed: the platform mimic. A head row, the caption above the cover for
   facebook and below it for instagram, the theatre row (both variants are
   in the DOM; data-kind picks one), the real cluster, the chips. 520 max. */
.rc[data-shape="feed"]{
  flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding:0;
  border:1px solid var(--border-1);border-radius:16px;background:var(--surface-1);overflow:hidden;
  max-width:520px;margin:0 auto;
}
.vlist .rc[data-shape="feed"]{margin:0;}
/* a list of feed cards is one centred column (the old .feed): the chevron
   wrapper carries the width and the list's own card steps back */
.vlist .rcw:has(> .rc[data-shape="feed"]){max-width:548px;margin:0 auto 14px;}
.vlist:has(> .rcw > .rc[data-shape="feed"]){background:none;border:0;padding:0;}
.vlist:has(> .rcw > .rc[data-shape="feed"]) .vnewrow{max-width:548px;margin:0 auto;}
.rc[data-shape="feed"]:hover{border-color:var(--border-2);}
.rc-head{display:flex;align-items:center;gap:10px;padding:12px 16px;}
.rc-av{width:34px;height:34px;border-radius:999px;background:var(--surface-2);display:grid;place-items:center;
  overflow:hidden;flex-shrink:0;}
.rc-av img{height:14px;width:auto;display:block;}
.rc-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.rc-who b{font-size:13.5px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rc-who small{font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rc-head .rc-trail{min-width:0;}
.rc[data-shape="feed"] .rc-sub{
  padding:0 16px 12px;font-size:13px;line-height:1.55;color:var(--text-1);white-space:pre-line;
}
.rc[data-shape="feed"].rc-full .rc-sub{display:block;-webkit-line-clamp:unset;overflow:visible;white-space:normal;}
.rc[data-shape="feed"] .rc-sub p{margin:0 0 10px;}
.rc[data-shape="feed"] .rc-sub p:last-child{margin-bottom:0;}
.rc[data-shape="feed"] .rc-sub .rc-tags{display:block;margin-top:8px;font-style:normal;color:var(--fn-text-operations);}
.rc[data-kind="instagram"] .rc-sub{font-size:12.5px;color:var(--text-2);padding-top:0;}
.rc[data-kind="instagram"] .rc-cover + .rc-theatre + .rc-sub{padding-top:0;}
.rc-handle{font-weight:600;color:var(--text-1);}
.rc[data-shape="feed"] > .rc-cover{
  flex:none;width:100%;height:auto;aspect-ratio:var(--ar,1 / 1);max-height:560px;border-radius:0;
  display:grid;place-items:center;
}
.rc[data-shape="feed"] > .rc-cover.rc-wash{aspect-ratio:auto;height:200px;}
.rc-theatre{display:flex;align-items:center;gap:2px;padding:4px 8px;border-top:1px solid var(--border-1);min-height:40px;}
.rc-fb,.rc-ig{display:none;align-items:center;}
.rc-fb{flex:1;}
.rc-fb .rc-act{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;
  font-size:12.5px;color:var(--text-2);border-radius:8px;}
.rc-ig{gap:4px;padding:2px 6px;color:var(--text-1);}
.rc-ig svg{margin:0 4px;}
.rc[data-kind="facebook"] .rc-fb{display:flex;}
.rc[data-kind="instagram"] .rc-ig{display:flex;}
.rc-real{margin-left:auto;display:flex;align-items:center;gap:2px;}
.rc-real-b{
  width:32px;height:32px;border-radius:8px;border:0;background:none;color:var(--text-3);cursor:pointer;
  display:grid;place-items:center;padding:0;
}
.rc-real-b:hover{color:var(--text-1);background:color-mix(in srgb, var(--text-1) 8%, transparent);}
@media (pointer:coarse){.rc-real-b{width:44px;height:40px;}}
.rc[data-shape="feed"] > .rc-main{padding:0 16px 12px;flex:none;}
.rc[data-shape="feed"] > .rc-main:empty{display:none;}
.rc[data-shape="feed"] > .rc-main > .rc-meta{padding-top:2px;}
.rc[data-shape="feed"] > .rc-x{padding:0 16px 12px;}
/* the full-width preview of a feed card on the page */
.lpv[data-preview="card"] .rc[data-shape="feed"]{max-width:none;margin:0;}

/* tile: the campaign card. A 110px wash band with the name card (or the
   picture), a serif title, the mono date span, the linked count. */
.rc[data-shape="tile"]{
  flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding:0;border-radius:14px;overflow:hidden;
}
.vlist .rc[data-shape="tile"],.vgcard .rc[data-shape="tile"],.lpv .rc[data-shape="tile"]{
  border:1px solid var(--border-1);background:var(--surface-1);margin:4px 0;
}
.rc[data-shape="tile"] > .rc-cover{flex:none;width:100%;height:110px;border-radius:0;aspect-ratio:auto;}
.rc[data-shape="tile"] > .rc-main{padding:var(--card-pad,13px) var(--card-pad,13px) 6px;flex:none;}
.rc[data-shape="tile"] .rc-title{font-family:var(--font-display);font-size:17px;line-height:1.25;letter-spacing:-.01em;}
.rc-span,.rc-counts{font-size:11px;letter-spacing:.06em;color:var(--text-3);}
.rc[data-shape="tile"] > .rc-trail{justify-content:flex-start;padding:0 var(--card-pad,13px) var(--card-pad,13px);min-width:0;}
.rc[data-shape="tile"] > .rc-trail:empty{display:none;}
.rc[data-shape="tile"] > .rc-x{padding:0 var(--card-pad,13px) var(--card-pad,13px);}
.vbcard .rc[data-shape="tile"]{border-radius:0;}
.vbcard .rc[data-shape="tile"] .rc-title{font-family:var(--font-sans);font-size:13.5px;}
.vbcard .rc[data-shape="tile"] > .rc-cover{height:72px;}

/* the gallery card body and the phone cards keep their own paddings */
.vgcard .rc[data-shape="row"],.vbcard .rc[data-shape="row"]{padding:var(--card-pad,13px);border-radius:0;}
.vgcard .rc[data-shape="row"] > .rc-trail,.vbcard .rc[data-shape="row"] > .rc-trail{
  flex-basis:100%;justify-content:flex-start;min-width:0;order:3;}
.vgcard .rc[data-shape="row"] > .rc-cover,.vbcard .rc[data-shape="row"] > .rc-cover{display:none;}
.vcards .rc[data-shape="row"] .rc-title{font-size:15.5px;}
.vcards .rc[data-shape="row"] > .rc-cover{width:52px;height:52px;flex-basis:52px;}

/* ---------- 6. previews ----------------------------------------------------- */
.lpv{margin:0;min-width:0;}
.mailrows{
  border:1px solid var(--border-1);border-bottom:0;border-radius:14px 14px 0 0;
  padding:10px 14px 8px;background:var(--surface-1);display:flex;flex-direction:column;gap:4px;
}
.mailrow{display:flex;align-items:baseline;gap:10px;min-height:24px;font-size:13.5px;min-width:0;}
.mailrow > span:first-child{
  width:52px;flex-shrink:0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);
}
.mailrow b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mailrow .mailpre{min-width:0;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mailrow em{margin-left:auto;font-style:normal;font-family:var(--font-mono);font-size:10px;color:var(--text-3);
  white-space:nowrap;flex-shrink:0;}
.mailpv{
  display:block;width:100%;height:480px;border:1px solid var(--border-1);border-radius:0 0 14px 14px;
  background:#f4f4f2;box-sizing:border-box;
}
.mailacts{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;flex-wrap:wrap;}

/* ---------- 7. phone ---------------------------------------------------------- */
@media (max-width:767px){
  .lchip{height:30px;font-size:13px;padding:0 11px;}
  .lblk{grid-template-columns:20px minmax(0,1fr);gap:2px 12px;min-height:44px;}
  .lblk .llbl{grid-column:2;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;line-height:16px;-webkit-line-clamp:unset;}
  .lblk .lval{grid-column:2;font-size:16px;line-height:24px;}
  .lblk .lico{grid-row:1 / span 2;}
  .lsec[data-labels="top"] .lblk,.lsec[data-labels="none"] .lblk,
  .lblk.w-block,.lblk.w-stat,.lblk.w-media,.lblk.w-button,.lblk.w-cards,.lblk.w-body{grid-template-columns:minmax(0,1fr);}
  .lsec[data-labels="top"] .lblk .llbl,.lsec[data-labels="top"] .lblk .lval,
  .lsec[data-labels="none"] .lblk .lval,
  .lblk.w-block .lval,.lblk.w-stat .lval,.lblk.w-media .lval,.lblk.w-button .lval,.lblk.w-cards .lval{grid-column:1;}
  .w-switch{width:51px;height:31px;}
  .w-switch::after{width:27px;height:27px;}
  .w-switch[aria-checked="true"]::after{left:22px;}
  .rc .rc-meta .lchip,.rc .rc-trail .lchip,.rc .rc-props .lchip{min-height:24px;font-size:11.5px;}
  .rc[data-shape="feed"]{max-width:none;border-radius:14px;}
  .mailpv{height:380px;}
}

/* ---------- 8. the page (47-page.js) --------------------------------------------
   article.page[data-mode=plain|doc|record][data-db][data-wide] holds five
   keyed regions: pg-head, pg-top, pg-body (data-hold), pg-bottom, pg-links.
   Widths 700 / 760 / 640 (840 with a cover or a cards widget); title 30
   serif (28 phone); rows 36 plain / 40 doc / 44 record (44 floor on coarse
   pointers); the plain card becomes a 264px right rail at >= 1180. */
.page{margin:0 auto;max-width:760px;}
.page[data-mode="plain"]{max-width:700px;}
.page[data-mode="record"]{max-width:640px;}
.page[data-wide="1"]{max-width:840px;}
.pgcrumbs{margin-bottom:10px;}
.pgback{
  display:inline-flex;align-items:center;gap:6px;min-height:28px;
  border:0;background:none;padding:0;cursor:pointer;
  color:var(--fn-text-operations);font-size:13.5px;
}
.lhead{margin-bottom:18px;}
.pghead{display:flex;align-items:flex-start;gap:12px;}
.pgtitle{
  flex:1;min-width:0;background:none;border:0;padding:0;
  font-family:var(--font-display);font-weight:400;font-size:30px;
  line-height:1.15;letter-spacing:-.022em;color:var(--text-1);
}
.pgtitle:focus{outline:none;}
.pgtitle::placeholder{color:var(--text-3);}
/* the "..." circle replaces the Edit button; Done stays while editing */
.pgmenu{
  width:44px;height:44px;border-radius:999px;border:1px solid var(--border-1);background:var(--surface-1);
  color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:3px;
  flex-shrink:0;padding:0;margin-top:-4px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.pgmenu i{width:4px;height:4px;border-radius:999px;background:currentColor;display:block;}
.pgmenu:hover{color:var(--text-1);border-color:var(--border-2);}
.pgmenu:active{transform:var(--press);}
.pgdone{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;
  border:0;background:var(--accent);color:var(--accent-text);font:inherit;font-size:13.5px;font-weight:500;
  cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent;
}
.pgdone svg{width:14px;height:14px;}
.pgdone:active{transform:var(--press);}
.lkick{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
  margin-bottom:8px;display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;
}
.lkick i,.lsum i{display:inline-block;width:4px;height:1px;background:var(--text-3);vertical-align:middle;}
.lsub{margin:6px 0 0;font-size:15px;color:var(--text-2);line-height:1.45;}
.lcover{
  width:100%;height:160px;border-radius:14px;overflow:hidden;background:var(--surface-2);margin-bottom:16px;
}
.lcover img{width:100%;height:100%;object-fit:cover;display:block;}

/* the pinned chip strip: each pinned column is a chip block whose box is
   dissolved (display:contents), so the chips flow as one strip and the
   block stays the tap target */
.lpins{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin-top:12px;}
.lpins .lblk{display:contents;}
.lpins .lval{display:contents;}
.lpins .lchip{margin:0 6px 0 0;height:30px;font-size:13px;cursor:pointer;}
.lpins .lchip.ghost{border-style:dashed;}
.lpin-add{width:30px;padding:0;justify-content:center;}
.lpin-add svg{width:12px;height:12px;}

/* "N more properties": the columns outside every block, as line rows */
.lmore-wrap{margin-top:8px;}
.lmore{margin-top:4px;}
.lmore .lblk{min-height:36px;padding:4px 0;}

/* ---- the card: one inset grouped surface (plain has one, record one per section) */
.lcard{background:var(--surface-1);border:1px solid var(--border-1);border-radius:16px;box-sizing:border-box;min-width:0;}
.lcard.plain{border-radius:14px;overflow:hidden;}
.lcard-hd{
  display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;min-height:40px;
  padding:0 14px;border:0;background:none;color:var(--text-3);cursor:pointer;text-align:left;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
.lcard-hd.static{cursor:default;min-height:36px;padding-top:6px;}
.lcard-hd em{font-style:normal;color:var(--text-2);}
.lcard-hd svg{margin-left:auto;transition:transform 140ms var(--ease-out);transform:rotate(-90deg);}
.lcard-hd[aria-expanded="true"] svg{transform:none;}
.lcard-hd:hover{color:var(--text-1);}
.lsum{
  padding:0 14px 12px;font-size:13px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:8px;min-width:0;
}
.lsum i{flex-shrink:0;}
.lcard-bd{padding:0 14px 6px;}
.lcard-bd .lsec+.lsec{margin-top:6px;}
.ladd{
  display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 4px;border:0;background:none;
  color:var(--text-3);font:inherit;font-size:13px;cursor:pointer;border-radius:8px;
}
.ladd:hover{color:var(--text-1);}
@media (pointer:coarse){.lcard-hd,.ladd{min-height:44px;}}

/* plain: the frontmatter. Every block is a line row 36px (44 coarse), the
   key 13px text-3 at 92px (78 phone), the value 15px; sections are hairline
   dividers with an 11px caps title, not cards. */
.page[data-mode="plain"] .lcard .lblk{grid-template-columns:20px 92px minmax(0,1fr);min-height:36px;padding:3px 0;gap:2px 12px;}
.page[data-mode="plain"] .lcard .lval{font-size:15px;}
.page[data-mode="plain"] .lcard .lgrid{gap:0;}
.page[data-mode="plain"] .lcard .lsec-hd{
  min-height:30px;margin:6px 0 2px;padding-top:8px;border-top:1px solid var(--border-1);border-radius:0;
}
.page[data-mode="plain"] .lcard .lsec-hd strong{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:400;color:var(--text-3);
}
.page[data-mode="plain"] .lcard .lsec[data-i="0"] .lsec-hd{border-top:0;margin-top:0;padding-top:0;}
.page[data-mode="plain"] .lcard .fold{min-height:34px;}
@media (pointer:coarse){.page[data-mode="plain"] .lcard .lblk{min-height:44px;}}
.page[data-mode="plain"] [data-key="pg-body"]{margin-top:20px;}

/* doc: borderless grids, rows 40px, the body at its block */
.page[data-mode="doc"] .lsec .lblk{min-height:40px;}
.page[data-mode="doc"] .lsec+.lsec,.page[data-mode="doc"] [data-key="pg-top"] .lsec:first-child{margin-top:24px;}
.page[data-mode="doc"] [data-key="pg-bottom"] > .lsec:first-child{margin-top:24px;}
.lbody-eye{display:block;margin:20px 0 4px;}

/* record: the Apple grouped form. A header card with the 72px tile and up
   to four action tiles; one card per section with 44px rows (36 desktop),
   hairline separators from the label edge; the body as a titled card. */
.lhead-card{padding:16px;}
.lhead-row{display:flex;align-items:flex-start;gap:14px;}
.ltile{
  width:72px;height:72px;border-radius:16px;object-fit:cover;flex-shrink:0;display:grid;place-items:center;
  background:var(--surface-2);font-family:var(--font-display);font-size:28px;color:var(--text-2);
}
.ltile.wash{background:color-mix(in srgb, var(--c,var(--awol-marketing)) 16%, transparent);color:var(--c,var(--text-1));}
.lhead-main{flex:1;min-width:0;}
.lhead-card .pgtitle{font-size:28px;}
.lhead-card .lkick{margin-bottom:4px;}
.lacts.tiles{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;}
.lact{
  flex:1 1 60px;min-width:60px;max-width:110px;min-height:60px;border-radius:12px;border:0;background:var(--surface-2);
  color:var(--text-1);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:8px 4px;font:inherit;font-size:11px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.lact:hover{background:var(--surface-3);}
.lact:active{transform:var(--press);}
.lact-i{
  width:28px;height:28px;border-radius:999px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--awol-operations) 14%, transparent);color:var(--fn-text-operations);
}
.lact span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.page[data-mode="record"] .lsec-hd{padding:0 4px;margin-bottom:8px;}
.page[data-mode="record"] .lsec+.lsec{margin-top:24px;}
.page[data-mode="record"] [data-key="pg-top"] .lsec:first-child,.page[data-mode="record"] [data-key="pg-bottom"] .lsec:first-child{margin-top:24px;}
.page[data-mode="record"] .lsec > .lgrid{
  background:var(--surface-1);border:1px solid var(--border-1);border-radius:16px;padding:0 16px;gap:0;
}
.page[data-mode="record"] .lsec > .lgrid > .lblk,.page[data-mode="record"] .lsec > .lgrid > .fold{
  min-height:36px;padding:7px 0;border-radius:0;border-top:1px solid var(--border-1);
}
.page[data-mode="record"] .lsec > .lgrid > .lblk:first-child,.page[data-mode="record"] .lsec > .lgrid > .fold:first-child{border-top:0;}
.page[data-mode="record"] .lsec > .lgrid > .lblk{align-items:center;}
.page[data-mode="record"] .lsec[data-cols="2"] > .lgrid{column-gap:16px;}
.page[data-mode="record"] .lblk .llbl{font-size:15px;color:var(--text-1);}
.page[data-mode="record"] .lsec[data-labels="top"] .llbl{font-size:11px;color:var(--text-3);}
.page[data-mode="record"] .lblk .lval{font-size:15px;}
.page[data-mode="record"] .lblk[data-w="media"],.page[data-mode="record"] .lblk[data-preview]{margin:0 -16px;padding-left:16px;padding-right:16px;}
.page[data-mode="record"] .lblk[data-preview]{padding-top:8px;padding-bottom:8px;}
.page[data-mode="record"] .lbody{margin-top:24px;padding:0 16px 12px;}
.page[data-mode="record"] .lbody .pgbody{margin-top:8px;min-height:80px;}
.page[data-mode="record"] .lbody .lcard-hd{padding:0;}
.page[data-mode="record"] .lbody .pgtools{margin-top:8px;}
.lcard-ft{display:flex;justify-content:flex-end;padding-top:6px;color:var(--text-3);}
.page[data-mode="record"] .pglinks{
  margin-top:24px;background:var(--surface-1);border:1px solid var(--border-1);border-radius:16px;padding:12px 16px;
}
.page[data-mode="record"] .pglinks+.pglinks{margin-top:12px;}
@media (pointer:coarse){
  .page[data-mode="record"] .lsec > .lgrid > .lblk,.page[data-mode="record"] .lsec > .lgrid > .fold{min-height:44px;}
}

/* the actions row (plain and doc) and the live counter */
.lacts.row{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px;}
.lact-pill{cursor:pointer;height:30px;}
.lact-pill svg{width:12px;height:12px;}
.lcount-row{display:flex;justify-content:flex-end;margin-top:6px;color:var(--text-3);}
.lcount{font-size:11px;letter-spacing:.04em;}

/* ---- the body: rendered, or the toolbar and the textarea */
.pgtools{display:flex;align-items:center;gap:2px;margin-top:18px;flex-wrap:wrap;}
.pgtool{
  min-width:34px;height:34px;padding:0 8px;border-radius:9px;border:0;
  background:none;color:var(--text-2);cursor:pointer;font-size:13px;
}
.pgtool:hover{color:var(--text-1);background:color-mix(in srgb, var(--text-1) 8%, transparent);}
@media (pointer:coarse){.pgtool{min-width:40px;height:40px;}}
.pgedit{
  display:block;width:100%;box-sizing:border-box;margin-top:8px;
  min-height:max(40dvh,var(--pg-ta,0px));
  background:none;border:0;resize:vertical;
  font-family:var(--font-sans);font-size:16.5px;line-height:1.6;color:var(--text-1);
  field-sizing:content;
}
.pgedit:focus{outline:none;}
@media (pointer:coarse){.pgedit{resize:none;}}

.pgbody{margin-top:20px;font-size:16.5px;line-height:1.6;cursor:text;min-height:200px;}
.page[data-mode="doc"] .pgbody,.page[data-mode="record"] .pgbody{margin-top:12px;min-height:120px;}
.pgbody h1,.pgbody h2,.pgbody h3{
  font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;
  margin:22px 0 8px;line-height:1.25;
}
.pgbody h1{font-size:26px;} .pgbody h2{font-size:21px;} .pgbody h3{font-size:18px;}
.pgbody > :first-child{margin-top:0;}
.pgbody p{margin:0 0 12px;}
.pgbody ul,.pgbody ol{margin:0 0 12px;padding-left:22px;}
.pgbody li{margin:4px 0;}
.pgbody li.mdtask{list-style:none;margin-left:-22px;display:flex;gap:9px;align-items:flex-start;}
.pgbody blockquote{
  margin:0 0 12px;padding-left:14px;border-left:2px solid var(--border-2);
  color:var(--text-2);
}
.pgbody code{
  font-family:var(--font-mono);font-size:13px;padding:2px 5px;border-radius:5px;
  background:var(--surface-2);
}
.pgbody pre{
  background:var(--surface-2);border-radius:12px;padding:14px;overflow-x:auto;margin:0 0 12px;
}
.pgbody pre code{background:none;padding:0;}
.pgbody hr{border:0;border-top:1px solid var(--border-1);margin:20px 0;}
.pgbody a{color:var(--fn-text-operations);}
.pgbody .wl{color:var(--fn-text-operations);text-decoration:none;}
.pgbody .wl.new{color:var(--text-3);border-bottom:1px dashed var(--border-2);}
.pgbody img{border-radius:12px;max-width:100%;}
.pgbody table{border-collapse:collapse;margin:0 0 12px;}
.pgbody th,.pgbody td{border:1px solid var(--border-1);padding:6px 10px;text-align:left;}

.mdck{
  display:inline-block;vertical-align:middle;
  width:18px;height:18px;border-radius:5px;margin-top:3px;flex-shrink:0;
  border:1.5px solid var(--border-2);background:none;cursor:pointer;
}
.mdck.on,.mdck[data-on="1"],.mdck:checked{background:var(--awol-marketing);border-color:var(--awol-marketing);}
@media (pointer:coarse){.pgbody li.mdtask{min-height:32px;}}

.pglinks{margin-top:26px;}
.pglinks .flbl{
  display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin:0 0 8px;
}
.pglinks .tag{margin-bottom:6px;cursor:pointer;}
.empty{padding:40px 0;text-align:center;color:var(--text-3);font-size:14px;}
.lnk{border:0;background:none;cursor:pointer;color:inherit;}

/* ---- the inline editor inside a value cell: an outlined field in place */
.lval[data-editing]{display:block;}
.lval[data-editing] input,.lval[data-editing] textarea,.lval[data-editing] select{
  width:100%;box-sizing:border-box;padding:6px 10px;border-radius:8px;border:1px solid var(--border-focus);
  background:var(--surface-1);color:var(--text-1);font:inherit;font-size:14px;line-height:1.4;outline:none;
}
.lval[data-editing] textarea{min-height:88px;resize:vertical;}
.lval[data-editing] input[type="checkbox"]{width:18px;height:18px;padding:0;}
.lblk[data-editing]{background:none !important;}
.dbpick{
  display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border-radius:999px;border:1px dashed var(--border-2);
  background:none;color:var(--text-2);font:inherit;font-size:13px;cursor:pointer;
}

/* ---- the popover (desktop): 250px, radius 14, anchored under the value */
.oscrim.clear{background:none;animation:none;}
.pop{
  position:absolute;z-index:2;width:250px;max-height:420px;display:flex;flex-direction:column;overflow:hidden;
  border-radius:14px;background:var(--bg-1);border:1px solid var(--border-1);box-shadow:var(--shadow-3);
  animation:ovfade 120ms var(--ease-out);
}
.pop-hd{padding:10px 14px 6px;display:flex;flex-direction:column;gap:1px;}
.pop-hd strong{font-size:13.5px;font-weight:500;}
.pop-hd small{font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pop-bd{flex:1;min-height:0;overflow-y:auto;padding:4px 6px 6px;overscroll-behavior:contain;}
.pop-ft{flex-shrink:0;border-top:1px solid var(--border-1);padding:6px;}
.pop hr,.lsheet hr{border:0;border-top:1px solid var(--border-1);margin:4px 0;}
.pop .osec{padding:8px 8px 4px;}

/* rows inside the popover and the property sheet: 36px desktop, 44 phone */
.prow{
  display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;min-height:36px;
  padding:4px 8px;border:0;border-radius:9px;background:none;color:var(--text-1);font:inherit;font-size:14px;
  text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.prow:hover{background:color-mix(in srgb, var(--text-1) 6%, transparent);}
.prow:active{transform:var(--press);}
.prow-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;overflow-wrap:anywhere;}
.prow-t small{font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prow-t .lchip{margin:0;max-width:100%;}
.prow-ck{width:20px;height:20px;flex-shrink:0;display:grid;place-items:center;color:var(--fn-text-operations);}
.prow-i{width:24px;height:24px;border-radius:7px;flex-shrink:0;display:grid;place-items:center;background:var(--surface-2);color:var(--text-3);}
.prow.on .prow-t > .lchip{border-color:transparent;}
.prow.file{position:relative;}
.pnew{display:flex;gap:6px;align-items:center;padding:4px 2px;}
.pnew input,.psearch input{
  flex:1;min-width:0;box-sizing:border-box;height:34px;padding:0 10px;border-radius:9px;border:1px solid var(--border-1);
  background:var(--surface-1);color:var(--text-1);font:inherit;font-size:14px;
}
.pnew input:focus,.psearch input:focus{outline:none;border-color:var(--border-focus);}
.pnew .obtn{height:34px;flex-shrink:0;}
.psearch{position:sticky;top:0;z-index:1;background:var(--bg-1);padding:4px 2px 8px;display:flex;}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;border-radius:12px;overflow:hidden;margin:4px 2px 10px;}
.pthumb{position:relative;aspect-ratio:1 / 1;background:var(--surface-2);display:block;}
.pthumb img{width:100%;height:100%;object-fit:cover;display:block;}
.prm{
  position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:999px;border:0;
  background:var(--bg-1);color:var(--text-1);cursor:pointer;display:grid;place-items:center;padding:0;box-shadow:var(--shadow-1);
}
@media (pointer:coarse){.prm{width:32px;height:32px;}}

/* ---- the phone sheet: grabber, X left, filled check right, two detents */
.lsheet{max-height:88dvh;}
.grabber{display:none;width:36px;height:5px;border-radius:999px;background:var(--border-2);margin:8px auto 0;flex-shrink:0;}
.lsheet-hd{display:flex;align-items:center;gap:10px;padding:12px 14px 6px;flex-shrink:0;}
.lsheet-hd .oclose{position:static;}
.lsheet-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.lsheet-t strong{font-size:16px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lsheet-t small{font-size:13px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ocheck{
  width:30px;height:30px;border-radius:999px;border:0;display:grid;place-items:center;cursor:pointer;
  background:var(--accent);color:var(--accent-text);flex-shrink:0;
}
.lsheet-bd{padding:4px 12px 12px;overscroll-behavior:contain;}
.lsheet-ft{flex-shrink:0;border-top:1px solid var(--border-1);padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));}
.lsheet .osec{padding:12px 8px 4px;}

/* ---- the note menu: the Mode segment, then Apple-menu rows */
.mseg{padding:6px 8px 8px;}
.lseg{display:flex;height:32px;border-radius:9px;background:var(--surface-2);padding:2px;gap:2px;}
.lseg button{
  flex:1;border:0;border-radius:7px;background:none;color:var(--text-2);font:inherit;font-size:13px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.lseg button[aria-pressed="true"]{background:var(--bg-1);color:var(--text-1);box-shadow:var(--shadow-1);}
.lseg-sub{display:block;margin-top:6px;font-size:12px;color:var(--text-3);text-align:center;}
.mrow{
  display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;min-height:36px;padding:0 10px;
  border:0;border-radius:9px;background:none;color:var(--text-1);font:inherit;font-size:14px;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.mrow svg{width:14px;height:14px;color:var(--text-3);flex-shrink:0;}
.mrow:hover{background:color-mix(in srgb, var(--text-1) 6%, transparent);}
.mrow:active{transform:var(--press);}
.mrow.danger,.mrow.danger svg{color:var(--danger);}
.orow{padding-left:calc(8px + var(--lvl,0) * 14px);}

/* ---- the plain rail: at >= 1180 the frontmatter card sits beside the body */
@media (min-width:1180px){
  .page[data-mode="plain"]{
    display:grid;grid-template-columns:minmax(0,700px) 264px;column-gap:32px;align-content:start;
    grid-template-areas:"head head" "body top" "bottom top" "links top";max-width:996px;
  }
  .page[data-mode="plain"] > [data-key="pg-head"]{grid-area:head;}
  .page[data-mode="plain"] > [data-key="pg-top"]{grid-area:top;}
  .page[data-mode="plain"] > [data-key="pg-body"]{grid-area:body;margin-top:0;}
  .page[data-mode="plain"] > [data-key="pg-bottom"]{grid-area:bottom;}
  .page[data-mode="plain"] > [data-key="pg-links"]{grid-area:links;}
  .page[data-mode="plain"] .lcard .lblk{grid-template-columns:18px 84px minmax(0,1fr);min-height:34px;gap:2px 8px;}
  .page[data-mode="plain"] .lcard .lval{font-size:14px;}
  .page[data-mode="plain"] .lcard .llbl{font-size:12.5px;}
  .page[data-mode="plain"] .pgbody{margin-top:8px;}
}

/* ---- phone */
@media (max-width:767px){
  .pgtitle,.lhead-card .pgtitle{font-size:28px;}
  .lcover{height:96px;}
  .page[data-mode="plain"] .lcard .lblk{grid-template-columns:20px 78px minmax(0,1fr);}
  .page[data-mode="plain"] .lcard .lblk .llbl{grid-column:2;font-family:inherit;font-size:13px;letter-spacing:0;text-transform:none;line-height:22px;}
  .page[data-mode="plain"] .lcard .lblk .lval{grid-column:3;font-size:15px;line-height:22px;}
  .page[data-mode="plain"] .lcard .lblk .lico{grid-row:auto;}
  .page[data-mode="record"] .lsec > .lgrid > .lblk{min-height:44px;}
  .lhead-card{padding:14px;}
  .lact{max-width:none;}
  .grabber{display:block;}
  .osheet[data-detent="half"]{max-height:45dvh;}
  .osheet[data-detent="full"]{max-height:88dvh;}
  .prow,.mrow{min-height:44px;font-size:15px;}
  .lseg{height:36px;}
  /* 16px or iOS Safari zooms on focus (the title stays its 28px serif) */
  .page input:not(.pgtitle),.page textarea,.page select,.pop input,.lsheet input,.lsheet textarea{font-size:16px;}
  .lval[data-editing] input,.lval[data-editing] textarea{font-size:16px;padding:9px 12px;}
  .pgedit{font-size:16.5px;}
  .page input.pgtitle{font-size:28px;}
  /* record rows on the phone: a form label, not a caps eyebrow */
  .page[data-mode="record"] .lsec[data-labels="side"] .lblk .llbl{
    font-family:inherit;font-size:13px;letter-spacing:0;text-transform:none;color:var(--text-2);line-height:18px;
  }
  .page[data-mode="record"] .lblk .lval{font-size:16px;}
  .pnew input,.psearch input{height:40px;}
  .lcount{font-size:12px;}
}

/* ---------- 9. the peek (47-page.js App.paintPeek) ---------------------------
   #peek is a sibling of the scroller inside .mob-body. Three modes by width:
   side (>= 1180) is a 420px right panel that pushes the page so the list
   stays usable with the open row lit; center (768-1179) is 720 x 82% over a
   scrim; full (< 768) is a sheet with a grabber and a back circle. The pane
   holds the same five-region article the page route draws. */
#peek[hidden]{display:none;}
.peek-scrim{position:absolute;inset:0;z-index:54;border:0;padding:0;cursor:default;
  background:var(--scrim);animation:ovfade 180ms var(--ease-out);}
.peek{
  position:absolute;z-index:55;display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg-1);overscroll-behavior:contain;
}
.peek[data-mode="side"]{top:0;right:0;bottom:0;width:420px;border-left:1px solid var(--border-1);}
/* centred in the CONTENT area: .mob-body spans the sidebar too, so the
   centre shifts right by half the menu (rail) width */
.peek[data-mode="center"]{
  top:50%;left:calc(50% + var(--mob-menu-open) / 2);transform:translate(-50%,-50%);
  width:min(720px,calc(100% - var(--mob-menu-open) - 32px));height:82%;
  border-radius:18px;border:1px solid var(--border-1);box-shadow:var(--shadow-3);
  animation:ovpop 200ms var(--ease-out);
}
.peek[data-mode="full"]{inset:0;padding-bottom:env(safe-area-inset-bottom,0px);animation:ovrise 240ms var(--ease-out);}
body.menu-rail .peek[data-mode="center"]{left:calc(50% + var(--mob-menu-rail) / 2);width:min(720px,calc(100% - var(--mob-menu-rail) - 32px));}
@media (min-width:1180px){body.peek-open .mob-page{padding-right:436px;}}
.peek-hd{
  display:flex;align-items:center;gap:4px;height:44px;padding:0 8px 0 6px;flex-shrink:0;
  border-bottom:1px solid var(--border-1);user-select:none;-webkit-user-select:none;
}
.peek[data-mode="full"] .peek-hd{height:calc(44px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);}
.peek-x,.peek-nav{
  width:36px;height:36px;border-radius:999px;border:0;background:none;color:var(--text-2);
  display:grid;place-items:center;cursor:pointer;padding:0;flex-shrink:0;
}
.peek-x:hover,.peek-nav:hover{color:var(--text-1);background:color-mix(in srgb, var(--text-1) 8%, transparent);}
.peek-x:active,.peek-nav:active{transform:var(--press);}
.peek-nav[disabled]{opacity:.35;cursor:default;}
.peek-nav[data-dir="-1"] svg{transform:rotate(180deg);}
/* the folder name never truncates (5.9): two lines, then a clip */
.peek-name{flex:1;min-width:0;font-size:13px;line-height:1.25;color:var(--text-3);overflow:hidden;white-space:normal;
  overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;padding-left:4px;}
.peek-pos{font-size:10.5px;color:var(--text-3);letter-spacing:.04em;flex-shrink:0;margin-right:4px;}
.peek-openpage{
  height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--border-1);background:none;
  color:var(--text-1);font:inherit;font-size:12.5px;cursor:pointer;flex-shrink:0;white-space:nowrap;margin-left:2px;
}
.peek-openpage:hover{border-color:var(--border-2);}
.peek-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 48px;}
.peek .page,.peek .page[data-mode],.peek .page[data-wide="1"]{max-width:none;}
@media (min-width:1180px){.peek .page[data-mode="plain"]{display:block;}}
.peek .pgtitle{font-size:24px;}
.peek .pgbody,.peek .pgedit{font-size:15.5px;}
.peek .lcover{height:120px;}
.peek .lsec[data-cols="2"] .lgrid{grid-template-columns:minmax(0,1fr);}
.peek .lblk[data-span="2"]{grid-column:auto;}
.peek .pgedit{min-height:30dvh;}
/* the open row behind the pane */
.vtr[aria-current="true"],.vtr[aria-current="true"] .vtsel,.vtr[aria-current="true"] .vt-t,.vtr[aria-current="true"] .pin{
  background:var(--select-bg);
}
@media (max-width:767px){
  .peek-scroll{padding:14px 16px 120px;}
  .peek .pgtitle{font-size:26px;}
  .peek .pgbody,.peek .pgedit{font-size:16.5px;}
  .peek-openpage{display:none;}   /* the row's own page is one tap from the note menu on a phone */
  .peek-x,.peek-nav{width:44px;height:44px;}
}
@media (pointer:coarse){.peek-x,.peek-nav{width:44px;height:44px;}.peek-openpage{height:44px;}}

/* ---------- 10. the keyboard bar (6.5) ---------------------------------------
   A 48px pill fixed above the iOS keyboard, positioned from --kb (set by
   App.kbTrack from the visual viewport), shown only while #pg-body has the
   focus on a coarse pointer. Two pages: insert and format. */
.kbbar{
  position:fixed;left:14px;right:14px;z-index:92;height:48px;border-radius:999px;
  bottom:calc(var(--kb,0px) + 8px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:0;padding:0 2px;box-sizing:border-box;
  background:var(--bg-1);border:1px solid var(--border-1);box-shadow:var(--shadow-float);
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.kbbar[hidden]{display:none;}
.kb-tools{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-around;}
.kbbar button{
  width:44px;height:44px;border:0;border-radius:999px;background:none;color:var(--text-1);
  display:grid;place-items:center;padding:0;cursor:pointer;font:inherit;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.kbbar button:active{background:color-mix(in srgb, var(--text-1) 10%, transparent);}
.kbbar button svg{width:24px;height:24px;}
.kb-g{font-size:20px;line-height:1;font-family:var(--font-sans);}
.kb-g b{font-weight:700;} .kb-g i{font-style:italic;font-family:var(--font-display);}
.kb-wiki,.kb-code{font-family:var(--font-mono);font-size:13px;letter-spacing:-.04em;}
.kb-swap .kb-g{font-size:17px;font-weight:500;}
.kbbar[data-page="format"] .kb-swap{background:color-mix(in srgb, var(--text-1) 10%, transparent);}
.kb-x{color:var(--text-3);}
/* the caret stays above the keyboard (6.6) */
.pgedit{scroll-margin-bottom:calc(var(--kb,0px) + 60px);}
/* on a coarse pointer the bar IS the toolbar; the desktop keeps .pgtools */
@media (pointer:coarse){.pgtools{display:none;}}

/* ---------- 11. compose from the layout (48-overlays.js, spec 3.6) ----------- */
.osheet.cmp{width:min(520px,calc(100% - 32px));}
.cmp-body{padding:14px 20px 18px;}
.ckick{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
  padding:16px 44px 0 0;
}
.cmp-title{
  display:block;width:100%;box-sizing:border-box;margin:6px 0 4px;padding:4px 0;border:0;background:none;
  font-family:var(--font-display);font-size:24px;line-height:1.2;letter-spacing:-.018em;color:var(--text-1);
}
.cmp-title:focus{outline:none;}
.cmp-title::placeholder{color:var(--text-3);}
.cmp-body .ofield > span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;}
.cmp-body .ofield input:not(.cmp-title),.cmp-body .ofield textarea{background:var(--surface-1);}
.cmp-body .ofield input[type="checkbox"]{width:22px;height:22px;padding:0;vertical-align:middle;}
.cmp-ck{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;}
.cmp-ck > span{margin:0;}
.cmedia{display:flex;flex-wrap:wrap;gap:8px;}
.cmp-thumb{position:relative;}
.cmp-add{width:72px;height:72px;border-radius:10px;flex-direction:column;font-size:11px;}
.cmp-rel{width:100%;min-height:40px;justify-content:flex-start;border-radius:11px;padding:8px 12px;text-align:left;
  white-space:normal;overflow-wrap:anywhere;font-size:14px;}
.cmp-more{margin-top:14px;}
.cmp-all{border-top:1px solid var(--border-1);margin-top:14px;}
.cmp-count{letter-spacing:.06em;}
@media (max-width:767px){
  .osheet.cmp{width:100%;}
  .cmp-body{padding-top:6px;}
  .ckick{padding-top:12px;}
  .cmp-title{font-size:26px;}
}

/* ---------- 12. 44px targets on a coarse pointer (6.4) --------------------------
   A chip that acts keeps its 30px pill but grows a 44px hit box: 7px of
   transparent border above and below, background-clip so the pill stays the
   pill, the ghost ring as an inset shadow (a border would show). */
@media (pointer:coarse){
  .lpins .lchip,.lact-pill,.lpin-add{
    height:44px;border-top:7px solid transparent;border-bottom:7px solid transparent;background-clip:padding-box;
  }
  .lpins .lchip.ghost,.lact-pill.ghost,.lpin-add{border-color:transparent;box-shadow:inset 0 0 0 1px var(--border-2);}
  .pglinks .tag{border-top:10px solid transparent;border-bottom:10px solid transparent;background-clip:padding-box;}
  .pglinks .tag.ghost{border-color:transparent;box-shadow:inset 0 0 0 1px var(--border-1);}
  .pgback{min-height:44px;min-width:44px;}
  /* the property sheet's footer field and button, the thumbnail's remove x
     (a 32px circle painted inside a 44px box), the note menu's Mode segment */
  .pnew input,.pnew .obtn{height:44px;}
  .prm{width:44px;height:44px;top:0;right:0;border:6px solid transparent;background-clip:padding-box;box-shadow:none;}
  .lseg{height:48px;}
  .page[data-mode="plain"] .lcard .fold{min-height:44px;}
  .cmp-rel{min-height:44px;}
  .pgdone{height:44px;}
  .pgtool{min-width:44px;height:44px;}
  .rc-real-b{height:44px;}
  .pgbody li.mdtask{min-height:44px;align-items:center;}
  .rc-sub li.mdtask{display:flex;gap:8px;align-items:center;min-height:44px;}
  .mdck{position:relative;margin-top:0;}
  .mdck::before{content:"";position:absolute;inset:-13px;}
  .grabber{position:relative;touch-action:none;}
  .grabber::before{content:"";position:absolute;inset:-16px -60px -22px;}
  .lchip.more{min-height:44px;}
}

/* ---- "+N": every chip of one value, in the popover / sheet */
.chips-all{display:flex;flex-wrap:wrap;gap:4px 2px;padding:6px 8px 10px;}
.chips-all .lchip{margin:2px 4px 2px 0;white-space:normal;height:auto;min-height:28px;padding:4px 10px;line-height:1.25;overflow:visible;text-overflow:clip;}

/* ---- the picture viewer: a layer over everything, Back and Escape close it */
.viewer-scrim{background:color-mix(in srgb, #000 82%, transparent);}
.viewer{
  position:fixed;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));box-sizing:border-box;
  pointer-events:none;
}
.viewer > *{pointer-events:auto;}
.viewer-img{max-width:100%;max-height:calc(100dvh - 120px);object-fit:contain;border-radius:12px;background:#000;}
.viewer-x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;width:44px;height:44px;border-radius:999px;
  background:color-mix(in srgb, #fff 14%, transparent);color:#fff;border:0;display:grid;place-items:center;cursor:pointer;}
.viewer-x:hover{background:color-mix(in srgb, #fff 24%, transparent);color:#fff;}
.viewer-open{color:#fff;font-size:13px;text-decoration:none;opacity:.8;padding:10px 14px;border-radius:999px;
  border:1px solid color-mix(in srgb, #fff 30%, transparent);min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;}
.viewer-open:hover{opacity:1;}

/* ---- text that lost a 409: kept on this device, offered back */
.lost{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:14px 0 4px;padding:12px 14px;border-radius:12px;
  background:color-mix(in srgb, var(--awol-operations) 10%, var(--surface-1));border:1px solid color-mix(in srgb, var(--awol-operations) 30%, var(--border-1));
  font-size:13.5px;line-height:1.4;color:var(--text-1);
}
.lost-t{flex:1 1 260px;min-width:0;}
.lost-b{display:flex;flex-wrap:wrap;gap:8px;}
.lost .obtn{min-height:34px;}
@media (pointer:coarse){.lost .obtn{min-height:44px;}}