/* 3d.britos.app · hub da oficina 3D da família Brito · padrão Apple para web (HIG → web).
   Um só accent de produto (o petróleo do hub); as cores dos sites irmãos aparecem só nas marcas deles.
   Camadas: barra e tab bar translúcidas (controles); conteúdo em fundo agrupado com cards sólidos, sem bordas de 1 px. */
:root{
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-rounded:ui-rounded,"SF Pro Rounded",var(--font-sans);
  --font-mono:ui-monospace,"SF Mono",Menlo,monospace;
  /* cores de sistema (HIG) */
  --sys-red:#FF383C;--sys-orange:#FF8D28;--sys-yellow:#FFCC00;--sys-green:#34C759;--sys-blue:#0088FF;--sys-gray:#8E8E93;
  /* cores semânticas de interface (UIKit) */
  --label:#000;--label-2:rgba(60,60,67,.6);--label-3:rgba(60,60,67,.3);--placeholder:rgba(60,60,67,.3);
  --separator:rgba(60,60,67,.29);--separator-opaque:#C6C6C8;
  --bg:#F2F2F7;--card:#FFFFFF;--card-2:#F2F2F7;
  --fill:rgba(120,120,128,.2);--fill-2:rgba(120,120,128,.16);--fill-3:rgba(118,118,128,.12);--fill-4:rgba(116,116,128,.08);
  /* accent do hub: petróleo; texto em tom escuro para contraste ≥ 4,5:1 sobre branco */
  --accent:#0B7A8A;--accent-ink:#0A6B79;--on-accent:#FFFFFF;--accent-tint:rgba(11,122,138,.14);
  /* estados */
  --ok:#008932;--warn:#C55300;--crit:#E9152D;--info:#1E6EF4;
  --ok-tint:rgba(52,199,89,.16);--warn-tint:rgba(255,141,40,.18);--crit-tint:rgba(255,56,60,.14);--info-tint:rgba(0,136,255,.14);
  /* marcas dos sites irmãos */
  --vault:#F07A2C;--store:#2F6BFF;--arca:#E3A400;--hub:var(--accent);
  --radius-s:8px;--radius-m:12px;--radius-l:16px;--radius-pill:9999px;--hairline:.5px;--tap:44px;
  --gutter:16px;--maxw:1120px;
  --ease:cubic-bezier(.25,.1,.25,1);--dur:250ms;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --label:#fff;--label-2:rgba(235,235,245,.6);--label-3:rgba(235,235,245,.3);--placeholder:rgba(235,235,245,.3);
    --separator:rgba(84,84,88,.6);--separator-opaque:#38383A;
    --bg:#000;--card:#1C1C1E;--card-2:#2C2C2E;
    --fill:rgba(120,120,128,.36);--fill-2:rgba(120,120,128,.32);--fill-3:rgba(118,118,128,.24);--fill-4:rgba(116,116,128,.18);
    --accent:#4FC3D3;--accent-ink:#6AD3E1;--on-accent:#00252B;--accent-tint:rgba(79,195,211,.2);
    --ok:#30D158;--warn:#FF9230;--crit:#FF4245;--info:#0091FF;
    --ok-tint:rgba(48,209,88,.2);--warn-tint:rgba(255,146,48,.2);--crit-tint:rgba(255,66,69,.18);--info-tint:rgba(0,145,255,.2);
    --sys-red:#FF4245;--sys-orange:#FF9230;--sys-yellow:#FFD600;--sys-green:#30D158;--sys-blue:#0091FF;
    --vault:#FF9A4D;--store:#5B8DFF;--arca:#FFC233;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --label:#fff;--label-2:rgba(235,235,245,.6);--label-3:rgba(235,235,245,.3);--placeholder:rgba(235,235,245,.3);
  --separator:rgba(84,84,88,.6);--separator-opaque:#38383A;
  --bg:#000;--card:#1C1C1E;--card-2:#2C2C2E;
  --fill:rgba(120,120,128,.36);--fill-2:rgba(120,120,128,.32);--fill-3:rgba(118,118,128,.24);--fill-4:rgba(116,116,128,.18);
  --accent:#4FC3D3;--accent-ink:#6AD3E1;--on-accent:#00252B;--accent-tint:rgba(79,195,211,.2);
  --ok:#30D158;--warn:#FF9230;--crit:#FF4245;--info:#0091FF;
  --ok-tint:rgba(48,209,88,.2);--warn-tint:rgba(255,146,48,.2);--crit-tint:rgba(255,66,69,.18);--info-tint:rgba(0,145,255,.2);
  --sys-red:#FF4245;--sys-orange:#FF9230;--sys-yellow:#FFD600;--sys-green:#30D158;--sys-blue:#0091FF;
  --vault:#FF9A4D;--store:#5B8DFF;--arca:#FFC233;
  color-scheme:dark;
}
@media (prefers-contrast: more){:root{--label-2:rgba(60,60,67,.85);--separator:var(--separator-opaque)} :root[data-theme="dark"],:root:not([data-theme="light"]){--label-2:rgba(235,235,245,.85)}}

