/* 1.32 petrol: one calm look for every page. One accent (petrol), grey line icons on pale tiles, white cards on a cool
   light page; colour only for status (green done, amber due). The menu sits along the left edge with its group names;
   the open page is a pale petrol pill with a bar at the edge. Light and Dark looks only (Developer keeps looks.css).
   Loaded after soft.css, so it wins over modern.css and soft.css. Fonts stay the app's own. */

:root:not([data-skin]){
  --bg:#F3F6F7; --surface:#FFFFFF; --surface-2:#ECF1F2; --s3:#E1E8EA; --line:#E1E8EA; --fg:#1C1C1E; --muted:#5B6B70; --faint:#8A979B;
  --accent:#0E5E6F; --accent-fg:#FFFFFF; --accent-soft:#E3EEF0; --sky:#0E5E6F; --accent-rgb:14,94,111; --accent-dk:#0B4B59;
  --ok:#2E6E47; --ok-soft:#E2EFE6; --warn:#9A5A10; --warn-soft:#F8EBD8; --info:#0E5E6F; --info-soft:#E3EEF0;
  --pt-tile:#ECF1F2; --pt-ico:#4A5A5F; --pt-chip:rgba(74,90,95,.09); --pt-amber:#C98A2E;
  --shadow:0 0 0 1px rgba(20,40,45,.035),0 1px 2px rgba(20,40,45,.06),0 10px 28px rgba(20,40,45,.08);
  --shadow-hi:0 0 0 1px rgba(14,94,111,.14),0 2px 4px rgba(20,40,45,.06),0 18px 38px rgba(20,40,45,.13);
  --today-slab:#0E5E6F; --today-ink:#FFFFFF;
  --sf-a:#FFFFFF; --sf-b:#FFFFFF; --sf-edge:#E1E8EA; --sf-ink:#2B2D31; --sf-mute:#8A979B; --sf-pill:#E9EEF0; --sf-pill-fg:#4A5A5F;
  --sf-on:rgba(14,94,111,.09); --sf-on-sh:none; --sf-line:#E1E8EA; --sf-sep:#E1E8EA; --sf-shadow:none; --sf-hover:#F6F8F9; --sf-hov:rgba(74,90,95,.07); --sf-dot:#0E5E6F;
  --sf-icon:#7A888C; --sf-grp:#9AA6AA;
}
@media (prefers-color-scheme:dark){:root:not([data-skin]):not([data-theme="light"]){
  --bg:#0F1719; --surface:#172124; --surface-2:#1E2A2E; --s3:#26353A; --line:#26353A; --fg:#E6EEF0; --muted:#A2B2B6; --faint:#7E9095;
  --accent:#5FB3C4; --accent-fg:#0C1416; --accent-soft:#16343B; --sky:#5FB3C4; --accent-rgb:95,179,196; --accent-dk:#7FC4D2;
  --ok:#8FCBA2; --ok-soft:#173025; --warn:#EDC07A; --warn-soft:#3A2B13; --info:#5FB3C4; --info-soft:#16343B;
  --pt-tile:#1E2A2E; --pt-ico:#B5C3C7; --pt-chip:rgba(181,195,199,.1); --pt-amber:#D9A04A;
  --shadow:0 0 0 1px rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.3);
  --shadow-hi:0 0 0 1px rgba(95,179,196,.25),0 2px 4px rgba(0,0,0,.35),0 18px 38px rgba(0,0,0,.4);
  --today-slab:#5FB3C4; --today-ink:#0C1416;
  --sf-a:#131D20; --sf-b:#131D20; --sf-edge:#22302F; --sf-ink:#E6EEF0; --sf-mute:#8C9DA1; --sf-pill:#26353A; --sf-pill-fg:#C9D6D9;
  --sf-on:rgba(95,179,196,.14); --sf-on-sh:none; --sf-line:#26353A; --sf-sep:#22302F; --sf-shadow:none; --sf-hover:#182326; --sf-hov:rgba(255,255,255,.06); --sf-dot:#5FB3C4;
  --sf-icon:#8C9DA1; --sf-grp:#6F8185}}
:root[data-theme="dark"]:not([data-skin]){
  --bg:#0F1719; --surface:#172124; --surface-2:#1E2A2E; --s3:#26353A; --line:#26353A; --fg:#E6EEF0; --muted:#A2B2B6; --faint:#7E9095;
  --accent:#5FB3C4; --accent-fg:#0C1416; --accent-soft:#16343B; --sky:#5FB3C4; --accent-rgb:95,179,196; --accent-dk:#7FC4D2;
  --ok:#8FCBA2; --ok-soft:#173025; --warn:#EDC07A; --warn-soft:#3A2B13; --info:#5FB3C4; --info-soft:#16343B;
  --pt-tile:#1E2A2E; --pt-ico:#B5C3C7; --pt-chip:rgba(181,195,199,.1); --pt-amber:#D9A04A;
  --shadow:0 0 0 1px rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.3);
  --shadow-hi:0 0 0 1px rgba(95,179,196,.25),0 2px 4px rgba(0,0,0,.35),0 18px 38px rgba(0,0,0,.4);
  --today-slab:#5FB3C4; --today-ink:#0C1416;
  --sf-a:#131D20; --sf-b:#131D20; --sf-edge:#22302F; --sf-ink:#E6EEF0; --sf-mute:#8C9DA1; --sf-pill:#26353A; --sf-pill-fg:#C9D6D9;
  --sf-on:rgba(95,179,196,.14); --sf-on-sh:none; --sf-line:#26353A; --sf-sep:#22302F; --sf-shadow:none; --sf-hover:#182326; --sf-hov:rgba(255,255,255,.06); --sf-dot:#5FB3C4;
  --sf-icon:#8C9DA1; --sf-grp:#6F8185}

/* ================================================================ the menu along the left edge */
html:not([data-skin]) .rail .navgroup .label,html:not([data-skin]) .rail .navgroup .label.grp{display:block!important;width:100%;margin:0;padding:16px 12px 5px;border:0;background:none;
  font-size:10.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--sf-grp);text-align:left;cursor:default;pointer-events:none}
