:root:root:root:root{--or:#EA7707;--ff:'Chakra Petch',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;--ff2:var(--ff)}
.ttl,h2,header h1,label.f,button.b,nav .rail button{font-family:var(--ff2)!important}
header h1.brandh{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:700;letter-spacing:.03em;line-height:1}
header h1.brandh svg{display:block;flex:none}
header h1.brandh i{display:block;width:2px;height:22px;background:#EA7707}
button.b{color:#0F0D0B!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:6px}
nav .rail button.on{color:#fff}

/* ---- phone and overflow safety ---- */
html,body{overflow-x:hidden;max-width:100%}@supports (overflow:clip){html,body{overflow-x:clip}}
img,svg,video,canvas{max-width:100%}
.tile2,.mt,.box,.chip2,.card,.mn,.sb,.row,.g,.g2,.g3,.duo2{min-width:0}
.tile2 .sb,.tile2 .small,.tile2 .fv,.tile2 .note,.mt .sb,.box p,.box small,.note{overflow-wrap:anywhere}
td,th{overflow-wrap:break-word;word-break:normal}
td:first-child,th:first-child{white-space:nowrap}
.tile2 input,.tile2 select,.tile2 textarea,.box input,.box select,.box textarea{max-width:100%;min-width:0;box-sizing:border-box}
.tile2.spt>label.f,.tile2 label.f{white-space:normal;text-overflow:clip;overflow:visible;overflow-wrap:anywhere;line-height:1.25}
.mt .row b{white-space:nowrap}
.mt .row>div{min-width:0}
nav{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
@media(max-width:700px){
  main{padding-left:12px!important;padding-right:12px!important}
  .rail{width:max-content!important;min-width:100%;justify-content:flex-start!important;gap:2px}
  nav .rail button{padding:0 12px!important;flex:none;font-size:12.5px!important}
  header h1.brandh{font-size:17px;gap:9px}
  header h1.brandh svg{width:92px;height:auto}
  header h1.brandh i{height:18px}
  .tile2{padding-right:14px!important}
  .tile2.pj>label.f,.mt .nm{font-size:13px!important;letter-spacing:.03em!important;line-height:1.2}
  .tile2.pj>label.f{height:auto!important;min-height:35px;white-space:normal!important;padding-top:9px!important;padding-bottom:4px}
  .mt .nm{height:auto!important;min-height:24px;white-space:normal!important}
  .mt .mat{white-space:normal!important;line-height:1.4}
  .mt .row b{font-size:16px}
  .mt .row small{letter-spacing:.08em}
  .tile2.spt .duo2{grid-template-columns:1fr!important}
  .tile2.spt .sm2{font-size:17px!important}
  .tile2 input{font-size:16px}
  button.b{padding-left:14px;padding-right:14px}
  .acts,.pbar2{flex-wrap:wrap;gap:8px}
  .box{padding-left:14px;padding-right:14px}
  .g,.g2,.g3,.duo2{grid-template-columns:1fr!important}
  table{font-size:12px}
  .sc table{min-width:600px}
  header{padding:10px 14px!important;gap:2px 4px!important}
  header h1{flex:1 1 100%!important;margin-bottom:2px}
  header button,header label{padding:6px 10px!important;font-size:12px!important}
  .sc,.zoom{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:380px){
  nav .rail button{padding:0 9px!important;font-size:12px!important}
}

/* ---- brand surfaces: warm ink in dark mode, warm paper in light mode ---- */
/* ROKBOOK is built on dark surfaces everywhere, so it keeps its dark ink palette even when the phone is in light mode */
:root:root:root{--bg:#0F0D0B;--card:#1A1612;--bd:#2E2822;--fg:#F5F1EC;--mut:#A39B91;--inp:#241F1A;color-scheme:dark}
@media(prefers-color-scheme:dark){:root:root:root:not([data-theme=light]){--bg:#0F0D0B;--card:#1A1612;--bd:#2E2822;--fg:#F5F1EC;--mut:#A39B91;--inp:#241F1A}}
:root:root:root[data-theme=dark]{--bg:#0F0D0B;--card:#1A1612;--bd:#2E2822;--fg:#F5F1EC;--mut:#A39B91;--inp:#241F1A}
/* header and nav sit on a dark band in every theme, so their text must stay light */
header h1.brandh{color:#F5F1EC}
nav .rail button{color:#B8B0A6}
nav .rail button.on{color:#fff}