/* base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--label);font-size:1.0625rem;line-height:1.35;
  padding:0 max(var(--gutter),env(safe-area-inset-right,0px)) calc(96px + env(safe-area-inset-bottom,0px)) max(var(--gutter),env(safe-area-inset-left,0px))}
@media (min-width:768px){:root{--gutter:24px} body{font-size:.9375rem;line-height:1.45;padding-bottom:48px}}
@media (min-width:1024px){:root{--gutter:32px}}
a{color:var(--accent-ink);text-decoration:none} a:hover{text-decoration:underline}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent-ink) 70%,transparent);outline-offset:2px}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;text-wrap:balance;color:var(--label)}
h1{font-size:2.125rem;line-height:1.2;letter-spacing:-.02em}
h2{font-size:1.75rem;line-height:1.2;margin-top:4px}
h3{font-size:1.25rem;line-height:1.25;margin-top:20px}
h4{font-size:1.0625rem;line-height:1.3;margin-top:14px}
@media (min-width:768px){h1{font-size:2.5rem;line-height:1.1} h2{font-size:1.625rem;line-height:1.25} h3{font-size:1.0625rem;line-height:1.3} h4{font-size:.9375rem}}
p{margin:8px 0;max-width:72ch}
ul,ol{margin:8px 0;padding-left:1.25em;max-width:72ch} li{margin:4px 0}
small,.small{font-size:.8125rem;line-height:1.4;color:var(--label-2)}
code,kbd{font-family:var(--font-mono);font-size:.92em;background:var(--fill-3);padding:1px 6px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto}
.mono{font-family:var(--font-mono)} .num{font-variant-numeric:tabular-nums}
.muted{color:var(--label-2)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* barra de navegação (camada funcional, translúcida; conteúdo rola por baixo) */
.top{position:sticky;top:0;z-index:20;margin:0 calc(-1*max(var(--gutter),env(safe-area-inset-right,0px))) 0 calc(-1*max(var(--gutter),env(safe-area-inset-left,0px)));padding:0 var(--gutter);
  background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 var(--hairline) 0 transparent;transition:box-shadow var(--dur) var(--ease)}
.top.scrolled{box-shadow:0 var(--hairline) 0 var(--separator)}
.top .wrap{display:flex;align-items:center;gap:12px;min-height:52px}
.brand{font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;color:var(--label);display:flex;align-items:center;gap:9px;min-height:var(--tap)}
.brand:hover{text-decoration:none}
.brand svg{width:22px;height:22px;flex:none}
.top nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none;min-width:0}
.top nav::-webkit-scrollbar{display:none}
.top nav a{white-space:nowrap;color:var(--label-2);padding:0 12px;min-height:32px;display:inline-flex;align-items:center;border-radius:var(--radius-pill);font-size:.9375rem;font-weight:500;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.top nav a:hover{color:var(--label);background:var(--fill-4);text-decoration:none}
.top nav a.on{color:var(--label);background:var(--fill-3)}
.themebtn{border:0;background:var(--fill-3);color:var(--label-2);font:500 .8125rem var(--font-sans);padding:0 12px;min-height:32px;border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap}
.themebtn:hover{background:var(--fill-2);color:var(--label)}

/* tab bar flutuante no celular; em telas largas a navegação fica na barra de cima */
.tabbar{display:none}
@media (max-width:767px){
  body:has(.tabbar) .top nav{display:none}
  .tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom,0px));z-index:30;display:flex;gap:2px;padding:6px;width:min(calc(100% - 24px),440px);
    background:color-mix(in srgb,var(--card) 70%,transparent);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
    border-radius:var(--radius-pill);box-shadow:0 0 0 var(--hairline) var(--separator),0 8px 32px rgba(0,0,0,.12)}
  .tabbar a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--tap);padding:4px 2px;border-radius:var(--radius-pill);color:var(--label-2);font-size:10px;font-weight:500;line-height:1.1}
  .tabbar a:hover{text-decoration:none}
  .tabbar a svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabbar a.on{color:var(--accent-ink);background:var(--accent-tint)}
  .tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (prefers-reduced-transparency: reduce){.top,.tabbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--card)}}