html:not([data-skin]) .rail .navgroup .label svg,html:not([data-skin]) .rail .navgroup .label.grp::after{display:none}
html:not([data-skin]) .rail .navgroup + .navgroup::before{display:none}
html:not([data-skin]) .rail .navgroup:first-child .label{padding-top:8px}
html:not([data-skin]) .rail .nav{gap:1px}
html:not([data-skin]) .rail .nav a,html:not([data-skin]) .rail .nav .sect-row a,html:not([data-skin]) .rail .nav .sect-tg{
  position:relative;gap:12px;min-height:38px;padding:0 12px;border-radius:10px;font-size:.95rem;font-weight:500;color:var(--sf-ink)}
html:not([data-skin]) .rail .nav a svg,html:not([data-skin]) .rail .nav .sect-tg svg{width:19px;height:19px;color:var(--sf-icon);stroke-width:1.6}
html:not([data-skin]) .rail .nav a:hover svg{color:var(--sf-ink)}
/* the page you are on: a pale petrol pill, petrol text and icon, a bar at the menu's edge */
html:not([data-skin]) .rail .nav a[aria-current="true"],html:not([data-skin]) .rail .nav a[aria-current="page"],
html:not([data-skin]) .rail .nav .navsub a[aria-current="true"],html:not([data-skin]) .rail .nav .navsub a[aria-current="page"],html:not([data-skin]) .rail .nav .navsub a[aria-pressed="true"]{
  background:var(--sf-on)!important;box-shadow:none!important;color:var(--accent)!important;font-weight:650}
