/* 1.13 the soft menu: a light rounded panel, thin icons, the open section as a dark pill and its pages hanging off a line.
   Light and Dark looks only; the Developer look keeps its own menu (looks.css). */
:root:not([data-skin]){--bg:#E9EBEF;--sf-a:#F6F7F9;--sf-b:#E6E8EC;--sf-edge:rgba(255,255,255,.95);--sf-ink:#17181A;--sf-mute:#5E636B;--sf-pill:#161616;--sf-pill-fg:#FFFFFF;
  --sf-on:#FCFCFD;--sf-on-sh:0 6px 16px rgba(30,35,45,.09);--sf-line:#2A2B2E;--sf-sep:rgba(20,20,20,.09);--sf-shadow:0 18px 50px rgba(30,35,45,.13);--sf-hover:rgba(255,255,255,.65);--sf-hov:rgba(20,24,30,.06);--sf-dot:#E79AF0}
@media (prefers-color-scheme:dark){:root:not([data-skin]):not([data-theme="light"]){--bg:#0E141B;--sf-a:#1D242D;--sf-b:#151B22;--sf-edge:rgba(255,255,255,.07);--sf-ink:#E8EEF4;--sf-mute:#A3B1BF;
  --sf-pill:#F1F3F5;--sf-pill-fg:#111418;--sf-on:rgba(255,255,255,.1);--sf-on-sh:none;--sf-line:rgba(232,238,244,.55);--sf-sep:rgba(255,255,255,.08);--sf-shadow:0 18px 50px rgba(0,0,0,.45);--sf-hover:rgba(255,255,255,.06);--sf-hov:rgba(255,255,255,.07)}}
:root[data-theme="dark"]:not([data-skin]){--bg:#0E141B;--sf-a:#1D242D;--sf-b:#151B22;--sf-edge:rgba(255,255,255,.07);--sf-ink:#E8EEF4;--sf-mute:#A3B1BF;
  --sf-pill:#F1F3F5;--sf-pill-fg:#111418;--sf-on:rgba(255,255,255,.1);--sf-on-sh:none;--sf-line:rgba(232,238,244,.55);--sf-sep:rgba(255,255,255,.08);--sf-shadow:0 18px 50px rgba(0,0,0,.45);--sf-hover:rgba(255,255,255,.06);--sf-hov:rgba(255,255,255,.07)}

/* the small icons in front of subpages and the "Settings and admin" button: plain in every look */
.nav .navsub svg.si{display:none}
.nav .sect-tg{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:11px;background:none;font:inherit;font-weight:500;color:inherit;cursor:pointer;text-align:left}
.nav .sect-tg svg{width:18px;height:18px;flex:none}
.nav .sect-tg .chev{margin-left:auto;padding:0}
.nav .navsub a:has(svg.si){display:flex;align-items:center;gap:10px}
html[data-skin] .nav .navsub a:has(svg.si){display:block}

/* ---- every size: the items */
html:not([data-skin]) .rail{color:var(--sf-ink)}
html:not([data-skin]) .rail .navgroup .label{display:none!important}
html:not([data-skin]) .rail .navgroup.closed .nav{display:grid!important}
html:not([data-skin]) .rail #navGroups{display:flex;flex-direction:column;flex:1 0 auto}
html:not([data-skin]) .rail .navgroup + .navgroup::before{content:"";display:block;height:1px;background:var(--sf-sep);margin:7px 18px}
html:not([data-skin]) .rail .navgroup.more{margin-top:auto;padding-top:8px}
html:not([data-skin]) .rail .navgroup.more::before{display:none}
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{
  display:flex;align-items:center;gap:16px;min-height:44px;padding:0 16px 0 18px;border:0;border-radius:999px;font-size:1rem;font-weight:450;
  color:var(--sf-ink);background:none;box-shadow:none;outline:0;transition:background .15s}
html:not([data-skin]) .rail .nav a svg,html:not([data-skin]) .rail .nav .sect-tg svg{width:22px;height:22px;color:currentColor;stroke-width:1.5}
html:not([data-skin]) .rail .nav a:hover,html:not([data-skin]) .rail .nav .sect-tg:hover,html:not([data-skin]) .rail .nav .navsub a:hover,
html:not([data-skin]) .rail .nav button:hover{background:var(--sf-hov);color:var(--sf-ink)}
html:not([data-skin]) .rail .nav a:hover svg,html:not([data-skin]) .rail .nav button:hover svg{color:currentColor}
html:not([data-skin]) .rail .nav a:focus-visible,html:not([data-skin]) .rail .nav .sect-tg:focus-visible,html:not([data-skin]) .rail .nav .chev:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
html:not([data-skin]) .rail .nav a[aria-current="true"],html:not([data-skin]) .rail .nav a[aria-current="page"]{background:var(--sf-on);box-shadow:var(--sf-on-sh);color:var(--sf-ink);font-weight:550}
html:not([data-skin]) .rail .nav a[aria-current]::after{display:none!important}
html:not([data-skin]) .rail .nav a[aria-current="true"] svg{color:currentColor}
html:not([data-skin]) .rail .nav .count:not([hidden]){display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;margin-left:auto;padding:0 7px;border-radius:999px;
  background:var(--sf-pill);color:var(--sf-pill-fg);font-size:.78rem;font-weight:600;line-height:1}

/* a section: + to open, − to close; open, it is a dark pill */
html:not([data-skin]) .rail .sect-row{position:relative;display:flex;align-items:center;border-radius:999px;transition:background .15s}
html:not([data-skin]) .rail .sect-row a{flex:1;padding-right:52px}
html:not([data-skin]) .rail .sect-row .chev,html:not([data-skin]) .rail .sect-tg .chev{position:absolute;right:6px;top:50%;width:34px;height:34px;transform:translateY(-50%);border-radius:50%;
  color:var(--sf-ink);background:none;padding:0}
html:not([data-skin]) .rail .sect-tg .chev{right:6px}
html:not([data-skin]) .rail .sect .chev svg{display:none}
html:not([data-skin]) .rail .sect .chev::before,html:not([data-skin]) .rail .sect .chev::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;border-radius:2px;background:currentColor;
  transform:translate(-50%,-50%);transition:transform .2s}
html:not([data-skin]) .rail .sect .chev::after{transform:translate(-50%,-50%) rotate(90deg)}
html:not([data-skin]) .rail .sect.open .chev::after{transform:translate(-50%,-50%) rotate(0deg)}
html:not([data-skin]) .rail .sect .chev:hover{background:var(--sf-hov);color:var(--sf-ink)}
html:not([data-skin]) .rail .sect.open > .sect-row{background:var(--sf-pill);box-shadow:0 10px 24px rgba(0,0,0,.2);margin:3px 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{
  background:none!important;box-shadow:none!important;color:var(--sf-pill-fg)!important}
html:not([data-skin]) .rail .sect.open > .sect-row .chev:hover{background:rgba(127,127,127,.18)!important}
/* a closed section keeps the menu's ink, also when its page is open (the dark rail's light text must not leak in) */
html:not([data-skin]) .rail .sect:not(.open) > .sect-row a,html:not([data-skin]) .rail .sect:not(.open) > .sect-row .sect-tg,
html:not([data-skin]) .rail .sect:not(.open) > .sect-row .chev{color:var(--sf-ink)!important}
html:not([data-skin]) .rail .sect.current:not(.open) > .sect-row{background:var(--sf-on);box-shadow:var(--sf-on-sh)}
html:not([data-skin]) .rail .sect.current:not(.open) > .sect-row a{font-weight:550}

/* the pages of an open section, hanging off a thin line */
html:not([data-skin]) .rail .nav .navsub{position:relative;margin:4px 0 8px 38px;padding:0;border:0;gap:2px}
html:not([data-skin]) .rail .nav .navsub::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1.3px;background:var(--sf-line)}
html:not([data-skin]) .rail .nav .navsub::after{content:"";position:absolute;left:-2px;top:calc(50% - 2.5px);width:5.5px;height:5.5px;border-radius:50%;background:var(--sf-line)}
html:not([data-skin]) .rail .nav .navsub a{display:flex;align-items:center;gap:14px;min-height:40px;margin-left:14px;padding:0 16px;border-radius:999px;font-size:.95rem;font-weight:450;color:var(--sf-ink)}
html:not([data-skin]) .rail .nav .navsub a svg.si{display:block;width:20px;height:20px;flex:none}
html:not([data-skin]) .rail .nav .navsub a.sub2{padding-left:30px;font-size:.9rem}
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);box-shadow:var(--sf-on-sh);color:var(--sf-ink);font-weight:550}
html:not([data-skin]) .rail .bookbox{margin:2px 0 6px 14px}
html:not([data-skin]) .rail .bookpick,html:not([data-skin]) .rail .booklist{background:var(--sf-hover);border:1px solid var(--sf-sep);color:var(--sf-ink);border-radius:18px}
html:not([data-skin]) .rail .bookpick svg{color:var(--sf-mute)}
html:not([data-skin]) .rail .bookpick .bt,html:not([data-skin]) .rail .bookopt .bt{color:var(--sf-ink)}
html:not([data-skin]) .rail .bookopt{color:var(--sf-ink)}
html:not([data-skin]) .rail .bookopt:hover{background:var(--sf-hov);color:var(--sf-ink)}
html:not([data-skin]) .rail .bookopt[aria-pressed="true"]{background:var(--sf-on);border-color:var(--sf-sep);color:var(--sf-ink)}
html:not([data-skin]) .rail .chip{background:transparent;border-color:var(--sf-sep);color:var(--sf-mute)}

/* the person at the bottom */
html:not([data-skin]) .rail .me{border-top:1px solid var(--sf-sep)}
html:not([data-skin]) .rail .me,html:not([data-skin]) .rail .me b,html:not([data-skin]) .rail .btn.ghost{color:var(--sf-ink)}
html:not([data-skin]) .rail .me .muted{color:var(--sf-mute)}
html:not([data-skin]) .rail .brand,html:not([data-skin]) .rail .brand-name{color:var(--sf-ink)}

/* ---- desktop: a floating panel that folds to icons */
@media (min-width:821px){
  html:not([data-skin]){--rw:318px}
  html:not([data-skin]):has(.app.collapsed){--rw:122px}
  html:not([data-skin]) .app .rail{top:14px;left:14px;bottom:14px;height:auto;width:calc(var(--rw) - 28px);border-radius:36px;
    background:linear-gradient(180deg,var(--sf-a),var(--sf-b));border:2px solid var(--sf-edge);box-shadow:var(--sf-shadow),inset 0 1px 0 var(--sf-edge)}
  html:not([data-skin]) .rail .brand{padding:24px 26px 20px;border-bottom:1px solid var(--sf-sep);font-size:1.25rem;letter-spacing:-.02em}
  html:not([data-skin]) .rail .brand .mark{border-radius:14px}
  html:not([data-skin]) .rail .navs{padding:12px 12px 10px;gap:0;margin-top:0}
  html:not([data-skin]) .rail .me{padding:12px 18px 14px}
  html:not([data-skin]) .rail .railtoggle{top:50%;right:-19px;width:36px;height:36px;transform:translateY(-50%);background:var(--sf-a);border:2px solid var(--sf-edge);color:var(--sf-ink);
    box-shadow:0 4px 12px rgba(30,35,45,.14)}
  html:not([data-skin]) .rail .railtoggle svg{width:15px;height:15px}

  /* folded: round icons; the section you are in keeps a short line under it */
  html:not([data-skin]) .app.collapsed .rail .brand{justify-content:center;padding:24px 0 20px}
  html:not([data-skin]) .app.collapsed .rail .navs{padding:12px 0 10px}
  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{
    justify-content:center;width:52px;height:52px;min-height:52px;margin:0 auto;padding:0;border-radius:50%}
  html:not([data-skin]) .app.collapsed .rail .sect-tg .t,html:not([data-skin]) .app.collapsed .rail .sect-tg .chev{display:none}
  html:not([data-skin]) .app.collapsed .rail .sect-row{display:flex;justify-content:center;background:none!important;box-shadow:none!important;margin:0}
  html:not([data-skin]) .app.collapsed .rail .sect.open > .sect-row a,html:not([data-skin]) .app.collapsed .rail .sect.open > .sect-row .sect-tg{color:var(--sf-ink)!important}
  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:var(--sf-on-sh)!important}
  html:not([data-skin]) .app.collapsed .rail .sect.current::after{content:"";display:block;width:1.3px;height:34px;margin:3px auto 5px;background:var(--sf-line)}
  html:not([data-skin]) .app.collapsed .rail .navgroup + .navgroup{border-top:0;padding-top:0}
  html:not([data-skin]) .app.collapsed .rail .navgroup + .navgroup::before{width:40px;margin:7px auto}
  html:not([data-skin]) .app.collapsed .rail .nav a .count:not(:empty){position:absolute;display:block;top:12px;right:12px;width:9px;height:9px;min-width:0;padding:0;font-size:0;
    background:var(--sf-dot);box-shadow:0 0 0 2px var(--sf-a)}
  html:not([data-skin]) .app.collapsed .rail .me{justify-content:center;padding:12px 0 14px}
}