/* cabeçalho da página (Large Title) */
.hero{padding:28px 0 4px}
.eyebrow{font-size:.8125rem;line-height:1.4;color:var(--label-2);font-weight:500}
.lede{font-size:1.0625rem;line-height:1.4;color:var(--label-2);max-width:66ch;margin-top:10px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.badge{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:var(--radius-pill);background:var(--fill-3);color:var(--label);font-size:.8125rem;font-weight:500;font-variant-numeric:tabular-nums}
.badge b{font-family:var(--font-rounded);font-weight:600}
.badge.acc{background:var(--accent-tint);color:var(--accent-ink)}
.badge.ok{background:var(--ok-tint);color:var(--ok)} .badge.warn{background:var(--warn-tint);color:var(--warn)} .badge.crit{background:var(--crit-tint);color:var(--crit)} .badge.info{background:var(--info-tint);color:var(--info)}
.skel{color:transparent;background:var(--fill-3);animation:skel 1.2s var(--ease) infinite alternate}
@keyframes skel{to{opacity:.55}}

/* seções e cards (agrupamento por fundo, cantos contínuos, sem borda) */
section{padding:28px 0 4px}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.secno{font-size:.8125rem;line-height:1.4;color:var(--label-2);font-weight:500;padding-left:4px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin-top:12px}
.grid.tight{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.card{background:var(--card);border-radius:var(--radius-l);padding:16px 18px;min-width:0;display:flex;flex-direction:column}
.card h3{margin-top:0}
.card .k{font-size:.8125rem;line-height:1.4;color:var(--label-2);font-weight:500}
.card .v{font-family:var(--font-rounded);font-size:1.75rem;font-weight:600;line-height:1.15;margin-top:4px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.card .v small{font-family:var(--font-sans);font-size:.8125rem;color:var(--label-2);font-weight:400}
.card p{max-width:none}
.card .more{display:inline-flex;align-items:center;gap:4px;min-height:28px;margin-top:auto;padding-top:8px;font-size:.9375rem;font-weight:500}
.card.soon{opacity:.78}
.pill{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:var(--radius-pill);background:var(--fill-3);color:var(--label-2);font-size:.75rem;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.pill.ok{background:var(--ok-tint);color:var(--ok)} .pill.warn{background:var(--warn-tint);color:var(--warn)} .pill.crit{background:var(--crit-tint);color:var(--crit)} .pill.info{background:var(--info-tint);color:var(--info)} .pill.acc{background:var(--accent-tint);color:var(--accent-ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 16px;border-radius:var(--radius-pill);border:0;background:var(--fill-3);color:var(--label);font:500 .9375rem var(--font-sans);white-space:nowrap;cursor:pointer}
.btn:hover{background:var(--fill-2);text-decoration:none}
.btn.primary{background:var(--accent);color:var(--on-accent)} .btn.primary:hover{background:var(--accent-ink);color:var(--on-accent)}

/* cartões dos sites irmãos: marca colorida, dono, números */
.site{position:relative;padding-top:18px}
.site .head{display:flex;align-items:center;gap:12px}
.site .mark{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;color:#fff;font:600 .9375rem var(--font-rounded);letter-spacing:.02em;background:var(--sys-gray)}
.site .mark svg{width:24px;height:24px}
.mark.vault{background:var(--vault)} .mark.store{background:var(--store)} .mark.arca{background:var(--arca);color:#1A1200} .mark.hub{background:var(--accent);color:var(--on-accent)}
.site .head h3{margin:0;font-size:1.25rem}
.site .head .small{display:block;margin-top:1px}
.site .state{margin-left:auto}
.site .nums{display:flex;gap:18px;margin:12px 0 2px;flex-wrap:wrap}
.site .nums div{min-width:0}
.site .nums b{display:block;font-family:var(--font-rounded);font-size:1.5rem;font-weight:600;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.site .nums span{font-size:.8125rem;color:var(--label-2)}
.site .stack{font-size:.75rem;color:var(--label-3);margin-top:10px}

/* listas agrupadas (oficina, documentos) com separadores hairline recuados */
.rows{display:grid;margin-top:12px;border-radius:var(--radius-l);overflow:hidden;background:var(--card)}
.row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:13px 16px;align-items:center}
.row+.row::before{content:"";position:absolute;left:16px;right:0;top:0;height:var(--hairline);background:var(--separator)}
.row h4{margin:0;font-size:1rem;font-weight:600}
.row .d{font-size:.875rem;color:var(--label-2);margin-top:2px}
.row .tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.row.sub{grid-template-columns:1fr;background:var(--card-2)} .row.sub p{margin:0;font-size:.875rem;color:var(--label-2)}
@media (max-width:480px){.row{grid-template-columns:1fr} .row .tags{justify-content:flex-start}}

/* frentes em andamento */
.frente .site-tag{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;color:var(--label-2)}
.frente .site-tag i{width:10px;height:10px;border-radius:3px;background:var(--sys-gray);display:inline-block}
.frente .site-tag i.vault{background:var(--vault)} .frente .site-tag i.store{background:var(--store)} .frente .site-tag i.arca{background:var(--arca)} .frente .site-tag i.hub{background:var(--accent)}
.frente h3{font-size:1.0625rem;margin-top:6px}
.frente .pill{align-self:flex-start;margin-top:10px}

/* biblioteca: filtros em chips, busca, lista de documentos */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:0;background:var(--fill-3);color:var(--label-2);font:500 .8125rem var(--font-sans);padding:0 12px;min-height:30px;border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip:hover{background:var(--fill-2);color:var(--label)}
.chip[aria-pressed="true"]{background:var(--accent-tint);color:var(--accent-ink)}
.chip small{font-variant-numeric:tabular-nums;color:inherit;opacity:.7}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--card);border-radius:var(--radius-pill);padding:0 12px;min-height:36px;min-width:min(100%,260px);flex:1 1 220px;max-width:360px}
.search input{border:0;background:transparent;color:var(--label);font:inherit;font-size:.9375rem;flex:1;min-width:0;outline:0}
.search input::placeholder{color:var(--placeholder)}
.search svg{width:16px;height:16px;color:var(--label-3);flex:none}
.docs{display:grid;margin-top:12px;border-radius:var(--radius-l);overflow:hidden;background:var(--card)}
.doc{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr);gap:2px 14px;padding:14px 16px;align-items:start}
.doc+.doc::before{content:"";position:absolute;left:16px;right:0;top:0;height:var(--hairline);background:var(--separator)}
.doc time{font-family:var(--font-mono);font-size:.8125rem;color:var(--label-2);font-variant-numeric:tabular-nums;padding-top:3px}
.doc h3{margin:0;font-size:1.0625rem;font-weight:600;line-height:1.3}
.doc h3 a{color:var(--label)} .doc h3 a:hover{color:var(--accent-ink)}
.doc p{margin:3px 0 0;font-size:.9375rem;color:var(--label-2);max-width:none}
.doc .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.doc .lock{color:var(--label-3);font-size:.75rem;display:inline-flex;align-items:center;gap:4px}
.doc .lock svg{width:12px;height:12px}
@media (max-width:480px){.doc{grid-template-columns:1fr} .doc time{padding-top:0}}
.empty{padding:28px 16px;text-align:center;color:var(--label-2)}

/* notas e avisos */
.note{display:flex;gap:10px;align-items:flex-start;background:var(--card);border-radius:var(--radius-m);padding:12px 14px;margin-top:12px;font-size:.9375rem;color:var(--label-2)}
.note svg{width:18px;height:18px;flex:none;color:var(--accent-ink);margin-top:1px}
.note p{margin:0;max-width:none}

/* página Sobre: texto corrido em cards, tabela simples */
.prose{background:var(--card);border-radius:var(--radius-l);padding:18px 20px;margin-top:12px}
.prose h3:first-child{margin-top:0}
.prose p,.prose li{color:var(--label);font-size:1rem;line-height:1.5}
@media (min-width:768px){.prose p,.prose li{font-size:.9375rem}}
.prose .small{color:var(--label-2)}
table{width:100%;border-collapse:collapse;margin-top:12px;background:var(--card);border-radius:var(--radius-l);overflow:hidden;font-size:.9375rem}
th,td{text-align:left;padding:11px 14px;vertical-align:top}
th{font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--label-2);font-weight:600;background:var(--card-2)}
tr+tr td{box-shadow:inset 0 var(--hairline) 0 var(--separator)}
td.id{font-family:var(--font-rounded);font-weight:600;white-space:nowrap;color:var(--label-2)}
.tbl{overflow-x:auto;margin-top:12px;border-radius:var(--radius-l)} .tbl table{margin-top:0}

/* rodapé */
.foot{margin-top:40px;padding:20px 4px 0;font-size:.8125rem;color:var(--label-2);display:grid;gap:10px}
.foot .links{display:flex;flex-wrap:wrap;gap:4px 16px}
.foot .links a{color:var(--label-2)} .foot .links a:hover{color:var(--label)}
.foot p{margin:0;max-width:none}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media print{.top,.tabbar,.themebtn{display:none} body{padding:0;background:#fff;color:#000}}