/* Mobius v2 -- the database engine: header, filter bar, and the five views.
   ---------------------------------------------------------------------------
   Geometry is the design's, verbatim (FolderBody / DbHeader / ViewFilterBar /
   ViewList / ViewTable / ViewBoard / ViewCalendar / ViewGallery). Where a
   number looks arbitrary it came from the artboard and is left alone.

   Flat by rule (2026-09-05): every view container is an opaque neutral with
   a hairline; no gradients, no glass. Pure ASCII -- the view glyphs are real
   characters and therefore live in JS.

     1 page head (DbHeader)      2 filter bar
     3 list    4 table    5 board    6 calendar    7 gallery
     8 footer  9 peek pane
--------------------------------------------------------------------------- */

/* ---------- 0. density ---------------------------------------------------------
   One attribute on the dbbody wrapper (43-folder.js) and every view inherits
   the knobs: row height, cell padding, cell type size, the line cap, card
   padding and the calendar cell. The values come from the spec (5.2). The
   coarse-pointer floor is written through --row-h0 because a custom property
   cannot name itself inside max(). :root carries the regular values so a
   table drawn outside a dbbody still has a size. */
:root{--row-h0:40px;--row-h:40px;--cell-pad:11px;--cell-fs:13.5px;--lines:2;
  --card-pad:13px;--cal-h:88px;--vt-sel:40px;--vt-tmin:0px;--vt-tmax:9999px;}
[data-density="compact"]{--row-h0:36px;--cell-pad:8px;--cell-fs:12.5px;--lines:1;--card-pad:10px;--cal-h:64px;}
[data-density="regular"]{--row-h0:40px;--cell-pad:11px;--cell-fs:13.5px;--lines:2;--card-pad:13px;--cal-h:88px;}
[data-density="roomy"]  {--row-h0:56px;--cell-pad:14px;--cell-fs:14px;--lines:4;--card-pad:16px;--cal-h:120px;}
[data-density]{--row-h:var(--row-h0);}
@media (pointer:coarse){:root,[data-density]{--row-h:max(var(--row-h0),46px);}}

/* ---------- 1. DbHeader ------------------------------------------------------ */
.db-head{display:flex;align-items:flex-start;gap:14px;}
/* An emoji if he picked one, else the folder's initial on a tinted swatch in
   the space's hue (--sc is written inline by 43-folder.js). */
.db-icon{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  display:grid;place-items:center;font-size:21px;border:0;cursor:pointer;
  background:color-mix(in srgb, var(--sc,var(--awol-marketing)) 16%, transparent);
  color:var(--sc,var(--awol-marketing));
  font-family:var(--font-mono);font-size:17px;
}
.db-icon[data-emoji="1"]{font-family:inherit;font-size:22px;color:var(--text-1);}
.db-icon:hover{background:color-mix(in srgb, var(--sc,var(--awol-marketing)) 24%, transparent);}
.db-title{flex:1;min-width:0;}
.db-title h1{
  font-family:var(--font-display);font-weight:400;font-size:32px;
  line-height:1.12;letter-spacing:-.022em;margin:0;cursor:text;
}
.db-title input.dbht{
  font:inherit;font-family:var(--font-display);font-size:32px;font-weight:400;
  line-height:1.12;letter-spacing:-.022em;
  width:100%;background:none;border:0;border-bottom:1px dashed var(--border-2);
  color:var(--text-1);padding:0 0 2px;
}
.db-desc{font-size:14px;line-height:1.5;color:var(--text-2);margin-top:6px;cursor:text;}
.db-desc:empty::before{content:attr(data-placeholder);color:var(--text-3);}
.db-dots{
  width:28px;height:28px;border-radius:8px;border:0;background:none;flex-shrink:0;
  color:var(--text-3);cursor:pointer;display:grid;place-items:center;
}
.db-dots:hover{color:var(--text-1);background:color-mix(in srgb, var(--text-1) 8%, transparent);}

/* ---------- 2. ViewFilterBar ------------------------------------------------- */
.vfb{
  display:flex;flex-direction:column;gap:10px;
  padding-bottom:10px;border-bottom:1px solid var(--border-1);margin-top:16px;
}
.vfb-row{display:flex;align-items:center;gap:8px;min-width:0;}
.vfb-tabs{display:flex;align-items:center;gap:2px;overflow-x:auto;min-width:0;flex:1;}
.vfb-tabs::-webkit-scrollbar{height:0;}
.vfb-tabs{scrollbar-width:none;}
.vtab{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  padding:6px 10px;border-radius:9px;border:0;background:none;
  color:var(--text-2);font-size:13px;cursor:pointer;white-space:nowrap;
}
.vtab i{font-style:normal;font-family:var(--font-mono);font-size:12px;opacity:.8;}
.vtab:hover{background:color-mix(in srgb, var(--text-1) 7%, transparent);}
.vtab[aria-current="page"]{background:var(--surface-2);color:var(--text-1);}
.vfb-add{
  width:26px;height:26px;border-radius:8px;border:0;background:none;flex-shrink:0;
  color:var(--text-3);cursor:pointer;display:grid;place-items:center;
}
.vfb-add:hover{color:var(--text-1);background:color-mix(in srgb, var(--text-1) 8%, transparent);}

