/* 8.31 App designs the owner picks on Home (js/theme.js, js/themepick.js, meta/theme).
   html.arch = any of the new designs (shared architectural look); html[data-theme="shoji"] = 173 Shoji Grid,
   html[data-theme="courtyard"] = 150 Courtyard Plan; 8.31.4: racks = 180 Server Room Racks, nalukettu = 174 Kerala Nalukettu,
   foundation = 170 Foundation Plan, ceiling = 160 Acoustic Ceiling Tiles, container = 161 Container Modules. Nothing here changes what a screen does, only how it looks.
   Without data-theme (or 'classic') none of this applies: the original design (styles.css). Both designs are light. */

html.arch{
  --navy:#1A2F6B; --navy-2:#2443A3; --navy-3:#2C4FB0;
  --ink:#14214A; --ink-2:#46526F; --ink-3:#7A849D; --line:#D3D9E8;
  --sun:#2443A3; --sun-soft:#E8EDF9; --sun-ink:#FFFFFF;
  --ok:#14805A; --ok-soft:#E1F3EA; --bad:#CF3B2C; --bad-soft:#FBE7E4; --warn:#B9790F; --warn-soft:#FBF0DA; --info:#2443A3; --info-soft:#E8EDF9;
  --lunch:#D9852F; --lunch-soft:#FBEBDB; --tea:#C9A227; --tea-soft:#F8F0D2;
  --gold:#B8905A; --live:#D2392B;
  --frame:#1A2F6B; --fw:1.5px;
  --r-lg:2px; --r:2px; --r-sm:2px;
  color-scheme:light;
}
html[data-theme="shoji"]{ --bg:#F7F3EA; --surface:#FFFDF8; --line:#DCD4C3; --timber:#C9BCA3; --fw:2px }
html[data-theme="courtyard"]{ --bg:#F4F7FC; --surface:#FFFFFF; --line:#D6DEEE; --grid:#E1E8F5 }

html.arch body{background-color:var(--bg);color:var(--ink)}
/* courtyard: blueprint grid paper; shoji: very fine paper-screen lattice */
html[data-theme="courtyard"] body{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;background-attachment:fixed}
html[data-theme="shoji"] body{background-image:linear-gradient(rgba(201,188,163,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(201,188,163,.22) 1px,transparent 1px);background-size:44px 66px;background-attachment:fixed}

/* ---------- square corners everywhere a box is drawn ---------- */
html.arch :is(.card,.kpi,.tile,.btn,.chip,.seg,.seg button,.input,.search,.icon-btn,.sheet,.tag,.toast,.nbanner,.hero,.punch-done,.mode-chip,.brk-btn,
  .lr,.lr-clock,.lr-leg,.lr-flag,.lr-p,.lr-more,.lr-cta,.lr-live,.la-open,.la-hero,.la-tile,.la-tile .ic,.la-row,.la-cal,.la-pill,.pd-card,.pd-hero,.pd-n,
  .sck,.sck-it,.sck-week i,.ntask,.ntask-it,.ntask-bell,.wkh,.wk-hero,.wkb,.wkh-btn,.wkh-stats div,.wkh-timer,.tile .ti,.upd-card,.welcome-card,.boot-help,
  .install-card,.ver-badge,.req-count,.stat-strip div,.thm-opt,.item,.list,.dwr-card,.sal-card,.rule-card,.vf-box,.vf-modal){border-radius:2px}
html.arch .sheet{border-radius:0}
html.arch .avatar{border-radius:2px}
html.arch .lr-av,html.arch .lr-av .avatar,html.arch .la-av{border-radius:50%}

/* ---------- type: uppercase, spaced labels like a drawing title block ---------- */
html.arch .topbar h1{text-transform:uppercase;font-weight:800;letter-spacing:0;color:var(--navy)}
html.arch .section-h{position:relative;margin:24px 0 10px;padding-bottom:8px}
html.arch .section-h h2{font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
html.arch .section-h::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;pointer-events:none}
/* shoji: a ruler of timber ticks under every heading; courtyard: a plan wall with door openings */
html[data-theme="shoji"] .section-h::after{background:linear-gradient(var(--navy),var(--navy)) 0 100%/42px 2px no-repeat,repeating-linear-gradient(90deg,var(--timber) 0 1px,transparent 1px 9px) 0 100%/100% 4px no-repeat}
html[data-theme="courtyard"] .section-h::after{height:12px;bottom:-4px;background:
  radial-gradient(circle at 0 0,transparent 9px,var(--navy) 9px 9.8px,transparent 10.5px) 36px 2px/11px 11px no-repeat,
  linear-gradient(var(--navy),var(--navy)) 0 0/36px 2px no-repeat,linear-gradient(var(--navy),var(--navy)) 58px 0/calc(100% - 58px) 2px no-repeat}
html.arch .section-h a,html.arch .section-h button.link,html.arch .link-btn{color:var(--navy-2);font-weight:700}
html.arch .card h3{color:var(--navy)}

/* ---------- boxes ---------- */
html.arch .card,html.arch .kpi,html.arch .tile,html.arch .list,html.arch .la-hero,html.arch .pd-card,html.arch .la-row,html.arch .install-card{background:var(--surface);border:var(--fw) solid var(--frame);box-shadow:none}
html.arch .list{overflow:hidden}
html.arch .item{border-bottom-color:var(--line)}
html.arch .kpi b,html.arch .tile b{color:var(--navy)}
html.arch .kpi span,html.arch .tile span{text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;font-weight:700}
html.arch .tile .ti{background:var(--sun-soft);color:var(--navy-2)}
html.arch .tag{border-radius:2px;text-transform:uppercase;letter-spacing:.06em;font-size:.66rem;padding:3px 7px}
/* courtyard: each box on a page is a numbered room (R-01, R-02 …) */
html[data-theme="courtyard"] .page{counter-reset:room}
html[data-theme="courtyard"] .page > .card,html[data-theme="courtyard"] .page > .list{position:relative;counter-increment:room}
html[data-theme="courtyard"] .page > .card::before,html[data-theme="courtyard"] .page > .list::before{content:"R-" counter(room,decimal-leading-zero);position:absolute;top:0;right:0;padding:1px 6px;background:var(--navy);color:#fff;font:800 .58rem/1.5 "Plus Jakarta Sans",sans-serif;letter-spacing:.1em;z-index:1}
/* shoji: a timber frame inside each box */
html[data-theme="shoji"] .page > .card{box-shadow:inset 0 0 0 4px var(--surface),inset 0 0 0 5px var(--timber)}

/* ---------- buttons and inputs ---------- */
html.arch .btn{background:var(--navy-2);color:#fff;letter-spacing:.02em}
html.arch .btn.sun{background:var(--navy-2);color:#fff}
html.arch .btn.ghost{background:var(--surface);color:var(--navy);border:var(--fw) solid var(--frame)}
html.arch .btn.ok{background:var(--ok)}html.arch .btn.bad{background:var(--bad)}html.arch .btn.warn{background:var(--warn)}
html.arch .icon-btn{background:var(--surface);border:1.5px solid var(--frame);color:var(--navy)}
html.arch .icon-btn.plain{border:0;background:transparent}
html.arch .chip{background:var(--surface);border:1.5px solid var(--line);color:var(--ink-2)}
html.arch .chip[aria-pressed="true"]{background:var(--navy-2);border-color:var(--navy-2);color:#fff}
html.arch .seg{background:var(--surface);border:1.5px solid var(--frame);padding:0;gap:0}
html.arch .seg button{border-radius:0;color:var(--ink-2)}
html.arch .seg button+button{border-left:1px solid var(--line)}
html.arch .seg button[aria-pressed="true"]{background:var(--navy-2);color:#fff}
html.arch :is(.input,select.input,textarea.input){background:var(--surface);border:1.5px solid var(--line);border-radius:2px}
html.arch :is(.input,select.input,textarea.input):focus{border-color:var(--navy-2);outline:0;box-shadow:0 0 0 3px rgba(36,67,163,.14)}
html.arch label.f > span:first-child,html.arch label.f{color:var(--ink-2)}
html.arch .toast{background:var(--navy);color:#fff}

/* ---------- top bar and bottom tabs / side menu ---------- */
html.arch .page .topbar{background:var(--bg);box-shadow:0 calc(-1 * env(safe-area-inset-top,0px)) 0 0 var(--bg)}
html.arch body.scrolled .page .topbar{border-bottom:var(--fw) solid var(--frame)}
html.arch .nav{background:var(--surface);border-top:var(--fw) solid var(--frame)}
html.arch .nav button{color:var(--ink-3);border-radius:0}
html.arch .nav button[aria-current="page"]{color:var(--navy-2)}
html.arch .nav button[aria-current="page"] svg{color:var(--navy-2)}
html.arch .nav button[aria-current="page"]::before{content:"";position:absolute;top:-7px;left:22%;right:22%;height:3px;background:var(--navy-2)}
html.arch .nav .dot{border-radius:2px;background:var(--live)}
@media (min-width:960px), (min-width:600px) and (min-height:500px){
  html.arch .nav{border-top:0;border-right:var(--fw) solid var(--frame)}
  html.arch .nav button[aria-current="page"]{background:var(--navy-2);color:#fff}
  html.arch .nav button[aria-current="page"] svg{color:#fff}
  html.arch .nav button[aria-current="page"]::before{display:none}
  html.arch .nav button:not([aria-current="page"]):hover{background:var(--sun-soft)}
  html.arch .hero{margin-top:16px}
}

/* ---------- Home header (was navy): now the drawing's title block ---------- */
html.arch .hero{background:var(--surface);color:var(--ink);border:var(--fw) solid var(--frame);border-width:0 0 var(--fw);box-shadow:none}
html.arch .hero::before,html.arch .hero::after{display:none}
@media (min-width:960px), (min-width:600px) and (min-height:500px){ html.arch .hero{border-width:var(--fw)} }
html.arch .hero .axn-logo > path{fill:#1F4E92}
html.arch .hero .hi{color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:700}
html.arch .hero .name{color:var(--navy);text-transform:uppercase;font-size:1.45rem}
html.arch .hero .meta{color:var(--ink-2)}
html.arch .hero .icon-btn{background:var(--surface);border-color:var(--frame);color:var(--navy)}
html.arch .hero .logout-btn svg,html.arch .hero .icon-btn svg{color:var(--navy)}
html.arch .stat-strip{gap:0;border:var(--fw) solid var(--frame);background:var(--surface)}
html.arch .stat-strip div{background:transparent;border:0;border-radius:0;padding:12px 6px 10px;text-align:left}
html.arch .stat-strip div+div{border-left:1px solid var(--frame)}
html.arch .stat-strip b{color:var(--navy);font-size:1.45rem}
html.arch .stat-strip b small{color:var(--ink-3)!important}
html.arch .stat-strip span{color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;font-size:.6rem;font-weight:800}
html.arch .stat-strip .accent{background:var(--navy-2)}
html.arch .stat-strip .accent b,html.arch .stat-strip .accent span,html.arch .stat-strip .accent b small{color:#fff!important}
/* shoji: the first number is the big window of the lattice */
html[data-theme="shoji"] .stat-strip{grid-template-columns:1.5fr 1fr 1fr 1fr}
html[data-theme="shoji"] .stat-strip .accent b{font-size:1.9rem}
html[data-theme="shoji"] .hero{background:var(--surface) linear-gradient(90deg,transparent calc(100% - 1px),rgba(201,188,163,.35) 0) 0 0/33.33% 100%}
/* courtyard: header sits on the grid with a door swing under the title */
html[data-theme="courtyard"] .hero{background:rgba(255,255,255,.92)}
html[data-theme="courtyard"] .stat-strip div::before{content:"R-0" counter(sroom);counter-increment:sroom;display:block;font-size:.55rem;font-weight:800;letter-spacing:.12em;color:var(--ink-3);margin-bottom:2px}
html[data-theme="courtyard"] .stat-strip{counter-reset:sroom}
html[data-theme="courtyard"] .stat-strip .accent::before{color:rgba(255,255,255,.7)}

/* check-in on the staff Home (inside the header) */
html.arch .clock{color:var(--navy)}
html.arch .clock-date{color:var(--ink-3)}
html.arch .orbit-btn{background:var(--navy-2);color:#fff;box-shadow:0 0 0 6px var(--surface),0 0 0 8px var(--navy-2)}
html.arch .orbit-btn .ring{border-color:rgba(36,67,163,.4)}
html.arch .orbit-btn .ring::after{background:var(--live);box-shadow:0 0 0 4px rgba(210,57,43,.18)}
html.arch .orbit-btn.out{background:var(--surface);color:var(--navy);box-shadow:0 0 0 6px var(--surface),0 0 0 8px var(--navy)}
html.arch .orbit-btn.out .ring{border-color:rgba(26,47,107,.35)}
html.arch .orbit-btn.out .ring::after{background:var(--navy)}
html.arch .orbit-btn.brk{background:var(--warn);color:#fff}
html.arch .punch-done{background:var(--sun-soft);border:var(--fw) solid var(--frame)}
html.arch .punch-done p{color:var(--ink-2)}
html.arch .mode-chip{background:var(--sun-soft);border-color:var(--line);color:var(--navy)}
html.arch .brk-btn{background:var(--surface);border:1.5px solid var(--frame);color:var(--navy)}
html.arch .hero-att{border-radius:0}

/* ---------- Live report (was the dark "control room") ---------- */
html.arch .lr{background:var(--surface);color:var(--ink);border:var(--fw) solid var(--frame);box-shadow:none}
html.arch .lr::after{display:none}
html.arch .lr-kicker,html.arch .lr-sub{color:var(--ink-3)}
html.arch .lr-live{background:transparent;color:var(--live);padding:0}
html.arch .lr-live i{background:var(--live);animation:archPulse 1.6s infinite}
html.arch .lr-live.off{color:var(--ink-3)}html.arch .lr-live.off i{background:var(--ink-3);animation:none}
@keyframes archPulse{0%{box-shadow:0 0 0 0 rgba(210,57,43,.5)}70%{box-shadow:0 0 0 8px rgba(210,57,43,0)}100%{box-shadow:0 0 0 0 rgba(210,57,43,0)}}
html.arch .lr-title{color:var(--navy);text-transform:uppercase}
html.arch .lr-clock{background:var(--surface);border:1.5px solid var(--frame);color:var(--navy)}
html.arch .lr-ring{filter:none}
html.arch .lr-ring svg > circle{stroke:#E3E8F3}
html.arch .lr-mid b{color:var(--navy)}
html.arch .lr-mid span{color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;font-size:.62rem}
html.arch .lr-leg span{color:var(--ink-2)}
html.arch .lr-leg b{color:var(--navy)}
html.arch .lr-leg i{border-radius:0}
html.arch .lr-leg em{background:#E8ECF5}
html.arch .lr-leg:hover,html.arch .lr-leg:focus-visible{background:var(--sun-soft)}
html.arch .lr-meter{color:var(--ink-3)}
html.arch .lr-meter em{background:#E8ECF5;border-radius:0}
html.arch .lr-meter em u{background:var(--navy-2);border-radius:0}
html.arch .lr-flag{background:var(--surface);border:1.5px solid var(--line);color:var(--ink-2)}
html.arch .lr-flag b{color:var(--navy)}
html.arch .lr-p{background:var(--surface);border:1.5px solid var(--line)}
html.arch .lr-pn{color:var(--navy)}
html.arch .lr-ps b{color:var(--ink-2)}
html.arch .lr-av{box-shadow:none}
html.arch .lr-av .avatar{border-color:var(--surface)}
html.arch .lr-more{border:1.5px dashed var(--frame);color:var(--navy)}
html.arch .lr-cta{background:var(--navy-2);color:#fff;box-shadow:none;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem}
html.arch .lr-wait{color:var(--ink-3)}
/* shoji: the live report is a paper screen in a timber lattice */
html[data-theme="shoji"] .lr{background-image:repeating-linear-gradient(90deg,transparent 0 47px,rgba(201,188,163,.28) 47px 48px),repeating-linear-gradient(0deg,transparent 0 71px,rgba(201,188,163,.28) 71px 72px)}
/* courtyard: the ring sits in the open court */
html[data-theme="courtyard"] .lr-ring{background:#fff;outline:1.5px solid var(--frame);outline-offset:8px}
html[data-theme="courtyard"] .lr-ring::after{content:"OPEN COURT";white-space:nowrap;position:absolute;left:50%;top:-24px;transform:translateX(-50%);font-size:.55rem;font-weight:800;letter-spacing:.16em;color:var(--ink-3);background:var(--surface);padding:0 6px}
html[data-theme="courtyard"] .lr-body{margin-top:26px}

/* ---------- other Home cards that were dark or pastel ---------- */
html.arch .pd-hero{background:var(--navy-2)}
html.arch .la-open{background:var(--navy-2);border:0}
html.arch .la-tile{border:1.5px solid var(--frame);box-shadow:none}
html.arch .la-tile[aria-pressed="true"]{background:var(--navy-2)!important;border-color:var(--navy-2)}
html.arch .la-tile .ic{border-radius:0}
html.arch .la-row{border-width:1.5px}
html.arch .pd-n{border-radius:2px}
html.arch .ntask{background:var(--navy-2);box-shadow:none}
html.arch .ntask-it{background:rgba(255,255,255,.12)}
html.arch .sck{--sk1:var(--surface);--sk2:var(--surface);--sk3:var(--surface);--skink:var(--ink);--skmut:var(--ink-3);--skacc:var(--navy-2);border:var(--fw) solid var(--frame);box-shadow:none}
html.arch .sck::before,html.arch .sck::after{display:none}
html.arch .sck-done{--skacc:var(--ok)}html.arch .sck-hurry{--skacc:var(--warn)}html.arch .sck-missed{--skacc:var(--bad)}
html.arch .sck-it{background:var(--bg);border:1px solid var(--line)}
html.arch .sck-box{border-radius:2px}
html.arch .sck-ring{border-radius:2px}
html.arch .sck-ring b{border-radius:0}
html.arch .wkh,html.arch .wk-hero,html.arch .wkb{background:var(--navy);border:0;box-shadow:none}
html.arch .wkh.on,html.arch .wk-hero.on{background:var(--navy-2)}
html.arch .wkh::after,html.arch .wk-hero::after,html.arch .wkb::after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 24px)}
html.arch .wkh-btn.go{background:#fff;color:var(--navy);box-shadow:none}
html.arch .wkh-btn.fin{background:var(--gold);color:#fff;box-shadow:none}
html.arch .wkh-ring span{background:rgba(255,255,255,.14)}
html.arch .nbanner{background:var(--navy);border-radius:2px}
html.arch .req-list .item{border-left-color:var(--navy-2)}
html.arch .ver-badge{border-color:var(--frame);color:var(--navy)}

/* ---------- sheets (pop-ups) ---------- */
html.arch .sheet{border-top:4px solid var(--navy-2)}
@media (min-width:960px), (min-width:600px) and (min-height:500px){ html.arch .sheet{border:var(--fw) solid var(--frame);border-top-width:4px} }
html.arch .sheet-head h3{text-transform:uppercase;letter-spacing:.04em;color:var(--navy)}

/* ---------- sign-in screen ---------- */
html.arch .auth{background:var(--bg);color:var(--ink)}
html.arch .auth::before,html.arch .auth::after{display:none}
html.arch .auth .axn-logo > path{fill:#1F4E92}
html.arch .auth h1{color:var(--navy);text-transform:uppercase;letter-spacing:-.01em}
html.arch .auth p.lead{color:var(--ink-2)}
html.arch .auth .switch{color:var(--navy-2)}
html.arch .auth .card{border:var(--fw) solid var(--frame)}
html[data-theme="courtyard"] .auth{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
html[data-theme="shoji"] .auth{background-image:linear-gradient(rgba(201,188,163,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(201,188,163,.3) 1px,transparent 1px);background-size:44px 66px}
html.arch .boot{background:var(--bg)}
html.arch .boot-orbit{border-color:rgba(36,67,163,.3)}html.arch .boot-orbit span{background:var(--navy-2)}

/* ---------- the owner's choice on Home (js/themepick.js); shown in every design ---------- */
.thm-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.thm-opt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 8px 10px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);text-align:left;color:var(--ink)}
.thm-opt.on{border-color:var(--navy-2,#3A6FE0);box-shadow:0 0 0 2px var(--navy-2,#3A6FE0)}
.thm-prev{display:block;width:100%;margin-bottom:6px}.thm-prev svg,.thm-big svg{display:block;width:100%;height:auto;border:1px solid var(--line)}
.thm-no{position:absolute;top:12px;left:12px;background:#1A2F6B;color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.08em;padding:1px 6px}
.thm-opt b{font-size:.92rem}.thm-opt small{display:flex;align-items:center;gap:4px;font-size:.72rem;color:var(--ink-3);font-weight:600}
.thm-opt.on small{color:var(--ok);font-weight:800}.thm-opt small svg{width:14px;height:14px}
.thm-big{max-width:360px;margin:0 auto 8px}
@media (min-width:960px), (min-width:600px) and (min-height:500px){ .thm-opts{grid-template-columns:repeat(2,minmax(0,260px))} }

/* ---------- details found on the screens ---------- */
html.arch .pd-n{background:var(--sun-soft);color:var(--navy-2)}
html.arch .pd-n:not(.sun):not(.bad):not(.info):not(.ok):not(.warn){background:var(--sun-soft);color:var(--navy)}
html.arch .co-pick{border:var(--fw) solid var(--frame);border-radius:2px;box-shadow:none}
html.arch .co-pick-i{border-radius:0;background:var(--navy-2);color:#fff}
html.arch .wkb-invite{border:1.5px dashed var(--frame);border-radius:2px;background:var(--surface)}
html.arch .wkb-invite > svg{color:var(--navy-2)}
html.arch .wkb-invite [class*="ic"],html.arch .wkb-invite > span:first-child{border-radius:0}
html.arch .hero .icon-btn.acc-hbtn{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:none}
html.arch .hero .icon-btn.mz-hbtn{background:var(--navy);border-color:var(--navy);box-shadow:none}
html.arch .mz-hbtn span{text-shadow:none}
html.arch .card .card,html.arch .card .list{box-shadow:none}

/* ---------- 173 Shoji Grid: the lattice window ---------- */
/* the four numbers as in the sample: one big window on the left, three panes stacked on the right */
html[data-theme="shoji"] .stat-strip{grid-template-columns:1.25fr 1fr;grid-template-rows:repeat(3,auto)}
html[data-theme="shoji"] .stat-strip .accent{grid-row:1 / 4;display:flex;flex-direction:column;justify-content:flex-end;padding:14px 14px 12px;background:var(--navy-2) repeating-linear-gradient(90deg,transparent 0 33px,rgba(255,255,255,.08) 33px 34px)}
html[data-theme="shoji"] .stat-strip .accent b{font-size:2.6rem;line-height:1}
html[data-theme="shoji"] .stat-strip div:not(.accent){display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 12px;border-left:var(--fw) solid var(--frame)}
html[data-theme="shoji"] .stat-strip div:nth-child(n+3){border-top:1px solid var(--frame)}
html[data-theme="shoji"] .stat-strip div:not(.accent) b{order:2;font-size:1.35rem}
html[data-theme="shoji"] .stat-strip div:not(.accent) span{order:1}
html[data-theme="shoji"] .hero{background-image:repeating-linear-gradient(90deg,transparent 0 63px,rgba(201,188,163,.35) 63px 64px)}
html[data-theme="shoji"] .hero-brand{padding-bottom:12px;border-bottom:1px solid var(--timber)}
html[data-theme="shoji"] .lr-leg i,html[data-theme="shoji"] .la-tile .ic{outline:1px solid var(--timber);outline-offset:1px}
html[data-theme="shoji"] .tile{box-shadow:inset 0 -4px 0 var(--sun-soft)}
html[data-theme="shoji"] .nav{background-image:repeating-linear-gradient(90deg,transparent 0 63px,rgba(201,188,163,.3) 63px 64px)}
html[data-theme="shoji"] .btn{box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}

/* ---------- 150 Courtyard Plan: rooms around an open court ---------- */
/* a wall with door openings drawn under the header */
html[data-theme="courtyard"] .hero{position:relative;border-bottom:0;padding-bottom:34px}
html[data-theme="courtyard"] .hero::after{display:block;content:"";position:absolute;left:0;right:0;bottom:0;top:auto;width:auto;height:18px;border:0;border-radius:0;background:
  radial-gradient(circle at 0 0,transparent 13px,var(--navy) 13px 14px,transparent 15px) 64px 3px/16px 16px no-repeat,
  radial-gradient(circle at 0 0,transparent 13px,var(--navy) 13px 14px,transparent 15px) calc(50% + 8px) 3px/16px 16px no-repeat,
  linear-gradient(var(--navy),var(--navy)) 0 0/64px 3px no-repeat,linear-gradient(var(--navy),var(--navy)) 80px 0/calc(50% - 72px) 3px no-repeat,
  linear-gradient(var(--navy),var(--navy)) right 0 top 0/calc(50% - 24px) 3px no-repeat}
html[data-theme="courtyard"] .stat-strip div:not(.accent){background:var(--surface)}
html[data-theme="courtyard"] .tile{position:relative}
html[data-theme="courtyard"] .tile::after{content:"";position:absolute;right:8px;bottom:8px;width:16px;height:16px;border-top:1px dashed var(--ink-3);border-left:1.5px solid var(--navy);border-radius:16px 0 0 0;opacity:.6}
html[data-theme="courtyard"] .lr{background-image:linear-gradient(rgba(225,232,245,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(225,232,245,.6) 1px,transparent 1px);background-size:12px 12px;background-color:#fff}
html[data-theme="courtyard"] .item:hover{background:rgba(36,67,163,.04)}
html.arch .wkb-invite .wk-ic{--c:var(--navy-2)!important;border-radius:0}

/* =====================================================================================================
   8.31.4: five more designs (same shared html.arch look above, each with its own colours and drawing)
   ===================================================================================================== */

/* ---------- 180 Server Room Racks: every box is a rack unit (U-numbers on a navy rail, blue status lights) ---------- */
html[data-theme="racks"]{ --bg:#EDF0F5; --surface:#FFFFFF; --line:#D5DBE6; --rack:#14214A; --led:#3C7BFF; --fw:1.5px }
html[data-theme="racks"] body,html[data-theme="racks"] .auth{background-image:radial-gradient(circle,rgba(26,47,107,.09) 1.2px,transparent 1.6px);background-size:8px 8px}
html[data-theme="racks"] .page{counter-reset:unit}
html[data-theme="racks"] .page > :is(.card,.list),html[data-theme="racks"] .lr,html[data-theme="racks"] .sck{position:relative;counter-increment:unit;border-left:22px solid var(--rack)}
html[data-theme="racks"] .page > :is(.card,.list)::before,html[data-theme="racks"] .lr::before{content:counter(unit,decimal-leading-zero) "U";position:absolute;left:-22px;top:6px;width:22px;text-align:center;color:#9FB0D8;font:800 .5rem/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.02em;z-index:2}
html[data-theme="racks"] .page > :is(.card,.list)::after,html[data-theme="racks"] .lr-top::after{content:"";position:absolute;top:7px;right:8px;width:16px;height:5px;pointer-events:none;background:radial-gradient(circle,var(--led) 2px,transparent 2.5px) 0 0/8px 5px repeat-x;filter:drop-shadow(0 0 2px rgba(60,123,255,.7))}
html[data-theme="racks"] .lr-top{position:relative}
html[data-theme="racks"] .lr::before{left:-22px}
html[data-theme="racks"] .section-h::after{height:6px;background:radial-gradient(circle,var(--rack) 1.6px,transparent 2px) 0 50%/12px 6px repeat-x,linear-gradient(var(--line),var(--line)) 0 50%/100% 1px no-repeat}
/* the header is the rack's navy front with lights */
html[data-theme="racks"] .hero{background:var(--rack);color:#fff;border:0}
html[data-theme="racks"] .hero .axn-logo > path{fill:#FFFFFF}
html[data-theme="racks"] .hero .hi,html[data-theme="racks"] .hero .meta,html[data-theme="racks"] .hero .clock-date{color:#9FB0D8}
html[data-theme="racks"] .hero .name,html[data-theme="racks"] .hero .clock{color:#fff}
html[data-theme="racks"] .hero .icon-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
html[data-theme="racks"] .hero .icon-btn svg,html[data-theme="racks"] .hero .logout-btn svg{color:#fff}
html[data-theme="racks"] .hero .icon-btn.acc-hbtn{background:var(--gold);border-color:var(--gold)}
html[data-theme="racks"] .hero .icon-btn.mz-hbtn{background:var(--navy-2);border-color:var(--navy-2)}
html[data-theme="racks"] .stat-strip{background:transparent;border:0;gap:6px}
html[data-theme="racks"] .stat-strip div{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)!important;padding:14px 8px 10px}
html[data-theme="racks"] .stat-strip div::after{content:"";position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--led);box-shadow:0 0 6px var(--led)}
html[data-theme="racks"] .stat-strip div:nth-child(3)::after{background:var(--live);box-shadow:0 0 6px var(--live)}
html[data-theme="racks"] .stat-strip b{color:#fff}
html[data-theme="racks"] .stat-strip span,html[data-theme="racks"] .stat-strip b small{color:#9FB0D8!important}
html[data-theme="racks"] .stat-strip .accent{background:var(--navy-2)}
html[data-theme="racks"] .hero .mode-chip,html[data-theme="racks"] .hero .brk-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
html[data-theme="racks"] .hero .punch-done{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
html[data-theme="racks"] .hero .punch-done p{color:#9FB0D8}
html[data-theme="racks"] .orbit-btn{box-shadow:0 0 0 6px var(--rack),0 0 0 8px var(--led)}
html[data-theme="racks"] .orbit-btn.out{box-shadow:0 0 0 6px var(--rack),0 0 0 8px #fff}
html[data-theme="racks"] .orbit-btn .ring{border-color:rgba(60,123,255,.5)}
html[data-theme="racks"] .nav{border-top:3px solid var(--rack)}
@media (min-width:960px), (min-width:600px) and (min-height:500px){ html[data-theme="racks"] .nav{border-top:0;border-right:6px solid var(--rack)} }
html[data-theme="racks"] .lr-ring{filter:drop-shadow(0 0 8px rgba(60,123,255,.25))}

/* ---------- 174 Kerala Nalukettu: teak frames, terracotta tiled roof, warm laterite floor ---------- */
html[data-theme="nalukettu"]{ --bg:#F5EEE3; --surface:#FFFBF4; --line:#E3D5BE; --frame:#5B3A1E; --teak:#5B3A1E; --roof:#B65A3A; --fw:2px }
html[data-theme="nalukettu"] body,html[data-theme="nalukettu"] .auth{background-image:radial-gradient(rgba(182,90,58,.07) 1px,transparent 1.4px),radial-gradient(rgba(91,58,30,.05) 1px,transparent 1.4px);background-size:14px 14px,22px 22px;background-position:0 0,7px 11px}
/* a tiled roof over the header */
html[data-theme="nalukettu"] .hero{padding-top:30px}
html[data-theme="nalukettu"] .hero::before{display:block;content:"";position:absolute;left:0;right:0;top:0;width:auto;height:16px;border:0;border-radius:0;
  background:repeating-linear-gradient(90deg,var(--roof) 0 10px,#9C4A2E 10px 11px),var(--roof);clip-path:polygon(0 100%,4% 0,96% 0,100% 100%)}
html[data-theme="nalukettu"] .hero::after{display:block;content:"";position:absolute;left:0;right:0;top:16px;width:auto;height:3px;border:0;border-radius:0;background:var(--teak)}
html[data-theme="nalukettu"] .hero-brand{position:relative;z-index:1}
html[data-theme="nalukettu"] .page > :is(.card,.list),html[data-theme="nalukettu"] .lr,html[data-theme="nalukettu"] .sck{box-shadow:inset 0 0 0 3px var(--surface),inset 0 0 0 4px rgba(184,144,90,.55)}
html[data-theme="nalukettu"] .section-h::after{height:2px;background:var(--teak)}
html[data-theme="nalukettu"] .section-h::before{content:"";position:absolute;left:0;bottom:2px;width:30px;height:7px;background:var(--roof);clip-path:polygon(0 100%,50% 0,100% 100%)}
html[data-theme="nalukettu"] .section-h h2{color:var(--teak)}
html[data-theme="nalukettu"] .stat-strip div:not(.accent){border-top:4px solid var(--roof)}
html[data-theme="nalukettu"] .stat-strip .accent{background:var(--teak)}
html[data-theme="nalukettu"] .tile .ti,html[data-theme="nalukettu"] .co-pick-i{background:#F3E4D3;color:var(--teak)}
html[data-theme="nalukettu"] .lr-cta,html[data-theme="nalukettu"] .btn,html[data-theme="nalukettu"] .btn.sun{background:var(--teak)}
html[data-theme="nalukettu"] .btn.ghost{background:var(--surface);color:var(--teak)}
html[data-theme="nalukettu"] .chip[aria-pressed="true"],html[data-theme="nalukettu"] .seg button[aria-pressed="true"],html[data-theme="nalukettu"] .la-tile[aria-pressed="true"]{background:var(--teak)!important;border-color:var(--teak)}
html[data-theme="nalukettu"] .nav{border-top:3px solid var(--teak);box-shadow:0 -4px 0 -1px var(--roof)}
html[data-theme="nalukettu"] .nav button[aria-current="page"],html[data-theme="nalukettu"] .nav button[aria-current="page"] svg{color:var(--roof)}
html[data-theme="nalukettu"] .nav button[aria-current="page"]::before{background:var(--roof)}
@media (min-width:960px), (min-width:600px) and (min-height:500px){ html[data-theme="nalukettu"] .nav{border-top:0;box-shadow:none;border-right:3px solid var(--teak)} html[data-theme="nalukettu"] .nav button[aria-current="page"]{background:var(--teak);color:#fff} html[data-theme="nalukettu"] .nav button[aria-current="page"] svg{color:#fff} }
/* the live report's ring is the open court (nadumuttam) */
html[data-theme="nalukettu"] .lr-ring{background:#F3E4D3;outline:2px solid var(--teak);outline-offset:6px}

/* ---------- 170 Foundation Plan: grid lines A, B, C …, dashed footings under every box, pile caps at the corners ---------- */
html[data-theme="foundation"]{ --bg:#F6F8FB; --surface:#FFFFFF; --line:#D6DDE9; --axis:#9AA8C7 }
html[data-theme="foundation"] body,html[data-theme="foundation"] .auth{background-image:repeating-linear-gradient(90deg,transparent 0 119px,rgba(154,168,199,.35) 119px 120px),repeating-linear-gradient(0deg,transparent 0 119px,rgba(154,168,199,.35) 119px 120px)}
html[data-theme="foundation"] .page > :is(.card,.list),html[data-theme="foundation"] .lr,html[data-theme="foundation"] .sck{position:relative;outline:1.5px dashed var(--axis);outline-offset:5px;margin-top:18px;margin-bottom:18px;overflow:visible}
html[data-theme="foundation"] .page > :is(.card,.list)::after,html[data-theme="foundation"] .lr::before{content:"";display:block;position:absolute;inset:-9px;pointer-events:none;z-index:2;border:0;border-radius:0;width:auto;height:auto;
  background:linear-gradient(var(--navy),var(--navy)) 0 0/8px 8px no-repeat,linear-gradient(var(--navy),var(--navy)) 100% 0/8px 8px no-repeat,linear-gradient(var(--navy),var(--navy)) 0 100%/8px 8px no-repeat,linear-gradient(var(--navy),var(--navy)) 100% 100%/8px 8px no-repeat}
html[data-theme="foundation"] .page > .list{overflow:visible}
html[data-theme="foundation"] .page{counter-reset:axis}
html[data-theme="foundation"] .section-h{counter-increment:axis;padding-left:30px}
html[data-theme="foundation"] .section-h::before{content:counter(axis,upper-alpha);position:absolute;left:0;bottom:2px;width:22px;height:22px;border:1.5px solid var(--navy);border-radius:50%;display:grid;place-items:center;font:800 .7rem/1 "Plus Jakarta Sans",sans-serif;color:var(--navy);background:var(--surface)}
html[data-theme="foundation"] .section-h::after{left:30px;height:2px;background:repeating-linear-gradient(90deg,var(--axis) 0 12px,transparent 12px 15px,var(--axis) 15px 17px,transparent 17px 20px)}
html[data-theme="foundation"] .hero{outline:1.5px dashed var(--axis);outline-offset:-8px}
html[data-theme="foundation"] .stat-strip div{position:relative}
html[data-theme="foundation"] .stat-strip div::before{content:"";position:absolute;top:-5px;left:-5px;width:8px;height:8px;background:var(--navy)}
html[data-theme="foundation"] .stat-strip div:first-child::before{left:-4px}
html[data-theme="foundation"] .tile{outline:1px dashed var(--axis);outline-offset:4px}
html[data-theme="foundation"] .lr-ring{outline:1.5px dashed var(--axis);outline-offset:10px;border-radius:50%}

/* ---------- 160 Acoustic Ceiling Tiles: perforated 600 mm tiles on a suspended grid, numbers as light panels ---------- */
html[data-theme="ceiling"]{ --bg:#E3E7EE; --surface:#F8F9FB; --line:#D3D9E3; --tbar:#C6CDD9; --frame:#1A2F6B }
html[data-theme="ceiling"] body,html[data-theme="ceiling"] .auth{background-image:linear-gradient(var(--tbar) 3px,transparent 3px),linear-gradient(90deg,var(--tbar) 3px,transparent 3px),radial-gradient(circle,rgba(26,47,107,.11) .9px,transparent 1.3px);background-size:96px 96px,96px 96px,6px 6px}
html[data-theme="ceiling"] .page > :is(.card,.list),html[data-theme="ceiling"] .sck,html[data-theme="ceiling"] .tile,html[data-theme="ceiling"] .kpi{border:3px solid var(--tbar);box-shadow:inset 0 0 0 1px #fff}
html[data-theme="ceiling"] .page > .card{background-image:radial-gradient(circle,rgba(26,47,107,.06) .9px,transparent 1.3px);background-size:6px 6px}
/* numbers and the live report glow like light panels */
html[data-theme="ceiling"] .lr,html[data-theme="ceiling"] .stat-strip{border:3px solid var(--tbar);background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(36,67,163,.35),0 0 24px rgba(60,123,255,.16)}
html[data-theme="ceiling"] .stat-strip div+div{border-left:3px solid var(--tbar)}
html[data-theme="ceiling"] .stat-strip .accent{background:linear-gradient(180deg,#2B4CB4,#2443A3);box-shadow:inset 0 0 18px rgba(255,255,255,.18)}
html[data-theme="ceiling"] .hero{background:var(--surface);background-image:radial-gradient(circle,rgba(26,47,107,.07) .9px,transparent 1.3px);background-size:6px 6px;border-bottom:3px solid var(--tbar)}
html[data-theme="ceiling"] .section-h::after{height:4px;background:linear-gradient(var(--navy),var(--navy)) 0 0/40px 4px no-repeat,linear-gradient(var(--tbar),var(--tbar)) 0 0/100% 4px no-repeat}
html[data-theme="ceiling"] .lr-ring{border-radius:50%;box-shadow:0 0 30px rgba(60,123,255,.25)}
html[data-theme="ceiling"] .nav{border-top:3px solid var(--tbar)}
@media (min-width:960px), (min-width:600px) and (min-height:500px){ html[data-theme="ceiling"] .nav{border-top:0;border-right:3px solid var(--tbar)} }

/* ---------- 161 Container Modules: ribbed steel, corner castings, stencil codes ---------- */
html[data-theme="container"]{ --bg:#EEF1F5; --surface:#FFFFFF; --line:#D5DBE6; --rust:#C2562B; --cast:#0E1A40 }
html[data-theme="container"] body,html[data-theme="container"] .auth{background-image:repeating-linear-gradient(90deg,transparent 0 5px,rgba(26,47,107,.035) 5px 7px)}
html[data-theme="container"] .page{counter-reset:box}
html[data-theme="container"] .page > :is(.card,.list),html[data-theme="container"] .lr,html[data-theme="container"] .sck{position:relative;counter-increment:box;border-top:12px solid var(--navy);
  border-image:repeating-linear-gradient(90deg,var(--navy) 0 4px,#2C4FB0 4px 7px) 12 0 0 0 / 12px 0 0 0;border-image-outset:0;border-left:var(--fw) solid var(--frame);border-right:var(--fw) solid var(--frame);border-bottom:var(--fw) solid var(--frame)}
html[data-theme="container"] .page > :is(.card,.list)::before,html[data-theme="container"] .lr::before{content:"AXHU " counter(box,decimal-leading-zero) "31";position:absolute;top:-11px;right:10px;color:#fff;font:800 .55rem/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.12em;z-index:2}
html[data-theme="container"] .page > :is(.card,.list)::after,html[data-theme="container"] .lr::after{content:"";display:block;position:absolute;inset:-14px -3px -3px -3px;pointer-events:none;z-index:2;border:0;border-radius:0;width:auto;height:auto;opacity:1;mask:none;
  background:linear-gradient(var(--cast),var(--cast)) 0 0/9px 9px no-repeat,linear-gradient(var(--cast),var(--cast)) 100% 0/9px 9px no-repeat,linear-gradient(var(--cast),var(--cast)) 0 100%/9px 9px no-repeat,linear-gradient(var(--cast),var(--cast)) 100% 100%/9px 9px no-repeat}
html[data-theme="container"] .page > .list{overflow:visible}
html[data-theme="container"] .page > .list > :first-child{border-top:0}
html[data-theme="container"] .section-h::after{height:6px;background:repeating-linear-gradient(90deg,var(--navy) 0 3px,transparent 3px 6px)}
html[data-theme="container"] .stat-strip{gap:6px;border:0;background:transparent}
html[data-theme="container"] .stat-strip div{position:relative;border:0!important;color:#fff;background:repeating-linear-gradient(90deg,#2443A3 0 4px,#2C4FB0 4px 7px);padding:12px 8px 10px}
html[data-theme="container"] .stat-strip div:nth-child(2){background:repeating-linear-gradient(90deg,#1A2F6B 0 4px,#24397E 4px 7px)}
html[data-theme="container"] .stat-strip div:nth-child(3){background:repeating-linear-gradient(90deg,#C2562B 0 4px,#CF6236 4px 7px)}
html[data-theme="container"] .stat-strip div:nth-child(4){background:repeating-linear-gradient(90deg,#3A4A6B 0 4px,#45577C 4px 7px)}
html[data-theme="container"] .stat-strip div::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--cast),var(--cast)) 0 0/6px 6px no-repeat,linear-gradient(var(--cast),var(--cast)) 100% 0/6px 6px no-repeat,linear-gradient(var(--cast),var(--cast)) 0 100%/6px 6px no-repeat,linear-gradient(var(--cast),var(--cast)) 100% 100%/6px 6px no-repeat}
html[data-theme="container"] .stat-strip b,html[data-theme="container"] .stat-strip span,html[data-theme="container"] .stat-strip b small{color:#fff!important}
html[data-theme="container"] .hero{border-bottom:6px solid var(--rust)}
html[data-theme="container"] .tile .ti,html[data-theme="container"] .co-pick-i{background:var(--rust);color:#fff}
html[data-theme="container"] .nav{border-top:5px solid var(--navy);border-image:repeating-linear-gradient(90deg,var(--navy) 0 4px,#2C4FB0 4px 7px) 5 0 0 0}
@media (min-width:960px), (min-width:600px) and (min-height:500px){ html[data-theme="container"] .nav{border-top:0;border-image:none;border-right:4px solid var(--navy)} }

/* 8.32.4: App design is one Home button (like the company button); the small picture is the design in use */
.thm-pick .thm-pick-i{width:52px;height:36px;padding:0;overflow:hidden;background:var(--surface)}
.thm-pick .thm-pick-i svg{width:100%;height:100%;display:block}
html.arch .thm-pick .thm-pick-i{background:var(--surface);border:1px solid var(--line)}
.sheet .thm-opts{margin-bottom:4px}
.thm-pick b{white-space:normal}