/* Pagehawk desktop home - Jason's 2026-07-04 pick: variant E (the Mac library, ported)
 * structured with Explorer Classic (A) elements, on the LIGHT ivory tokens by default.
 * Every rule is scoped under html.dsk, which home-desktop.js sets only on wide
 * fine-pointer viewports (or when the shell pushes PHK_DESKTOP) - the phone companion
 * layout is untouched when the class is absent.
 * v1.1 (parity row sidebar-collapse): grid-template-areas layout with persisted state
 * classes - rail-off (rail collapsed), insp-off (inspector collapsed), insp-left
 * (inspector moved to the left side), no-docs (empty state; inspector auto-hides). */

html.dsk .app{
  display:grid;
  grid-template-areas:"top top top" "crumb crumb crumb" "rail main insp";
  grid-template-columns:224px minmax(0,1fr) 300px;
  grid-template-rows:auto auto minmax(0,1fr);
  min-height:100dvh;
}
html.dsk .top{grid-area:top}
html.dsk #dskCrumb{grid-area:crumb}
html.dsk #dskRail{grid-area:rail}
html.dsk .content{grid-area:main;max-width:none;padding:10px 30px 60px}
html.dsk #dskInspector{grid-area:insp}

/* collapsed / moved states (persisted in localStorage phk_dsk_ui) */
html.dsk.rail-off .app{grid-template-areas:"top top" "crumb crumb" "main insp";grid-template-columns:minmax(0,1fr) 300px}
html.dsk.rail-off #dskRail{display:none!important}
html.dsk.insp-off .app{grid-template-areas:"top top" "crumb crumb" "rail main";grid-template-columns:224px minmax(0,1fr)}
html.dsk.insp-off #dskInspector{display:none!important}
html.dsk.rail-off.insp-off .app{grid-template-areas:"top" "crumb" "main";grid-template-columns:minmax(0,1fr)}
html.dsk.insp-left:not(.insp-off) .app{grid-template-areas:"top top top" "crumb crumb crumb" "rail insp main";grid-template-columns:224px 300px minmax(0,1fr)}
html.dsk.insp-left:not(.insp-off).rail-off .app{grid-template-areas:"top top" "crumb crumb" "insp main";grid-template-columns:300px minmax(0,1fr)}
html.dsk.insp-left #dskInspector{border-left:0;border-right:1px solid var(--line-2)}
/* empty library: the inspector has nothing to inspect; the opener owns the stage */
html.dsk.no-docs .app{grid-template-areas:"top top" "crumb crumb" "rail main";grid-template-columns:224px minmax(0,1fr)}
html.dsk.no-docs #dskInspector{display:none!important}
html.dsk.no-docs.rail-off .app{grid-template-areas:"top" "crumb" "main";grid-template-columns:minmax(0,1fr)}
@media (max-width:1239px){
  html.dsk:not(.rail-off) .app{grid-template-areas:"top top" "crumb crumb" "rail main";grid-template-columns:224px minmax(0,1fr)}
  html.dsk.rail-off .app{grid-template-areas:"top" "crumb" "main";grid-template-columns:minmax(0,1fr)}
  html.dsk #dskInspector{display:none!important}
}

/* breadcrumb path bar (A) + the sidebar controls (always visible = always re-openable) */
#dskCrumb{display:none}
html.dsk #dskCrumb{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 10px;
  border-bottom:1px solid var(--line-2);background:var(--surface-2)}
#dskCrumb .seg{display:flex;align-items:center;gap:4px;font:600 12px var(--sans);color:var(--ink-3)}
#dskCrumb .seg b{color:var(--ink);font-weight:600}
#dskCrumb .uibtn{border:1px solid transparent;background:transparent;border-radius:7px;width:26px;height:26px;
  font-size:13px;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;padding:0}
#dskCrumb .uibtn:hover{background:var(--surface-3);border-color:var(--line)}
#dskCrumb .uibtn.off{color:var(--ink-4)}
#dskCrumb .palhint{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);padding:5px 11px;font:600 11.5px var(--sans);color:var(--ink-3);cursor:pointer}
#dskCrumb .palhint kbd{border:1px solid var(--line);border-radius:5px;padding:1px 6px;font:600 10px var(--sans);color:var(--ink-4);background:var(--surface-2)}

/* nav rail (A structure, Mac-library sections) */
#dskRail{display:none}
html.dsk #dskRail{display:flex;flex-direction:column;gap:2px;padding:16px 10px 20px;
  border-right:1px solid var(--line-2);background:var(--surface-2);overflow:auto}
#dskRail .rh{display:flex;align-items:center;font:600 9.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);margin:12px 8px 6px}
#dskRail .rh:first-child{margin-top:2px}
#dskRail .rh .cfg{margin-left:auto;border:0;background:transparent;color:var(--ink-4);cursor:pointer;font-size:11px;padding:0 2px;letter-spacing:0}
#dskRail .rh .cfg:hover{color:var(--ink-2)}
#dskRail button.nav{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;
  font:600 12.5px var(--sans);color:var(--ink-2);cursor:pointer;border:0;background:transparent;text-align:start;width:100%}