.vfb-end{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.vtool{
  width:30px;height:30px;border-radius:9px;border:0;background:none;
  color:var(--text-3);cursor:pointer;display:grid;place-items:center;
}
.vtool:hover{color:var(--text-1);background:color-mix(in srgb, var(--text-1) 8%, transparent);}
.vtool[data-on="1"]{color:var(--vc,var(--awol-operations));}
.vsearch{
  height:30px;flex:0 1 190px;min-width:0;
  display:flex;align-items:center;gap:7px;padding:0 10px;
  border-radius:9px;border:1px solid var(--border-1);background:var(--surface-2);
}
.vsearch input{flex:1;min-width:0;background:none;border:0;font-size:13px;color:var(--text-1);}
.vsearch input:focus{outline:none;}

/* the New split button: the design's one solid accent control */
.vnew{display:inline-flex;align-items:stretch;flex-shrink:0;
  height:30px;border-radius:9px;overflow:hidden;background:var(--awol-marketing);}
.vnew button{border:0;background:none;color:#fff;cursor:pointer;display:grid;place-items:center;}
.vnew .vnew-main{padding:0 13px;font-size:13px;}
.vnew .vnew-more{width:26px;border-left:1px solid rgba(255,255,255,.3);}

.vchips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.vchip{
  display:inline-flex;align-items:center;gap:6px;height:27px;
  padding:0 6px 0 10px;border-radius:999px;font-size:12px;
  background:var(--surface-2);border:1px solid var(--border-1);color:var(--text-2);
}
.vchip button{
  width:17px;height:17px;border-radius:999px;border:0;background:none;
  color:var(--text-3);cursor:pointer;display:grid;place-items:center;
}

/* ---------- shared cell shapes ----------------------------------------------- */
.dbtag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:999px;font-size:11.5px;white-space:nowrap;
  background:color-mix(in srgb, var(--sc,var(--awol-insight)) 16%, transparent);
  color:var(--fnc,var(--text-1));
}
.dbtag i{width:6px;height:6px;border-radius:2px;background:var(--sc,var(--awol-insight));font-style:normal;}
.dbperson{display:inline-flex;align-items:center;gap:7px;font-size:13px;}
.dbperson i{
  width:20px;height:20px;border-radius:999px;font-style:normal;
  display:grid;place-items:center;background:var(--surface-3);
  font-family:var(--font-mono);font-size:10px;
}
.dbmono{font-family:var(--font-mono);font-size:12px;}
/* a long-text cell shows the density's line cap, never a screen-tall row */
.dblong{
  display:-webkit-box;-webkit-line-clamp:var(--lines,2);-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.35;white-space:normal;
}
.dbck{
  width:16px;height:16px;border-radius:5px;display:inline-grid;place-items:center;
  border:1.5px solid var(--border-2);
}
.dbck.on{background:var(--awol-finance);border-color:var(--awol-finance);}
.dbck.on::after{content:"";width:8px;height:4px;border-left:1.5px solid #fff;
  border-bottom:1.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px);}
.dbnote{font-size:12.5px;color:var(--text-3);}
.dbl{color:var(--fn-text-operations);text-decoration:none;}
.dbl:hover{text-decoration:underline;}

/* ---------- 3. ViewList ------------------------------------------------------- */
.vlist{padding:6px;border-radius:14px;background:var(--surface-1);border:1px solid var(--border-1);}
.dbrow{
  display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
  padding:var(--cell-pad) 12px;border-radius:12px;border:0;background:none;
  color:var(--text-1);text-align:left;cursor:pointer;margin:0;
  flex-wrap:wrap;row-gap:6px;
}
.dbrow-name,.dbrow-sub{flex-basis:auto;}
/* the row card's props (L.card.lines / the phone table's columns) and its
   expansion take a line of their own under the row */