html:not([data-skin]) .rail .nav a[aria-current="true"] svg,html:not([data-skin]) .rail .nav a[aria-current="page"] svg{color:var(--accent)}
html:not([data-skin]) .rail .nav .count:not([hidden]){min-width:20px;height:20px;padding:0 6px;font-size:.72rem;background:var(--sf-pill);color:var(--sf-pill-fg)}
/* a section: no dark pill any more; open, its name is petrol and its pages hang indented under it */
html:not([data-skin]) .rail .sect-row{border-radius:10px}
html:not([data-skin]) .rail .sect-row a{padding-right:44px}
html:not([data-skin]) .rail .sect-row .chev,html:not([data-skin]) .rail .sect-tg .chev{width:30px;height:30px;right:4px;color:var(--sf-icon)}
html:not([data-skin]) .rail .sect .chev::before,html:not([data-skin]) .rail .sect .chev::after{width:11px}
html:not([data-skin]) .rail .sect.open > .sect-row{background:none;box-shadow:none;margin:0}
html:not([data-skin]) .rail .sect.open > .sect-row a,html:not([data-skin]) .rail .sect.open > .sect-row .sect-tg,html:not([data-skin]) .rail .sect.open > .sect-row .chev{color:var(--sf-ink)!important}
html:not([data-skin]) .rail .sect.open > .sect-row .chev:hover{background:var(--sf-hov)!important}
html:not([data-skin]) .rail .sect.current > .sect-row{background:var(--sf-on);box-shadow:none}
html:not([data-skin]) .rail .sect.current > .sect-row a,html:not([data-skin]) .rail .sect.current > .sect-row .sect-tg{color:var(--accent)!important;font-weight:650}
html:not([data-skin]) .rail .sect.current > .sect-row svg{color:var(--accent)}
html:not([data-skin]) .rail .sect.current > .sect-row .chev{color:var(--accent)!important}
html:not([data-skin]) .rail .sect.current:has(.navsub a:is([aria-current="true"],[aria-current="page"],[aria-pressed="true"])) > .sect-row{background:none}
html:not([data-skin]) .rail .sect.current:has(.navsub a:is([aria-current="true"],[aria-current="page"],[aria-pressed="true"])) > .sect-row a{font-weight:650}
html:not([data-skin]) .rail .nav .navsub{margin:2px 0 6px 0;padding:0;gap:1px}
html:not([data-skin]) .rail .nav .navsub::before,html:not([data-skin]) .rail .nav .navsub::after{display:none}
html:not([data-skin]) .rail .nav .navsub a{min-height:34px;margin-left:0;padding:0 12px 0 43px;border-radius:10px;font-size:.9rem;font-weight:450;color:var(--sf-ink);gap:10px}
html:not([data-skin]) .rail .nav .navsub a svg.si{display:none}
html:not([data-skin]) .rail .nav .navsub a.sub2{padding-left:58px;font-size:.86rem}
html:not([data-skin]) .rail .bookbox{margin:2px 0 6px 31px}
html:not([data-skin]) .rail .bookpick,html:not([data-skin]) .rail .booklist{border-radius:12px}
html:not([data-skin]) .rail .brand .mark,html:not([data-skin]) .banner .bn-brand .mark{background:var(--accent);color:var(--accent-fg)}
/* the edge bar of the page you are on (desktop only: on a phone the menu is a sheet) */
@media (min-width:821px){
  html:not([data-skin]){--rw:272px}
  html:not([data-skin]):has(.app.collapsed){--rw:84px}
  html:not([data-skin]) .app .rail{top:0;left:0;bottom:0;width:var(--rw);height:100dvh;border-radius:0;background:var(--sf-a);border:0;border-right:1px solid var(--sf-edge);box-shadow:none}
  html:not([data-skin]) .rail .brand{padding:20px 20px 10px;border-bottom:0;font-size:1.12rem;letter-spacing:-.015em}
  html:not([data-skin]) .rail .brand .mark{width:36px;height:36px;border-radius:10px}
  html:not([data-skin]) .rail .brand .mark svg{width:20px;height:20px}
  html:not([data-skin]) .rail .navs{padding:0 12px 10px}
  html:not([data-skin]) .rail .me{padding:12px 16px 14px;border-top:1px solid var(--sf-sep)}
  html:not([data-skin]) .rail .railtoggle{top:34px;right:-14px;width:28px;height:28px;transform:none;background:var(--sf-a);border:1px solid var(--sf-edge);color:var(--sf-icon);box-shadow:0 2px 6px rgba(20,40,45,.08)}
  html:not([data-skin]) .rail .railtoggle svg{width:13px;height:13px}
  html:not([data-skin]) .rail .nav a[aria-current="true"]::before,html:not([data-skin]) .rail .nav a[aria-current="page"]::before,
  html:not([data-skin]) .rail .sect.current:not(:has(.navsub a:is([aria-current="true"],[aria-current="page"],[aria-pressed="true"]))) > .sect-row::before,
  html:not([data-skin]) .rail .nav .navsub a[aria-pressed="true"]::before{
    content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
  html:not([data-skin]) .rail .sect.current > .sect-row a::before{display:none}
  html:not([data-skin]) .rail .sect-row{position:relative}
  /* folded: icons only, group names hidden */
  html:not([data-skin]) .app.collapsed .rail .navgroup .label{display:none!important}
  html:not([data-skin]) .app.collapsed .rail .brand{padding:20px 0 12px}
  html:not([data-skin]) .app.collapsed .rail .nav a,html:not([data-skin]) .app.collapsed .rail .nav .sect-row a,html:not([data-skin]) .app.collapsed .rail .nav .sect-tg{
    flex:none;width:44px;height:44px;min-height:44px;margin:0 auto;padding:0;border-radius:12px}
  html:not([data-skin]) .app.collapsed .rail .sect-row::before{display:none}
  html:not([data-skin]) .app.collapsed .rail .sect.current::after{display:none}
  html:not([data-skin]) .app.collapsed .rail .sect.current > .sect-row a,html:not([data-skin]) .app.collapsed .rail .sect.current > .sect-row .sect-tg{background:var(--sf-on)!important;box-shadow:none!important}
  html:not([data-skin]) .app.collapsed .rail .navgroup + .navgroup{padding-top:6px}
  html:not([data-skin]) .app.collapsed .rail .nav a .count:not(:empty){box-shadow:0 0 0 2px var(--sf-a)}
}
@media (max-width:820px){
  html:not([data-skin]) body.menu-open .app .rail{inset:0;border-radius:0;border:0;background:var(--sf-a);box-shadow:none}
  html:not([data-skin]) body.menu-open .app .rail .brand{border-bottom:0;margin-bottom:0}
  html:not([data-skin]) body.menu-open .app .rail .nav a{padding:0 14px;min-height:44px}
  html:not([data-skin]) body.menu-open .app .rail .navsub a{padding:0 14px 0 45px;min-height:40px}
  html:not([data-skin]) body.menu-open .rail .menubtn{background:var(--pt-chip);box-shadow:none}
}

/* ================================================================ buttons, chips, cards */
html:not([data-skin]) .btn{border-radius:999px;font-weight:600}
html:not([data-skin]) .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);box-shadow:0 4px 14px rgba(var(--accent-rgb),.25)}
html:not([data-skin]) .btn.primary:hover{background:var(--accent-dk);border-color:var(--accent-dk);filter:none;opacity:1}
html:not([data-skin]) .btn:not(.primary):not(.danger):not(.ghost){background:var(--pt-chip);border-color:transparent;color:var(--accent)}
html:not([data-skin]) .btn:not(.primary):not(.danger):not(.ghost):hover{background:rgba(var(--accent-rgb),.12);color:var(--accent)}
html:not([data-skin]) .btn:not(.primary):not(.danger) svg{color:currentColor}
html:not([data-skin]) .head .actions .btn:not(.primary):not(.danger){background:var(--pt-chip);border-color:transparent;color:var(--accent)}
html:not([data-skin]) .head .actions .btn:not(.primary):not(.danger):hover{background:rgba(var(--accent-rgb),.12);color:var(--accent)}
html:not([data-skin]) .chip{background:var(--pt-chip);border-color:transparent;color:var(--pt-ico)}
html:not([data-skin]) .chip:hover{border-color:transparent;background:rgba(var(--accent-rgb),.12);color:var(--accent)}
html:not([data-skin]) .hchip{background:var(--pt-chip);border-color:transparent;color:var(--pt-ico);font-weight:550}
html:not([data-skin]) .hchip.ok{background:rgba(60,138,90,.13);color:var(--ok)}
html:not([data-skin]) .hchip.warn{background:rgba(205,130,30,.15);color:var(--warn)}
html:not([data-skin]) a{accent-color:var(--accent)}
html:not([data-skin]) .card{border-radius:20px}
html:not([data-skin]) input:focus-visible,html:not([data-skin]) select:focus-visible,html:not([data-skin]) textarea:focus-visible{outline-color:var(--accent)}