#dskRail button.nav:hover{background:var(--surface-3)}
#dskRail button.nav.on{background:var(--gold-soft);color:var(--ink)}
#dskRail button.nav .n{margin-left:auto;font:600 10.5px var(--sans);color:var(--ink-4)}
#dskRail button.nav .src-dot{width:9px;height:9px;border-radius:3px}
#dskRail button.nav[disabled]{opacity:.45;cursor:default}
#dskRail .foot{margin-top:auto;font:10.5px var(--sans);color:var(--ink-4);padding:14px 8px 0;line-height:1.5;border-top:1px solid var(--line-2)}
/* rail section config popover */
#dskRailCfg{position:absolute;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow-h);padding:10px 12px;display:none;flex-direction:column;gap:7px;min-width:170px}
#dskRailCfg.open{display:flex}
#dskRailCfg label{display:flex;align-items:center;gap:8px;font:600 12px var(--sans);color:var(--ink-2);cursor:pointer}
#dskRailCfg .h{font:600 9.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}

/* inspector (E) */
#dskInspector{display:none}
html.dsk #dskInspector{display:flex;flex-direction:column;padding:14px 18px 20px;
  border-left:1px solid var(--line-2);background:var(--surface-2);overflow:auto}
#dskInspector .ihead{display:flex;align-items:center;gap:6px;margin:0 0 10px}
#dskInspector .ihead .ht{font:600 9.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);flex:1}
#dskInspector .ihead button{border:1px solid transparent;background:transparent;border-radius:6px;width:24px;height:24px;
  color:var(--ink-4);cursor:pointer;font-size:12px;display:grid;place-items:center;padding:0}
#dskInspector .ihead button:hover{background:var(--surface-3);border-color:var(--line);color:var(--ink-2)}
html.dsk #dskInspector.empty .insp-body{display:none}
#dskInspector .insp-empty{display:none;font:12px var(--sans);color:var(--ink-3);line-height:1.6;text-align:center;margin-top:40%}
html.dsk #dskInspector.empty .insp-empty{display:block}
#dskInspector .icv{height:150px;border-radius:10px;display:grid;place-items:center;color:#fff;
  font-family:var(--serif);font-size:13.5px;text-align:center;padding:12px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
#dskInspector .icv .pages{position:absolute;inset:0;opacity:.14;background:repeating-linear-gradient(180deg,transparent 0 9px,rgba(255,255,255,.55) 9px 10px)}
#dskInspector .it{font-family:var(--serif);font-weight:600;font-size:16.5px;color:var(--ink);margin:13px 0 3px;line-height:1.25}
#dskInspector .is{font:11.5px var(--sans);color:var(--ink-3);margin-bottom:14px}
#dskInspector .kv{display:flex;justify-content:space-between;font:12px var(--sans);color:var(--ink-2);padding:4px 0}
#dskInspector .kv b{color:var(--ink);font-weight:600}
#dskInspector .ibar{height:4px;border-radius:3px;background:var(--line);overflow:hidden;margin:10px 0 16px}
#dskInspector .ibar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-deep))}
#dskInspector .icontinue{border:0;border-radius:11px;background:var(--gold);color:#23211C;
  font:700 13px var(--sans);height:42px;cursor:pointer;width:100%;box-shadow:var(--shadow)}
#dskInspector .icontinue:hover{filter:brightness(1.05)}
#dskInspector .iacts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
#dskInspector .iacts button{border:1px solid var(--line);border-radius:9px;background:var(--surface);
  color:var(--ink);font:600 12px var(--sans);height:34px;cursor:pointer}
#dskInspector .iacts button:hover{border-color:var(--gold)}
#dskInspector .ifoot{margin-top:auto;font:10.5px var(--sans);color:var(--ink-4);line-height:1.5;border-top:1px solid var(--line-2);padding-top:10px}

/* desktop empty state (parity row default-opener-empty): the calm opener owns the stage */
#dskWelcome{display:none}
html.dsk.no-docs #dskWelcome{display:flex;flex-direction:column;align-items:center;gap:0;margin:7vh auto 0;max-width:640px}
html.dsk.no-docs #homeWelcome{display:none!important}
html.dsk.no-docs .greet,html.dsk.no-docs .greet-sub{display:none}
#dskWelcome .dz{width:100%;border:2px dashed var(--line);border-radius:18px;background:var(--surface);
  display:flex;flex-direction:column;align-items:center;padding:44px 30px 38px;cursor:pointer;transition:border-color .15s,background .15s;text-align:center}
#dskWelcome .dz:hover,#dskWelcome .dz.over{border-color:var(--gold);background:var(--gold-soft)}
#dskWelcome .dz h2{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--ink);margin:16px 0 6px}
#dskWelcome .dz p{font:13.5px/1.5 var(--sans);color:var(--ink-2);margin:0 0 20px;max-width:420px}
#dskWelcome .dz .openbtn{border:0;border-radius:11px;background:var(--gold);color:#23211C;font:700 13px var(--sans);
  height:42px;padding:0 26px;cursor:pointer;box-shadow:var(--shadow)}
#dskWelcome .dz .hint{font:600 11px var(--sans);color:var(--ink-4);margin-top:12px}
#dskWelcome .row2{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;justify-content:center}
#dskWelcome .row2 button{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);font:600 12px var(--sans);height:36px;padding:0 14px;cursor:pointer}
#dskWelcome .row2 button:hover{border-color:var(--gold)}
#dskWelcome .row2 .src-dot{width:9px;height:9px;border-radius:3px;display:inline-block}

/* content adjustments on desktop: continue cards wrap into a grid, greeting tightens */
html.dsk .greet{font-size:27px;margin-top:16px}
html.dsk .rail{flex-wrap:wrap;overflow:visible;scroll-snap-type:none}
html.dsk .welcome{margin-top:6vh}