.dbrow > .rc-props,.dbrow > .rc-x{flex-basis:100%;width:100%;}
.dbrow:hover{background:color-mix(in srgb, var(--text-1) 6%, transparent);}
.dbrow-name{font-size:14.5px;flex-shrink:0;max-width:38%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.dbrow-sub{font-size:13px;color:var(--text-3);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dbrow-meta{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.vnewrow{
  display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;
  min-height:40px;padding:0 12px;border:0;background:none;border-radius:12px;
  color:var(--text-3);font-size:13.5px;cursor:pointer;text-align:left;
}
.vnewrow:hover{color:var(--text-1);background:color-mix(in srgb, var(--text-1) 6%, transparent);}

/* ---------- 4. ViewTable ------------------------------------------------------
   A two-axis scroller. .vtwrap has a height on purpose (100dvh minus its own
   top, measured by App.vtFit) so it is the scrolling ancestor of every sticky
   cell: the head sticks to its top, the title column (and a pinned second
   column) to its left, the calc row to its bottom. Rows are CSS grids sharing
   one track list (--vt-cols, written inline by 44-views2.js), so a column
   width lives in one place and a drag on a grip moves one value. Rows are
   content-visibility:auto: 500 x 60 cells cost what is on screen. */
.vtwrap{
  border-radius:14px;overflow:auto;background:var(--surface-1);border:1px solid var(--border-1);
  max-height:calc(100dvh - var(--vt-top,240px));overscroll-behavior:contain;
  overscroll-behavior-x:contain;
}
.vt{min-width:100%;width:max-content;}
.vthead,.vtr,.vtcalc{display:grid;grid-template-columns:var(--vt-cols);align-items:stretch;}
.vthead{
  min-height:36px;background:var(--surface-2);
  border-bottom:1px solid var(--border-2);position:sticky;top:0;z-index:2;
}
/* the placeholder for a skipped row is the row less its hairline, so the
   scroller's height is honest to the pixel */
.vtr{min-height:var(--row-h);border-bottom:1px solid var(--border-1);
  content-visibility:auto;contain-intrinsic-size:auto calc(var(--row-h) - 1px);}
.vtr:hover{background:color-mix(in srgb, var(--text-1) 5%, transparent);}
.vth,.vtd{
  padding:0 var(--cell-pad);border-right:1px solid var(--border-1);min-width:0;position:relative;
}
.vth{display:flex;align-items:center;gap:7px;}
.vth{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);}
.vth > i{font-style:normal;font-size:11px;opacity:.75;flex-shrink:0;}
/* a property label never truncates (5.9): two lines, then a clip */
.vth > span{overflow:hidden;text-overflow:clip;white-space:normal;min-width:0;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.25;}
.vth .vsort{color:var(--awol-operations);flex-shrink:0;}
/* A cell IS its content box (one node per cell: 520 x 60 is 31,200 of
   them). A block with the row's line-height centres one line and gives a
   real ellipsis; chips, thumbs and boxes sit on that line by vertical-align.
   The title cell is the one flex row (icon, text, the Open pill). */
.vtd{
  display:block;font-size:var(--cell-fs);overflow:hidden;
  line-height:calc(var(--row-h) - 1px);white-space:nowrap;text-overflow:ellipsis;
}
.vtd.num,.vtd.date{text-align:right;font-family:var(--font-mono);font-size:12px;}
.vtd > .tag,.vtd > .dbtag,.vtd > .dbperson,.vtd > .dbck,.vtd > .dbimg,.vtd > .vmore,
.vtd > .dblong{vertical-align:middle;line-height:1.35;}
.vtd > .tag{margin-right:4px;}
.vtd > .dbck{vertical-align:-3px;}
/* the title cell's text box */
.vc{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* wrapped: the cell centres a clamp box (.vc) that flows to the density's
   line cap, chips wrap too. 3px of vertical padding, so two lines of long
   text at regular are a 43px row, not a 58px one. */
.vtd.wrap{
  display:flex;align-items:center;white-space:normal;line-height:1.35;
  padding-top:3px;padding-bottom:3px;
}
.vtd.wrap > .vc{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);
  white-space:normal;text-overflow:clip;overflow-wrap:break-word;
}
.vtd.wrap.num,.vtd.wrap.date{justify-content:flex-end;}
.vtd.wrap .tag,.vtd.wrap .dbtag{white-space:normal;margin:1px 4px 1px 0;}
.vtd.wrap .dblong{display:inline;-webkit-line-clamp:unset;overflow:visible;}
/* "+N" behind a cell's chips or thumbs; a tap peeks the whole value */
.vmore{
  flex-shrink:0;font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);
  border:1px solid var(--border-1);border-radius:999px;padding:1px 7px;
  background:none;cursor:pointer;margin-left:2px;vertical-align:middle;
}
.vmore:hover{color:var(--text-1);border-color:var(--border-2);}
/* the frozen group at the left: the selection gutter, the title, a pin */
.vtsel{position:sticky;left:0;z-index:1;padding:0;background:var(--surface-1);}
.vt-t{position:sticky;left:var(--vt-sel);z-index:1;background:var(--surface-1);}
.vtd.vt-t{display:flex;align-items:center;gap:9px;}
.pin{position:sticky;left:calc(var(--vt-sel) + clamp(var(--vt-tmin),var(--vt-title,160px),var(--vt-tmax)));
  z-index:1;background:var(--surface-1);box-shadow:1px 0 0 var(--border-1);}
.vtr:hover .vtsel,.vtr:hover .vt-t,.vtr:hover .pin{
  background:color-mix(in srgb, var(--text-1) 5%, var(--surface-1));}
.vthead .vtsel,.vthead .vt-t,.vthead .pin,
.vtcalc .vtsel,.vtcalc .vt-t,.vtcalc .pin{z-index:3;background:var(--surface-2);}
.vtd.vt-t > svg{width:14px;height:14px;color:var(--text-3);flex-shrink:0;}
.vtd.vt-t .vc{flex:1 1 auto;}
/* the Open affordance on the title cell: a pill on hover, a chip on touch */
.vopen{
  flex-shrink:0;height:22px;padding:0 9px;border-radius:999px;border:1px solid var(--border-2);
  background:var(--surface-2);color:var(--text-2);font-size:11px;cursor:pointer;
  display:none;align-items:center;gap:4px;font-family:var(--font-mono);letter-spacing:.06em;
  text-transform:uppercase;
}
.vopen:hover{color:var(--text-1);border-color:var(--text-3);}
@media (hover:hover){.vtr:hover .vopen{display:inline-flex;}}
@media (pointer:coarse){.vopen{display:inline-flex;height:26px;padding:0 8px;font-size:10px;letter-spacing:.04em;}}
/* the column menu button and the resize grip on a header */
.vth-more{
  flex-shrink:0;width:20px;height:20px;border-radius:6px;border:0;background:none;
  color:var(--text-3);display:none;place-items:center;cursor:pointer;margin-left:auto;padding:0;
}
.vth-more svg{width:12px;height:12px;}
.vth:hover .vth-more{display:grid;}
.vth-more:hover{color:var(--text-1);background:color-mix(in srgb, var(--text-1) 8%, transparent);}
@media (pointer:coarse){.vth-more{display:grid;width:26px;height:26px;}}
.vth-grip{position:absolute;top:0;right:-3px;width:6px;height:100%;cursor:col-resize;z-index:1;}
.vth-grip:hover,.vth-grip[data-on]{background:var(--awol-operations);}
@media (pointer:coarse){.vth-grip{display:none;}}
.vtfill{border-right:0;}
.vtadd{display:flex;align-items:center;justify-content:center;padding:0;border-right:0;}
.vtnew{
  display:flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;
  color:var(--text-3);font-size:13.5px;cursor:pointer;border:0;background:none;
  width:100%;text-align:left;position:sticky;left:0;
}
.vtnew:hover{color:var(--text-1);background:color-mix(in srgb, var(--text-1) 5%, transparent);}
.vtcalc{
  min-height:36px;background:var(--surface-2);
  font-family:var(--font-mono);font-size:11px;color:var(--text-3);
  font-variant-numeric:tabular-nums;border-top:1px solid var(--border-1);
  position:sticky;bottom:0;z-index:2;
}
.vtcalc .vtd{white-space:nowrap;}
/* the cell peek: the whole value of a clipped cell, in a sheet */
.cellpeek{font-size:15px;line-height:1.55;white-space:normal;overflow-wrap:anywhere;
  padding:4px 0 6px;}
.cellpeek .tag,.cellpeek .dbtag{margin:0 6px 6px 0;white-space:normal;}
.cellpeek .dblong{display:block;-webkit-line-clamp:unset;overflow:visible;}
.cellpeek .dbimg{width:72px;height:72px;object-fit:cover;border-radius:10px;margin:0 6px 6px 0;}
.cellpeek-k{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:6px;}
/* the Views sheet's rows: a label, then a segment or a switch at the right */
.vopt{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 0;
  border-top:1px solid var(--border-1);}
.vopt:first-child{border-top:0;}
.vopt > span{flex:1;min-width:0;font-size:14px;}
.vopt > span small{display:block;font-size:12px;color:var(--text-3);}
.vseg{display:inline-flex;border:1px solid var(--border-1);border-radius:9px;overflow:hidden;background:var(--surface-1);}
.vseg button{
  min-width:40px;height:30px;padding:0 10px;border:0;background:none;color:var(--text-2);
  font-size:12.5px;cursor:pointer;border-left:1px solid var(--border-1);
}
.vseg button:first-child{border-left:0;}
.vseg button i{font-style:normal;font-family:var(--font-mono);font-size:13px;}
.vseg button[aria-pressed="true"]{background:var(--surface-3);color:var(--text-1);}
.vsw{
  width:40px;height:24px;border-radius:999px;border:0;padding:0;position:relative;
  background:var(--surface-3);cursor:pointer;flex-shrink:0;
}
.vsw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:999px;
  background:var(--bg-1);transition:left 140ms var(--ease-out);}