/* ================================================================ the head of a page: a white card with its picture */
html:not([data-skin]) #view .head:has(> .who){align-items:center;padding:20px 22px;margin-bottom:6px;background:var(--surface);border-radius:22px;box-shadow:var(--shadow)}
html:not([data-skin]) #view .head .who{gap:18px}
html:not([data-skin]) #view .head .who h1{font-size:clamp(1.45rem,2.6vw,1.85rem)}
html:not([data-skin]) #view .head .who > .av.tav,html:not([data-skin]) #view .head .who > .pwrap > .av.tav,html:not([data-skin]) #view .head .who > .av.catpic{
  width:64px;height:64px;border-radius:18px;box-shadow:0 6px 16px color-mix(in srgb,var(--kc,#4A5766) 30%,transparent)}
html:not([data-skin]) #view .head .crumbs a,html:not([data-skin]) .crumbs a{color:var(--muted)}
html:not([data-skin]) .crumbs a:hover{color:var(--accent)}

/* ================================================================ tiles: one look, grey icons on pale squares */
html:not([data-skin]) .hubcard{border-radius:18px;box-shadow:var(--shadow);border:0;transition:transform .15s,box-shadow .15s}
html:not([data-skin]) .hubcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-hi)}
html:not([data-skin]) .hubcard .hc-main{padding:16px 18px;min-height:84px;gap:2px 14px}
html:not([data-skin]) .hubcard .hc-ico{width:44px;height:44px;border-radius:13px;box-shadow:0 5px 12px color-mix(in srgb,var(--kc,#4A5766) 32%,transparent)}
html:not([data-skin]) .hubcard .hc-ico svg{width:22px;height:22px}
html:not([data-skin]) .hubcard .hc-name{font-size:1rem;font-weight:650}
html:not([data-skin]) .hubcard .hc-meta{font-size:.84rem}
html:not([data-skin]) .hubcard .go{width:16px;height:16px;color:var(--faint)}
html:not([data-skin]) .hubcard:hover .go{color:var(--accent)}
html:not([data-skin]) .hubcard.add{border:1.5px dashed var(--line);min-height:84px;border-radius:18px;box-shadow:none}
html:not([data-skin]) .hubcard.add:hover{border-color:var(--accent);color:var(--accent);transform:none;box-shadow:none}

/* cards: a little more depth than before (a thin edge, a close shadow and a soft wide one) */
html:not([data-skin]) .fact{box-shadow:var(--shadow)}   /* .card stays flat (look.css): a shadow on it drew empty boxes */
html:not([data-skin]) body{background:linear-gradient(180deg,var(--bg) 0,color-mix(in srgb,var(--bg) 92%,#B8C9CE) 100%) fixed}

/* the segmented switches and the tabs inside a page */
html:not([data-skin]) .seg button[aria-pressed="true"],html:not([data-skin]) .seg .on{background:var(--surface);color:var(--accent);box-shadow:0 1px 3px rgba(20,40,45,.1)}

/* the calendar: today as a petrol circle */
html:not([data-skin]) .cv{--paper:var(--surface);--rule:var(--line);--we:rgba(74,90,95,.035);--out:rgba(74,90,95,.03);--todaybg:rgba(var(--accent-rgb),.06);--todayc:var(--accent)}
html:not([data-skin]) .cv-dn.today b{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}

/* the top bar */
html:not([data-skin]) .bn-ib{box-shadow:none;border:1px solid var(--line)}
html:not([data-skin]) .bn-search .search{box-shadow:none;border:1px solid var(--line)}
html:not([data-skin]) .cv-yt.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
html:not([data-skin]) .cv-box.on,html:not([data-skin]) .cv-box.part{background:var(--accent);border-color:var(--accent)}
html:not([data-skin]) .cv-n{background:var(--accent);color:var(--accent-fg)}

/* Home: the three doors as the same calm cards (grey icon on a pale square, a petrol line when you point at one) */
html:not([data-skin]) .hc-door{background:var(--surface);border:1px solid transparent;border-radius:22px;box-shadow:var(--shadow);min-height:140px}
html:not([data-skin]) .hc-door:hover{transform:translateY(-2px);box-shadow:var(--shadow-hi)}
html:not([data-skin]) .hc-chip{width:48px;height:48px;border-radius:14px;box-shadow:0 6px 14px color-mix(in srgb,var(--dc) 40%,transparent)}
html:not([data-skin]) .hc-say a.hc-b:hover{color:var(--accent)}

/* what is picked (a filter chip, a switch, a tab) is petrol, not black */
html:not([data-skin]) :is(.ct-chips .chip.on,.cf-kinds .chip.on,.al-albums .chip.on,.fm-chip.on,.hl-filter button[aria-pressed="true"],.vx-on .chip[aria-pressed="true"],
  #vxtable .chip[aria-pressed="true"],.mvseg label:has(input:checked),.tl-chips .chip[aria-pressed="true"],.lt-chip[aria-pressed="true"],
  .cal-av.all.on,.txchip[aria-pressed="true"],.tv-bar .chip.on,.tp-who .chip.on,.tp-switch .chip.on,.viewswitch button[aria-pressed="true"],.hsz button[aria-pressed="true"]){
  background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
html:not([data-skin]) :is(.cal-mg button.today,#view .cal-grid2 .day.today .dn,.cv-cal.compact .cv-dn.sel b){background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
html:not([data-skin]) .pr-step h3 .n{background:var(--accent);color:var(--accent-fg)}


/* 1.33.1: Documents. The folder tree and the folder's content are two white cards side by side, the folder you are in a
   pale petrol pill; Folders / All files / To shred is the grey track with a raised white pill (as in the Filter window). */
html:not([data-skin]) .lt-grid{gap:18px}
html:not([data-skin]) .lt-tree.card,html:not([data-skin]) .lt-here.card,html:not([data-skin]) .lm-map.card{background:var(--surface);border-radius:20px;box-shadow:var(--shadow)}
html:not([data-skin]) .lm-map.card{padding:14px 16px}
html:not([data-skin]) .lt-tree.card{padding:12px 10px}
html:not([data-skin]) .lt-here.card{padding:16px 20px 18px;min-height:240px}
html:not([data-skin]) .lt-tree [aria-selected=true] > .lt-n{background:var(--sf-on);color:var(--accent);border-radius:10px}
html:not([data-skin]) .lt-here .lt-title{margin:2px 0 10px}
html:not([data-skin]) .lt-fc{background:var(--surface-2);border:1px solid transparent;box-shadow:none;transition:background .15s,border-color .15s}
html:not([data-skin]) .lt-fc:hover{background:var(--surface);border-color:rgba(var(--accent-rgb),.3)}
html:not([data-skin]) .lt-files{margin-top:14px}
html:not([data-skin]) .lt-file{border-radius:12px}
html:not([data-skin]) .lt-file:hover{background:var(--surface-2)}
html:not([data-skin]) .pagetabs{display:inline-flex;width:fit-content;max-width:100%;gap:4px;padding:5px;border-radius:999px;background:var(--surface-2)}
html:not([data-skin]) .pagetabs a{border:0;padding:8px 16px;border-radius:999px;color:var(--muted);font-weight:550;background:none}
html:not([data-skin]) .pagetabs a:hover{color:var(--fg)}
html:not([data-skin]) .pagetabs a[aria-selected="true"]{background:var(--surface);color:var(--fg);border:0;box-shadow:0 1px 2px rgba(10,25,30,.08),0 4px 12px rgba(10,25,30,.1)}
html:not([data-skin]) .pagetabs a[aria-selected="true"] svg{color:var(--accent)}
html:not([data-skin]) .seg.lt-view{background:var(--surface-2);box-shadow:none}
/* the page you are on in the menu already has its pill and bar: no extra focus box around it */
html:not([data-skin]) .rail .nav a[aria-current]:focus-visible{outline:none}