/* Oficio depth layer. Only surfaces and decorative art receive depth: measured
   geometry, canvas elements, pointer coordinates and physical agenda leaves do not. */
body.oficio-depth{
 --oficio-depth-shadow:25,49,70;
 --oficio-depth-bevel:255,255,255;
 --oficio-depth-border:rgba(102,140,153,.17);
 isolation:isolate;
}
/* A pair of translucent objects behind the interface, never over its controls. */
body.oficio-depth::after{
 content:"";
 position:fixed;
 inset:0;
 z-index:-1;
 pointer-events:none;
 background:
  radial-gradient(ellipse at 5% 27%,rgba(255,255,255,.75) 0 2.3%,rgba(190,220,222,.2) 2.8%,transparent 4%),
  radial-gradient(ellipse at 95% 15%,rgba(255,255,255,.8) 0 3.6%,rgba(122,173,183,.1) 4%,transparent 5.6%),
  radial-gradient(ellipse at 4% 28%,rgba(34,89,101,.12),transparent 8%),
  radial-gradient(ellipse at 95% 17%,rgba(46,87,110,.09),transparent 10%),
  radial-gradient(ellipse at 13% 72%,rgba(255,220,181,.16),transparent 27%),
  radial-gradient(ellipse at 87% 78%,rgba(177,219,222,.15),transparent 29%);
 opacity:.9;
}
/* Light on top, a narrow bevel below, then a soft object/contact shadow. */
body.oficio-depth :is(.panel,.card,.workspace,.owned,.lab-card,.fleet-panel,.side-card,.visual-panel,.reference-visual,.stat,.hero-note,.seal,.team-card){
 box-shadow:
  inset 0 1px 0 rgba(var(--oficio-depth-bevel),.85),
  inset 0 -1px 0 rgba(var(--oficio-depth-shadow),.055),
  0 2px 2px rgba(var(--oficio-depth-shadow),.045),
  0 7px 0 -4px rgba(var(--oficio-depth-shadow),.045),
  0 15px 29px -14px rgba(var(--oficio-depth-shadow),.19);
}
body.oficio-depth .tool{
 box-shadow:
  inset 0 1px 0 #ffffffd9,
  0 2px 3px rgba(var(--oficio-depth-shadow),.055),
  0 8px 0 -5px rgba(var(--oficio-depth-shadow),.055),
  0 18px 31px -15px rgba(var(--oficio-depth-shadow),.22);
}
/* Large illustrated headers become objects with a rounded front edge. */
body.oficio-depth :is(.hero,.intro,.orientation-intro){
 box-shadow:
  inset 0 1px 0 #ffffff55,
  inset 0 -2px 0 #0825390d,
  0 3px 2px rgba(var(--oficio-depth-shadow),.045),
  0 10px 0 -6px rgba(var(--oficio-depth-shadow),.07),
  0 24px 36px -20px rgba(var(--oficio-depth-shadow),.29);
}
body.oficio-depth :is(.hero,.intro,.orientation-intro) :is(.hero-art,.af-hero-scene,.workshop-art,.orientation-art,.lab-scene){
 filter:drop-shadow(0 15px 9px #112d3b23) drop-shadow(0 2px 1px #ffffff12);
}
/* Perspective is restricted to illustrations. No enclosing form or canvas moves. */
body.oficio-depth .hero-art img,
body.oficio-depth .hero-visual>img,
body.oficio-depth .lab-art>img,
body.oficio-depth .af-hero-scene>img{
 transform:perspective(850px) rotateY(-7deg) rotateX(3deg);
 transform-origin:center;
 filter:drop-shadow(12px 20px 11px #15384c20);
}
/* Sunken work trays keep the tools prominent without changing their geometry. */
body.oficio-depth :is(.canvas-area,.table-wrap,.movement,.book-toolbar,.sliders,.form-grid,.paint-tools,.toolbar-box){
 box-shadow:
  inset 0 2px 5px rgba(var(--oficio-depth-shadow),.055),
  inset 0 1px 0 rgba(var(--oficio-depth-shadow),.025),
  0 1px 0 #ffffffd9;
}
body.oficio-depth :is(.workspace,.panel,.card,.fleet-panel,.side-card) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),textarea,select){
 box-shadow:inset 0 2px 3px #19314604,0 1px 0 #ffffffc9;
}
body.oficio-depth :is(.tool-menu,.app-nav,.app-switch,.vehicle-tabs,.tabs,.subtabs) button{
 box-shadow:inset 0 1px 0 #ffffff80,0 2px 2px #18394b06,0 5px 8px -6px #18394b30;
}
body.oficio-depth :is(.tool-menu,.app-nav,.app-switch,.vehicle-tabs,.tabs,.subtabs) :is(button.selected,button.active,button.on,[aria-pressed="true"]){
 box-shadow:inset 0 1px 0 #ffffff30,inset 0 -1px 0 #0c263b16,0 3px 0 -1px #15384c16,0 7px 13px -7px #15384c50;
}
body.oficio-depth :is(.primary,.submit,.wide-btn,.add-btn,.btn.primary):not([data-tool="garage"] *){
 box-shadow:inset 0 1px 0 #ffffff40,inset 0 -2px 0 #102d4414,0 3px 1px -1px #12304c13,0 8px 13px -8px #12304c45;
}
/* Inset metric areas feel like trays. Highlights stay readable on dark cards. */
body.oficio-depth :is(.result,.stat.highlight,.quote,.instrument){
 box-shadow:inset 0 1px 0 #bff4f32e,inset 0 -1px 0 #071e3640,0 3px 0 -1px #13364b16,0 16px 29px -14px #14344748;
}
body.oficio-depth .instrument{
 box-shadow:inset 0 1px 0 #91dfe44d,inset 0 -3px 0 #071c3540,0 4px 0 -1px #17374920,0 18px 34px -11px #1d45524a;
}
/* Physical pages stay flat and fixed. Only their cover receives extra relief. */
body.oficio-depth .book-shell{
 box-shadow:inset 0 1px 0 #ffffff40,inset 0 -3px 0 #12312e30,0 4px 0 -1px #164c3e25,0 20px 35px -17px #193b3b50;
}
body.oficio-depth :is(.book-nav,.savebar,.bottom-strip,.notice,.note){
 box-shadow:inset 0 1px 0 #ffffffa6,inset 0 -1px 0 #17394a08,0 4px 10px -7px #17394a26;
}
body.oficio-depth :is(.app-icon,.contact-avatar,.avatar,.nav-icon){
 box-shadow:inset 0 1px 0 #ffffff80,inset 0 -1px 0 #143d4812,0 5px 10px -5px #21465930;
}
body.oficio-depth :is(.features span,.pill,.badge,.tag,.art-label){
 box-shadow:inset 0 1px 0 #ffffff70,0 2px 2px #163b4e05;
}
/* Shadow-only hover avoids shifting taps, canvases or field coordinates. */
@media(hover:hover) and (pointer:fine){
 body.oficio-depth :is(.card,.lab-card,.owned,.tool,.tool-menu button,.app-nav button){
  transition:box-shadow .22s ease,border-color .22s ease;
 }
 body.oficio-depth :is(.card,.lab-card,.owned,.tool):hover{
  box-shadow:inset 0 1px 0 #ffffffe6,inset 0 -1px 0 #17394a08,0 3px 4px #17394a08,0 10px 0 -6px #17394a08,0 23px 37px -16px #17394a40;
 }
}
@media(max-width:600px){
 body.oficio-depth::after{opacity:.65}
 body.oficio-depth :is(.panel,.card,.workspace,.owned,.lab-card,.fleet-panel,.side-card){
  box-shadow:inset 0 1px 0 #ffffffc9,inset 0 -1px 0 #17394a08,0 2px 2px #17394a05,0 12px 22px -14px #17394a30;
 }
 body.oficio-depth .hero-art img,body.oficio-depth .hero-visual>img,body.oficio-depth .lab-art>img,body.oficio-depth .af-hero-scene>img{
  transform:perspective(850px) rotateY(-4deg) rotateX(2deg);
 }
}
@media(prefers-reduced-motion:reduce){
 body.oficio-depth :is(.card,.lab-card,.owned,.tool,.tool-menu button,.app-nav button){transition:none}
}
@media print{
 body.oficio-depth::after{display:none!important}
 body.oficio-depth :is(.hero,.intro,.orientation-intro,.panel,.card,.workspace,.owned,.lab-card,.tool,.fleet-panel,.side-card,.visual-panel,.reference-visual,.stat,.hero-note,.seal,.team-card,.canvas-area,.table-wrap,.movement,.book-toolbar,.sliders,.form-grid,.paint-tools,.toolbar-box,.result,.quote,.instrument,.book-shell,.book-nav,.savebar,.bottom-strip,.notice,.note,.app-icon,.contact-avatar,.avatar,.nav-icon,.primary,.submit,.wide-btn,.add-btn,.btn.primary){box-shadow:none!important}
 body.oficio-depth :is(.hero-art,.af-hero-scene,.workshop-art,.orientation-art,.lab-scene),body.oficio-depth .hero-art img,body.oficio-depth .hero-visual>img,body.oficio-depth .lab-art>img,body.oficio-depth .af-hero-scene>img{transform:none;filter:none}
}

body.oficio-depth .hero{border-radius:26px}