.vsw[aria-pressed="true"]{background:var(--awol-marketing);}
.vsw[aria-pressed="true"]::after{left:19px;background:#fff;}
.vorder{display:flex;flex-direction:column;gap:2px;margin-top:8px;}
.vorder-row{display:flex;align-items:center;gap:8px;min-height:36px;font-size:13.5px;}
.vorder-row > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vorder-row button{
  width:28px;height:28px;border-radius:8px;border:1px solid var(--border-1);background:none;
  color:var(--text-2);cursor:pointer;display:grid;place-items:center;padding:0;
}
.vorder-row button:disabled{opacity:.3;cursor:default;}
.vorder-row button svg{width:12px;height:12px;}
.vwidths{display:flex;gap:6px;flex-wrap:wrap;}
/* media in a cell: 28px thumbs, then "+N" */
.vtd .dbimg{width:28px;height:28px;object-fit:cover;border-radius:6px;flex-shrink:0;vertical-align:middle;margin-right:4px;}

/* ---------- 5. ViewBoard ------------------------------------------------------ */
.vboard{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;margin:0 -22px;padding:2px 22px 6px;}
.vboard::-webkit-scrollbar{height:8px;}
.vbcol{
  width:250px;flex-shrink:0;padding:6px;border-radius:16px;
  background:color-mix(in srgb, var(--text-1) 4%, transparent);
  display:flex;flex-direction:column;gap:8px;
}
.vbhead{display:flex;align-items:center;gap:8px;padding:6px 8px 2px;}
.vbhead i{width:8px;height:8px;border-radius:2px;background:var(--sc,var(--awol-insight));font-style:normal;}
.vbhead strong{font-size:13px;font-weight:400;flex:1;min-width:0;
  overflow:hidden;white-space:normal;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
.vbhead em{font-style:normal;font-family:var(--font-mono);font-size:11px;color:var(--text-3);}
.vbcard{
  border-radius:14px;width:100%;
  box-sizing:border-box;border:1px solid var(--border-1);background:var(--surface-1);
  color:var(--text-1);display:block;overflow:hidden;
}
.vbcard:hover{border-color:var(--border-2);}
.vbcard .dbrow{padding:var(--card-pad);border-radius:0;}
.vbcard .dbrow-name{font-size:13.5px;line-height:1.36;flex:1 1 100%;max-width:none;}
.vbcard .dbrow-sub{flex:1 1 100%;white-space:normal;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines,2);}
.vbcard .dbrow-meta{flex:1 1 100%;max-width:100%;flex-wrap:wrap;row-gap:4px;}
.vbcard .dbrow-meta:empty,.vbcard .dbrow-sub:empty{display:none;}
.vbcard strong{display:block;font-size:13.5px;font-weight:400;line-height:1.36;}
.vbfield{display:flex;align-items:center;gap:8px;margin-top:7px;}
.vbfield span{
  width:62px;flex-shrink:0;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);
}

