/* Shared Home / How material, derived from the Northstar dossier.
   Layout and content belong to the consuming scene; depth belongs here. */
:root {
  --p-workspace-radius: 2px;
  --p-workspace-shadow: var(--p-shadow);
  --p-workspace-sheet-shadow: var(--p-shadow-paper);
  --p-workspace-face: linear-gradient(120deg,var(--p-white) 10%,var(--p-white) 70%,var(--p-paper));
  --p-workspace-cover: color-mix(in srgb,var(--p-warm) 52%,var(--p-paper));
  --p-workspace-blue-cover: color-mix(in srgb,var(--p-blue) 78%,var(--p-paper));
}
.p-workspace-folder {
  --p-workspace-spine: var(--p-orange);
  --p-workspace-pocket: var(--p-workspace-cover);
  position: relative;
  isolation: isolate;
  min-width: 0;
  background: var(--p-paper);
  border-left: var(--p-s3) solid var(--p-workspace-spine);
  border-radius: var(--p-workspace-radius);
  box-shadow: var(--p-workspace-shadow);
}
.p-workspace-folder--transaction {
  --p-workspace-spine: var(--p-blue-ink);
  --p-workspace-pocket: var(--p-workspace-blue-cover);
}
.p-workspace-layers {position:absolute; inset:0; z-index:-1; pointer-events:none;}
.p-workspace-layer {
  position:absolute; inset:0; background:var(--p-paper);
  border-radius:var(--p-workspace-radius); box-shadow:var(--p-workspace-sheet-shadow);
}
.p-workspace-layer--back {transform:translate(var(--p-s3),var(--p-s2)) rotate(.6deg);}
.p-workspace-layer--middle {transform:translate(var(--p-s1),var(--p-s1));}
.p-workspace-layers--sheet .p-workspace-layer--back {display:none;}
.p-workspace-layers--sheet .p-workspace-layer--middle {transform:translate(var(--p-s1),calc(-1 * var(--p-s1)));}
.p-paper-face,.hw-sheet,.hw-record-index {
  position:relative; background:var(--p-workspace-face);
  border-radius:var(--p-workspace-radius); box-shadow:var(--p-workspace-sheet-shadow);
}
.p-workspace-pocket {
  position:relative; background:var(--p-workspace-pocket);
  border-top:1px solid var(--p-white);
  border-radius:0 0 var(--p-workspace-radius) var(--p-workspace-radius);
}
.p-workspace-pocket::before {
  content:''; position:absolute; left:0; top:calc(-1 * var(--p-s4));
  width:32%; height:var(--p-s4); background:inherit;
  clip-path:polygon(0 0,calc(100% - var(--p-s4)) 0,100% 100%,0 100%);
}
@media (forced-colors:active) {
  .p-workspace-layer {display:none;}
  .p-workspace-folder,.p-paper-face,.hw-sheet,.hw-record-index {outline:1px solid CanvasText;}
}