/* ---- phone: the menu opens as the same panel over the page */
@media (max-width:820px){
  html:not([data-skin]) .app .rail{background:var(--bg);border-radius:0;box-shadow:none}
  html:not([data-skin]) .rail .menubtn{background:var(--surface);border:0;box-shadow:var(--shadow);color:var(--sf-ink)}
  html:not([data-skin]) body.menu-open .app .rail{position:fixed;inset:10px;z-index:60;display:block;padding:14px 10px 18px;overflow:auto;border-radius:34px;
    background:linear-gradient(180deg,var(--sf-a),var(--sf-b));border:2px solid var(--sf-edge);box-shadow:0 0 0 100vmax rgba(16,20,26,.38),var(--sf-shadow)}
  html:not([data-skin]) body.menu-open .app .rail .brand{display:flex!important;padding:8px 14px 16px;margin-bottom:6px;border-bottom:1px solid var(--sf-sep);font-size:1.15rem;font-weight:700}
  html:not([data-skin]) body.menu-open .app .rail .where{display:none}
  html:not([data-skin]) body.menu-open .rail .menubtn{position:absolute;top:14px;right:14px;width:40px;height:40px;padding:0;border-radius:50%;font-size:0;gap:0;justify-content:center}
  html:not([data-skin]) body.menu-open .rail .menubtn svg{display:none}
  html:not([data-skin]) body.menu-open .rail .menubtn::before,html:not([data-skin]) body.menu-open .rail .menubtn::after{content:"";position:absolute;width:15px;height:1.6px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
  html:not([data-skin]) body.menu-open .rail .menubtn::after{transform:rotate(-45deg)}
  html:not([data-skin]) body.menu-open .app .rail .navs{gap:0!important;padding:0 0 8px}
  html:not([data-skin]) body.menu-open .app .rail .nav a{padding:0 16px 0 18px;min-height:42px}
  html:not([data-skin]) body.menu-open .app .rail .navsub a{padding:0 16px;min-height:40px}
  html:not([data-skin]) body.menu-open{overflow:hidden}
}

/* ---- Home (home.js): the day in one sentence, search, three doors */
.homec{display:flex;flex-direction:column;gap:30px;max-width:1080px;padding:5vh 0 24px}
.hc-top{display:flex;flex-direction:column;gap:16px}
.hc-date{color:var(--muted);font-size:1rem;font-weight:500}
.hc-say{margin:0;font-family:var(--f-display,inherit);font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.2;font-weight:500;letter-spacing:-.025em;color:var(--muted);max-width:30ch}
.hc-say .hc-ink{color:var(--fg)}
.hc-say .hc-b,.hc-say b{color:var(--fg);font-weight:650;text-decoration:none}
.hc-say a.hc-b{background-image:linear-gradient(currentColor,currentColor);background-size:100% 1.5px;background-repeat:no-repeat;background-position:0 100%}
.hc-say a.hc-b:hover{color:var(--accent)}
.hc-more-b{border:0;background:none;padding:0;font:inherit;color:var(--fg);font-weight:650;cursor:pointer;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
.hc-act{display:flex;flex-wrap:wrap;gap:10px}
.hc-act .btn{min-height:48px;padding:0 22px;border-radius:999px;font-size:1rem}
.hc-doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:4vh}
.hc-door{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:160px;padding:24px;border-radius:32px;
  background:var(--sf-hover,var(--surface));border:1.5px solid var(--sf-edge,var(--line));color:var(--fg);text-decoration:none;transition:transform .15s,box-shadow .15s}
.hc-door:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(30,35,45,.1)}
.hc-door::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:4px;border-radius:4px 4px 0 0;background:var(--dc)}
.hc-door b{display:block;font-size:1.15rem;font-weight:550}
.hc-door small{display:block;margin-top:4px;color:var(--muted);font-size:.9rem}
.hc-chip{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--dc);color:#fff}
.hc-chip svg{width:24px;height:24px}
.hc-door.d1{--dc:#E79AF0}.hc-door.d2{--dc:#7FA8F0}.hc-door.d3{--dc:#F2B65A}
.hc-needs{border-top:1px solid var(--line);padding-top:14px}
.hc-needs summary{cursor:pointer;color:var(--muted);font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:8px}
.hc-needs summary::-webkit-details-marker{display:none}
.hc-needs summary::before{content:"+";font-size:1.2rem;line-height:1}
.hc-needs[open] summary::before{content:"−"}
.hc-needs .needs-host{margin-top:14px}
html[data-skin] .hc-door{border-radius:var(--r-sm,8px)}
@media (max-width:820px){.homec{padding-top:8px;gap:22px}.hc-doors{grid-template-columns:1fr;margin-top:0}.hc-door{min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;padding:16px 18px;border-radius:24px}}
.txd-h{margin:16px 0 6px;font-size:1rem;display:flex;gap:10px;align-items:baseline}

/* 1.23: Money's pages in three kinds */
.nav .navsub .subh{display:block;margin:10px 0 2px 16px;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#8A8F98)}
html:not([data-skin]) .rail .nav .navsub .subh{margin-left:30px}
.nav .navsub .subh:first-of-type{margin-top:4px}