/* ---------- 6. ViewCalendar --------------------------------------------------- */
.vcal{border-radius:14px;overflow:hidden;background:var(--surface-1);border:1px solid var(--border-1);}
.vcalhead{display:flex;align-items:center;gap:10px;padding:14px 16px;}
.vcalhead h3{font-family:var(--font-display);font-weight:400;font-size:15px;margin:0;flex:1;}
.vcalhead button{
  width:26px;height:26px;border-radius:8px;border:0;background:none;
  color:var(--text-2);cursor:pointer;display:grid;place-items:center;
}
.vcalhead button:hover{background:color-mix(in srgb, var(--text-1) 8%, transparent);}
.vcaldow,.vcalweek{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));}
.vcaldow{background:var(--surface-2);}
.vcaldow span{
  padding:7px 0;text-align:center;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);
}
.vcalcell{
  min-height:var(--cal-h);padding:6px;border-top:1px solid var(--border-1);
  border-right:1px solid var(--border-1);display:flex;flex-direction:column;gap:4px;
}
.vcalcell:nth-child(7n){border-right:0;}
.vcalcell[data-out="1"]{opacity:.4;}
.vcalday{
  width:19px;height:19px;border-radius:999px;border:0;background:none;
  font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);cursor:pointer;
  display:grid;place-items:center;
}
.vcalcell[data-today="1"] .vcalday{background:var(--text-1);color:var(--bg-0);}
.vcalpill{
  display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;
  padding:3px 6px;border-radius:6px;border:0;cursor:pointer;text-align:left;
  background:color-mix(in srgb, var(--sc,var(--awol-marketing)) 14%, transparent);
  color:var(--text-1);font-size:11px;
}
.vcalpill i{width:7px;height:7px;border-radius:2px;flex-shrink:0;
  background:var(--sc,var(--awol-marketing));font-style:normal;}
.vcalpill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- 7. ViewGallery ---------------------------------------------------- */
.vgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px;--vg-cover:140px;}
[data-size="s"] .vgal{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));--vg-cover:100px;}
[data-size="l"] .vgal{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));--vg-cover:200px;}
.vgcard{
  border-radius:16px;overflow:hidden;border:1px solid var(--border-1);
  background:var(--surface-1);text-align:left;padding:0;
  color:var(--text-1);display:block;width:100%;min-width:0;
}
.vgcard:hover{border-color:var(--border-2);}
.vgcover{height:var(--vg-cover);background:var(--surface-2);overflow:hidden;
  border-bottom:1px solid var(--border-1);}
.vgcover img{width:100%;height:100%;object-fit:cover;display:block;}
/* the page miniature: the excerpt set at 9px inside a 4:5 page-shaped frame */
.vgmini{display:flex;align-items:flex-start;justify-content:center;padding:12px 12px 0;}
.vgpage{
  width:min(72%,calc(var(--vg-cover) * .64));aspect-ratio:4 / 5;overflow:hidden;
  background:var(--bg-1);border:1px solid var(--border-1);border-radius:4px 4px 0 0;
  padding:8px 8px 0;box-sizing:border-box;font-size:9px;line-height:1.35;color:var(--text-2);
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.vgcard .dbrow{padding:var(--card-pad);border-radius:0;cursor:pointer;}
.vgcard .dbrow-name{font-size:13.5px;line-height:1.35;flex:1 1 100%;max-width:none;}
.vgcard .dbrow-sub{flex:1 1 100%;white-space:normal;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines,2);}
.vgcard .dbrow-meta{flex:1 1 100%;max-width:100%;flex-wrap:wrap;row-gap:4px;}
.vgcard .dbrow-meta:empty,.vgcard .dbrow-sub:empty{display:none;}
.vgbody{padding:var(--card-pad);}
.vgbody strong{display:block;font-size:13.5px;font-weight:400;line-height:1.35;}
.vgfield{display:flex;align-items:center;gap:8px;margin-top:7px;}
.vgfield span{
  width:58px;flex-shrink:0;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);
}
.vggroup{display:flex;align-items:center;gap:8px;margin:18px 0 10px;
  grid-column:1 / -1;}
.vggroup i{width:8px;height:8px;border-radius:2px;background:var(--sc,var(--awol-insight));font-style:normal;}
.vggroup strong{font-size:13px;font-weight:400;}
.vggroup em{font-style:normal;font-family:var(--font-mono);font-size:11px;color:var(--text-3);}
.vggroup hr{flex:1;border:0;border-top:1px solid var(--border-1);}

/* ---------- 7b. row cards in the views: the wrapper, expansion, groups ------
   .rcw holds the expand chevron beside one App.rowCard. On a coarse pointer
   the card body's first tap expands (44-views2.js swaps the act), so the
   chevron is a mouse affordance; it shows on touch only once open, to
   collapse. */
.rcw{display:flex;align-items:flex-start;gap:0;position:relative;}
.rcw > .rc,.rcw > .dbrow{flex:1;min-width:0;}
.rc-tog{
  flex-shrink:0;width:24px;height:36px;margin-top:calc(var(--cell-pad) - 6px);
  border:0;background:none;color:var(--text-3);cursor:pointer;
  display:grid;place-items:center;padding:0;border-radius:8px;
}
.rc-tog svg{transition:transform 140ms var(--ease-out);transform:rotate(-90deg);}
.rc-tog[aria-expanded="true"] svg,.rc-tog.on svg{transform:none;}
.rc-tog:hover{color:var(--text-1);background:color-mix(in srgb, var(--text-1) 8%, transparent);}
@media (hover:none){.rcw:not(.open) > .rc-tog{display:none;}}
.rcw.open > .rc,.rcw.open > .dbrow{background:color-mix(in srgb, var(--text-1) 4%, transparent);}
/* the expansion shows the whole excerpt and every property, editable */
.rc[data-open] .dbrow-sub,.rc[data-open] .rc-props{display:none;}

/* the expansion body: excerpt, tickable lines, editable properties, Open */
.rx{padding:6px 0 2px;font-size:14px;line-height:1.5;cursor:default;}
.rx-ex{margin:0 0 8px;color:var(--text-2);white-space:pre-wrap;overflow-wrap:anywhere;}
.rx-tasks{display:flex;flex-direction:column;}
.rx-task{display:flex;align-items:flex-start;gap:10px;min-height:36px;padding:6px 0;}
.rx-task .mdck{margin-top:2px;}
.rx-task span{flex:1;min-width:0;overflow-wrap:anywhere;}
.rx-task span.done{text-decoration:line-through;color:var(--text-3);}
@media (pointer:coarse){.rx-task{min-height:44px;}}
.rx-props{margin-top:6px;border-top:1px solid var(--border-1);padding-top:4px;}
.rx-props .vrow{
  display:grid;grid-template-columns:20px 92px minmax(0,1fr);gap:12px;align-items:center;
  min-height:36px;padding:4px 0;cursor:pointer;border-radius:8px;
}
@media (pointer:coarse){.rx-props .vrow{min-height:44px;}}
.rx-props .vrow:hover{background:color-mix(in srgb, var(--text-1) 5%, transparent);}
.rx-props .vrow .tile{color:var(--text-3);display:grid;place-items:center;}
.rx-props .vrow .rm{font-size:13px;color:var(--text-3);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.rx-props .vrow .val{font-size:13.5px;min-width:0;overflow-wrap:anywhere;white-space:normal;}
.rx-props .vrow .val .tag,.rx-props .vrow .val .dbtag{white-space:normal;margin:1px 4px 1px 0;}
.rx-props .vrow .val .dblong{display:block;-webkit-line-clamp:unset;overflow:visible;}
.rx-props .vrow .val[data-editing] input,.rx-props .vrow .val[data-editing] textarea,
.rx-props .vrow .val[data-editing] select{
  width:100%;box-sizing:border-box;padding:6px 10px;border-radius:8px;
  border:1px solid var(--border-focus);background:var(--surface-2);color:var(--text-1);font-size:14px;
}
.rx-foot{display:flex;align-items:center;gap:8px;margin-top:8px;}
.rx-foot .vopen{display:inline-flex;}
.rx-foot .rc-tog{margin:0 0 0 auto;height:28px;}
@media (max-width:767px){.rx-props .vrow{grid-template-columns:20px 78px minmax(0,1fr);}}

/* the row card's own label: value lines (L.card.lines; on the phone table,
   every visible column). Labels wrap to two lines, values wrap whole. */
.rc-props{margin:2px 0 0;display:flex;flex-direction:column;gap:4px;}
.rc-prop{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;align-items:baseline;font-size:13px;}
.rc-prop dt{
  color:var(--text-3);font-size:12px;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.rc-prop dd{margin:0;min-width:0;overflow-wrap:anywhere;white-space:normal;}
.rc-prop dd .tag,.rc-prop dd .dbtag{white-space:normal;margin:1px 4px 1px 0;}
.rc-prop dd .dblong{display:block;-webkit-line-clamp:unset;overflow:visible;}
.rc-prop dd .dbimg{width:28px;height:28px;object-fit:cover;border-radius:6px;vertical-align:middle;margin-right:4px;}
@media (max-width:767px){.rc-prop{grid-template-columns:78px minmax(0,1fr);}}

/* the phone's cards: one row card per row, 100% wide, a 12px gap; nothing
   truncates -- the title wraps, the values wrap */
.vcards{display:flex;flex-direction:column;gap:12px;}
.vcards .rcw{gap:0;}
.vcards .rcw > .dbrow,.vcards .rcw > .rc{
  background:var(--surface-1);border:1px solid var(--border-1);border-radius:14px;
  padding:12px 14px;
}
.vcards .rcw.open > .dbrow{background:var(--surface-1);border-color:var(--border-2);}
.vcards .rc-tog{display:none;}
.vcards .rx-foot .rc-tog{display:grid;}
.vcards .dbrow-name{font-size:15.5px;flex:1 1 100%;max-width:none;}
.vcards .dbrow-sub{flex:1 1 100%;white-space:normal;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines,2);}
.vcards .dbrow-meta{flex:1 1 100%;max-width:100%;flex-wrap:wrap;row-gap:4px;}
.vcards .vnewrow{border-radius:14px;}

.vcards .dbrow-meta .tag,.vbcard .dbrow-meta .tag,.vgcard .dbrow-meta .tag{margin-right:0;}
/* titles in cards never ellipsise: two lines, then a clamp */
.vcards .dbrow-name,.vbcard .dbrow-name,.vgcard .dbrow-name,.vday .dbrow-name,
.vcards .rc-title,.vbcard .rc-title,.vgcard .rc-title,.vday .rc-title{
  white-space:normal;text-overflow:clip;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}

/* group headers: an 8px rounded-square swatch, the name, a mono count, a
   chevron. A card head in the list; sticky under the head in the table. */
.vgroups{display:flex;flex-direction:column;gap:12px;}
.vgrp{min-width:0;}
.vgrp-hd{
  display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;
  min-height:40px;padding:0 12px;border:0;background:none;color:var(--text-1);
  text-align:left;cursor:pointer;border-radius:12px;
}
.vgrp-hd i{width:8px;height:8px;border-radius:2px;flex-shrink:0;font-style:normal;
  background:var(--sc,var(--text-3));}
.vgrp-hd strong{font-size:14.5px;font-weight:500;min-width:0;white-space:normal;overflow-wrap:anywhere;}
.vgrp-hd em{font-style:normal;font-family:var(--font-mono);font-size:11px;color:var(--text-3);}
.vgrp-hd svg{margin-left:auto;color:var(--text-3);flex-shrink:0;transition:transform 140ms var(--ease-out);
  transform:rotate(-90deg);}
.vgrp-hd[aria-expanded="true"] svg{transform:none;}
.vgrp-hd:hover{background:color-mix(in srgb, var(--text-1) 5%, transparent);}
@media (pointer:coarse){.vgrp-hd{min-height:44px;}}
.vgrp-card{padding:0 6px;}
.vgrp .vlist{margin-top:4px;}
.vcards .vgrp{display:flex;flex-direction:column;gap:12px;}
.vcards .vgrp-hd{min-height:36px;padding:0 4px;}
/* in the table the header is a block child of the max-content .vt: sticky
   under the head, its content sticky at the scroller's left */
.vtgrp{position:sticky;top:var(--vt-head-h,36px);z-index:2;background:var(--surface-2);
  border-bottom:1px solid var(--border-1);}
.vtgrp-in{position:sticky;left:0;width:min(100%,var(--vt-w,calc(100vw - 32px)));}
.vtgrp .vgrp-hd{border-radius:0;min-height:36px;}
.vtgrp.collapsed{border-bottom-width:1px;}

/* the expansion under a table row: as wide as the scroller, frozen at its
   left while the columns scroll behind it */
.vtx{border-bottom:1px solid var(--border-1);background:var(--surface-1);}
.vtx-in{position:sticky;left:0;width:min(100%,var(--vt-w,calc(100vw - 32px)));
  box-sizing:border-box;padding:6px 16px 10px 40px;}
.vtr.open{background:color-mix(in srgb, var(--text-1) 4%, transparent);}
.vtr.open .vtsel,.vtr.open .vt-t,.vtr.open .pin{background:color-mix(in srgb, var(--text-1) 4%, var(--surface-1));}
@media (max-width:767px){.vtx-in{padding:6px 16px 10px 16px;}}
/* the expand chevron leading the title cell */
.vtog{
  flex-shrink:0;width:18px;height:22px;border:0;background:none;padding:0;
  color:var(--text-3);cursor:pointer;display:grid;place-items:center;border-radius:5px;margin-left:-4px;
}
.vtog svg{width:12px;height:12px;transition:transform 140ms var(--ease-out);transform:rotate(-90deg);}
.vtog[aria-expanded="true"] svg{transform:none;}
.vtog:hover{color:var(--text-1);background:color-mix(in srgb, var(--text-1) 8%, transparent);}
@media (pointer:coarse){.vtog{width:26px;height:26px;}}

/* the Views sheet's chip rows */
.vopt-col{flex-direction:column;align-items:stretch;gap:8px;padding:10px 0;}
.vopt-col .ochips{padding-bottom:2px;}

/* the agenda: the phone's calendar */
.vagenda{display:flex;flex-direction:column;gap:6px;}
.vagenda .vcalhead{padding:6px 2px 10px;}
.vday{display:flex;flex-direction:column;gap:6px;padding:6px 0 10px;}
.vday h4{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:0;line-height:1.2;}
.vday.empty{flex-direction:row;align-items:center;gap:12px;padding:4px 0;}
.vday.empty h4{font-size:15px;font-weight:500;color:var(--text-3);flex:1;}
/* the two relative labels stay 20px bold even with nothing on them (5.8) */
.vday.empty.today h4,.vday.empty.tomorrow h4{font-size:20px;font-weight:600;}
.vday.past.empty h4{opacity:.6;}
.vday.today h4{color:var(--text-1);}
.vday-new{
  width:34px;height:34px;border-radius:999px;border:1.5px dotted var(--border-2);
  background:none;color:var(--text-3);cursor:pointer;display:grid;place-items:center;padding:0;flex-shrink:0;
}
.vday-new:hover{color:var(--text-1);border-color:var(--text-3);}
@media (pointer:coarse){.vday-new{width:44px;height:44px;}}
.vday .vlist{padding:4px;}
.vcalmore{border:0;background:none;text-align:left;padding:0 6px;cursor:pointer;color:var(--text-3);}
.vcalmore:hover{color:var(--text-1);}

/* ---------- 8. footer --------------------------------------------------------- */
.db-foot{
  display:flex;align-items:center;gap:12px;margin-top:14px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);
}
.db-foot em{font-style:normal;margin-left:auto;}
.db-foot .vpage{
  height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--border-1);
  background:none;color:var(--text-2);font:inherit;letter-spacing:.06em;cursor:pointer;
}
.db-foot .vpage:hover{color:var(--text-1);border-color:var(--border-2);}
.db-foot .vpage:disabled{opacity:.5;cursor:default;}

.db-empty{padding:40px 0;text-align:center;color:var(--text-3);font-size:14px;}

/* ---------- 9. peek pane: moved to 9-page.css (47-page.js paints it) --------- */

/* ---------- responsive -------------------------------------------------------- */
@media (max-width:767px){
  .db-title h1,.db-title input.dbht{font-size:26px;}
  .db-icon{width:36px;height:36px;}
  /* the filter bar: switcher, search, filter, New -- sort lives on the column
     headers, and the New chevron's menu is behind the dock's + */
  .vfb-end{flex:1;min-width:0;}
  .vsearch{flex:1 1 60px;}
  .vnew-more,.vtool[data-act="v2-sort"]{display:none;}
  /* the table runs edge to edge and scrolls sideways under a sticky first
     column, the way Notion's phone tables do */
  .vtwrap{margin:0 -16px;border-radius:0;border-left:0;border-right:0;}
  /* the selection gutter collapses to a 0px track (display:none would take
     its grid slot with it); the title column caps at 52vw and stays sticky */
  :root{--vt-sel:0px;--vt-tmin:48vw;--vt-tmax:52vw;}
  .vtsel{padding:0;border-right:0;overflow:hidden;}
  .vt-t{box-shadow:1px 0 0 var(--border-1);}
  /* titles never ellipsise on a phone: the title cell wraps to two lines */
  .vtd.vt-t .vc{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:2;text-overflow:clip;line-height:1.3;overflow-wrap:break-word;}
  .dbrow-name{max-width:none;white-space:normal;flex:1 1 40%;}
  /* one column per screen, snapped (Jira / Asana / Notion iOS); the 16px of
     inert padding at the left belongs to the system's back-swipe */
  .vboard{margin:0 -16px;padding:2px 16px 6px;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;scroll-padding-left:16px;touch-action:pan-x pan-y;}
  .vbcol{flex:0 0 86vw;width:86vw;scroll-snap-align:start;}
  .vcalcell{min-height:calc(var(--cal-h) * .64);padding:4px;}
  /* s and m are 2-up, l is the one-column feed */
  .vgal,[data-size="s"] .vgal{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  [data-size="l"] .vgal{grid-template-columns:minmax(0,1fr);}
  .vfb-tabs{display:none;}          /* replaced by the switcher pill */
  /* the phone table's header: 13px plain labels that wrap (5.4) */
  .vth{font-family:inherit;font-size:13px;letter-spacing:0;text-transform:none;color:var(--text-2);}
  .vthead{min-height:40px;}
}
.vswitch{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  height:30px;padding:0 11px;border-radius:9px;
  border:0;background:var(--surface-2);color:var(--text-1);font-size:13px;cursor:pointer;
}
.vswitch i{font-style:normal;font-family:var(--font-mono);font-size:12px;}
/* the compact switcher replaces the tab strip below 768 */
@media (min-width:768px){
  .vswitch{display:none;}
}

/* Coarse pointers need real hit targets (6.4): 44px on every acting control
   of the folder head and the filter bar. The visual stays the 30px pill: a
   transparent border grows the box and background-clip keeps the paint off
   it (the .ochip idiom in 8-overlays.css). */
@media (pointer:coarse){
  .vtool,.vfb-add{width:44px;height:44px;}
  .db-dots{width:44px;height:44px;}
  .db-icon{width:44px;height:44px;border:1px solid transparent;background-clip:padding-box;}
  .vswitch,.vsearch{height:44px;box-sizing:border-box;
    border-top:7px solid transparent;border-bottom:7px solid transparent;background-clip:padding-box;}
  .vsearch{border-left-color:var(--border-1);border-right-color:var(--border-1);
    box-shadow:inset 0 1px 0 var(--border-1),inset 0 -1px 0 var(--border-1);}
  /* the New split button: the hit box lives on the two BUTTONS (they act),
     each painted 30px tall inside a 44px box */
  .vnew{height:44px;background:none;overflow:visible;border-radius:0;}
  .vnew button{height:44px;box-sizing:border-box;border-top:7px solid transparent;border-bottom:7px solid transparent;
    background:var(--awol-marketing);background-clip:padding-box;}
  .vnew .vnew-main{border-radius:9px 0 0 9px;}
  .vnew .vnew-more{border-radius:0 9px 9px 0;}
  /* the New rows, the phone table's header cells (they open the column
     menu), the month arrows, the expansion footer's Open pill and chevron,
     and the paging pill: 44px boxes, the pills still painted at 26px */
  .vnewrow,.vtnew,.vth{min-height:44px;}
  .vcalhead button{width:44px;height:44px;}
  .rx-foot .rc-tog{width:44px;height:44px;}
  .rx-foot .vopen,.db-foot .vpage{height:44px;box-sizing:border-box;border:9px solid transparent;background-clip:padding-box;
    box-shadow:inset 0 0 0 1px var(--border-1);}
  .rx-foot .vopen{box-shadow:inset 0 0 0 1px var(--border-2);}
}

/* ---------- 10. the note page moved to 9-page.css --------------------------- */

/* The marketing chip classes App.dbRender still emits (.tag / .tag.ghost /
   .dbl). 3-cards.css owns them for index.html and v2 does not load it, so
   without these a multiselect cell rendered as run-together text. */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:999px;font-size:11.5px;white-space:nowrap;
  background:color-mix(in srgb, var(--text-1) 10%, transparent);
  color:var(--text-2);margin-right:6px;
}
.tag.ghost{background:none;border:1px solid var(--border-1);}
.tag.plain{border:0;background:none;padding-left:0;}
.tag[data-fn]:not([data-fn=""]){
  background:color-mix(in srgb, var(--c,var(--text-1)) 16%, transparent);
  color:var(--fn-text-marketing);border-color:transparent;
}
.tag.dead{opacity:.5;text-decoration:line-through;}
.val .tag:last-child{margin-right:0;}

/* An open cell hands its whole box to the editor. */
.vtd[data-editing]{padding:0;line-height:1.4;display:block;}
.vtd[data-editing] input,.vtd[data-editing] textarea,.vtd[data-editing] select{
  width:100%;height:100%;min-height:calc(var(--row-h) - 2px);box-sizing:border-box;
  padding:0 var(--cell-pad);border:0;background:var(--surface-2);
  color:var(--text-1);font-size:13.5px;
  outline:2px solid var(--awol-operations);outline-offset:-2px;
}
.vth[data-act]{cursor:pointer;}
.vth[data-act]:hover{color:var(--text-1);}

/* ---------- 11. iOS: no input under 16px, stated last on purpose ------------
   Safari zooms the page when a focused field computes under 16px (6.3).
   These live at the END of the file because the cell editor's 13.5px and
   the expansion editor's 14px rules above share their specificity, and the
   later rule wins the cascade: an earlier phone block lost to them. */
@media (max-width:767px){
  .vsearch input,
  .vtd[data-editing] input,.vtd[data-editing] textarea,.vtd[data-editing] select,
  .rx-props .vrow .val[data-editing] input,.rx-props .vrow .val[data-editing] textarea,
  .rx-props .vrow .val[data-editing] select{font-size:16px;}
}