:root {
  color-scheme: dark;
  --bg:#000;
  --fg:#f5f5f0;
  --muted:#a9aaa4;
  --dim:#696b66;
  --line:rgba(245,245,240,.42);
  --line-soft:rgba(245,245,240,.17);
  --good:#9ec58c;
  --warn:#d3a13b;
  --bad:#c95e50;
  --panel:#050607;
  --pad:clamp(12px,1.35vmin,26px);
  /* Display-safe outer margin. This is intentionally a little larger than
     normal component padding so kiosk/full-screen overscan cannot trim text. */
  --safe-edge:clamp(18px,1.8vmin,34px);
  --gap:clamp(9px,1vmin,20px);
  --ui:"Arial Narrow","Aptos Narrow","Roboto Condensed","Helvetica Neue Condensed",Arial,sans-serif;
  --mono:"Cascadia Mono","SFMono-Regular","Roboto Mono",Consolas,monospace;
  --digit-h:240px;
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:var(--bg);color:var(--fg);overflow:hidden}
body{font-family:var(--ui);letter-spacing:.1em}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:48px 48px;opacity:.45
}

.app-shell{
  position:relative;z-index:1;width:100vw;height:100dvh;
  padding:max(var(--safe-edge),env(safe-area-inset-top)) max(var(--safe-edge),env(safe-area-inset-right)) max(var(--safe-edge),env(safe-area-inset-bottom)) max(var(--safe-edge),env(safe-area-inset-left));
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--gap);background:var(--bg);
  /* Non-layout inner frame makes the protected display boundary visible. */
  box-shadow:inset 0 0 0 1px var(--line-soft)
}

.top-strip{min-height:clamp(46px,6.2vh,82px);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:clamp(13px,1.35vmin,24px);letter-spacing:.13em}
.calendar-strip{display:flex;gap:clamp(10px,1.25vw,26px);align-items:center;white-space:nowrap;min-width:0}
.identity{color:var(--muted);font-size:.86em;letter-spacing:.18em;white-space:nowrap}
.header-actions{justify-self:end;display:flex;align-items:center;gap:clamp(10px,1vw,20px);min-width:0}
.seconds-strip{min-width:clamp(54px,5vw,88px);padding-left:clamp(10px,1vw,20px);border-left:1px solid var(--line);text-align:center;font-size:1.08em}
.view-tabs{display:flex;border-left:1px solid var(--line-soft)}
.view-tab,.settings-tab,.action-button{border:1px solid var(--line-soft);background:transparent;color:var(--muted);font-family:var(--mono);letter-spacing:.11em;text-transform:uppercase}
.view-tab{font-size:clamp(10px,.9vmin,15px);padding:clamp(7px,.75vmin,12px) clamp(9px,1vw,18px);border-left:0}
.view-tab.active,.settings-tab.active,.view-tab:hover,.settings-tab:hover,.action-button:hover{color:var(--fg);border-color:var(--line);background:rgba(255,255,255,.05)}

.view{display:none;min-height:0}
.view.active{display:grid}
.console-view{grid-template-rows:minmax(0,1.42fr) minmax(0,.76fr) minmax(0,.66fr);gap:var(--gap)}

.time-zone{position:relative;min-height:0;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.time-display{display:flex;align-items:center;justify-content:center;gap:calc(var(--digit-h)*.018);height:var(--digit-h);max-width:100%}
.digit{position:relative;width:calc(var(--digit-h)*.48);height:var(--digit-h);flex:0 0 auto}
.segment{position:absolute;background:var(--fg);opacity:.07;transition:opacity 100ms linear}
.segment.on{opacity:1}
.segment.h{left:11%;width:78%;height:10%;clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%)}
.segment.v{width:20%;height:42%;clip-path:polygon(50% 0,100% 7%,100% 93%,50% 100%,0 93%,0 7%)}
.segment.a{top:0}.segment.g{top:45%}.segment.d{bottom:0}.segment.f{left:0;top:5%}.segment.b{right:0;top:5%}.segment.e{left:0;bottom:5%}.segment.c{right:0;bottom:5%}
.colon{width:calc(var(--digit-h)*.13);height:var(--digit-h);position:relative;flex:0 0 auto}
.colon::before,.colon::after{content:"";position:absolute;left:50%;width:calc(var(--digit-h)*.075);height:calc(var(--digit-h)*.075);transform:translateX(-50%);background:var(--fg);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.colon::before{top:31%}.colon::after{bottom:31%}
.ampm{position:absolute;right:0;bottom:clamp(6px,.7vh,12px);font-family:var(--mono);color:var(--muted);font-size:clamp(12px,1.25vmin,22px);letter-spacing:.14em}

.teacher-zone{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:var(--gap);border-top:1px solid var(--line);padding-top:var(--gap)}
.period-grid{min-height:0;display:grid;grid-template-columns:1.25fr .75fr;gap:var(--gap)}
.period-primary,.period-remaining{min-width:0;display:grid;align-content:center;padding-right:var(--gap);border-right:1px solid var(--line-soft)}
.period-remaining{border-right:0;padding-right:0}
.eyebrow{display:block;font-family:var(--mono);color:var(--muted);font-size:clamp(11px,1.05vmin,18px);letter-spacing:.17em;margin-bottom:clamp(3px,.45vh,8px)}
.period-primary strong,.period-remaining strong,.comp-value{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-weight:500;letter-spacing:.045em}
.period-primary strong{font-size:clamp(30px,4.4vmin,70px)}
.period-remaining strong{font-size:clamp(34px,5.4vmin,86px)}
.subvalue{display:block;color:var(--muted);font-family:var(--mono);font-size:clamp(11px,1.08vmin,19px);letter-spacing:.075em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress-meta{display:flex;justify-content:space-between;gap:16px;margin-bottom:clamp(5px,.55vh,9px);font-family:var(--mono);color:var(--muted);font-size:clamp(10px,.95vmin,17px)}
.segment-progress{display:grid;grid-template-columns:repeat(var(--segment-count,20),1fr);gap:clamp(2px,.3vw,7px);width:100%}
.segment-progress i{display:block;height:clamp(10px,1.45vh,20px);border:1px solid var(--line-soft);background:transparent}
.segment-progress i.on{background:var(--fg);border-color:var(--fg)}
.segment-progress i.current{background:var(--good);border-color:var(--good)}

.complication-zone{min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);padding-top:var(--gap)}
.complication{min-width:0;display:grid;align-content:center;padding:0 clamp(10px,1.25vw,26px);border-right:1px solid var(--line-soft);overflow:hidden}
.complication:first-child{padding-left:clamp(7px,.65vw,16px)}.complication:last-child{padding-right:clamp(7px,.65vw,16px);border-right:0}
.comp-slot-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-family:var(--mono);font-size:clamp(10px,.95vmin,17px);color:var(--muted);letter-spacing:.16em;margin-bottom:clamp(4px,.5vh,8px)}
.comp-index{color:var(--dim)}
.comp-value{font-size:clamp(24px,3.6vmin,58px);line-height:1.05}
.comp-value.large{font-size:clamp(30px,4.7vmin,72px)}
.comp-detail{margin-top:clamp(3px,.45vh,7px);font-family:var(--mono);font-size:clamp(10px,1vmin,18px);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.weather-line{display:flex;align-items:center;gap:clamp(8px,.8vw,16px);min-width:0}
.weather-glyph{position:relative;width:clamp(34px,4.2vmin,62px);height:clamp(26px,3.3vmin,48px);flex:0 0 auto}
.weather-glyph::before,.weather-glyph::after{content:"";position:absolute}
.weather-glyph.sun::before{width:38%;aspect-ratio:1;border:2px solid currentColor;border-radius:50%;left:31%;top:25%}
.weather-glyph.sun::after{inset:4%;background:repeating-conic-gradient(from 0deg,currentColor 0 3deg,transparent 3deg 42deg);-webkit-mask:radial-gradient(circle,transparent 0 43%,#000 44% 100%);mask:radial-gradient(circle,transparent 0 43%,#000 44% 100%)}
.weather-glyph.cloud::before,.weather-glyph.rain::before{width:68%;height:38%;left:16%;bottom:13%;border:2px solid currentColor;border-radius:18px}
.weather-glyph.cloud::after,.weather-glyph.rain::after{width:34%;aspect-ratio:1;left:34%;top:14%;border:2px solid currentColor;border-radius:50%;background:var(--bg)}
.weather-glyph.rain{border-bottom:3px dotted currentColor}
.weather-glyph.mixed::before{width:38%;aspect-ratio:1;border:2px solid currentColor;border-radius:50%;right:4%;top:1%}
.weather-glyph.mixed::after{width:70%;height:40%;left:5%;bottom:8%;border:2px solid currentColor;border-radius:18px;background:var(--bg)}
.dual-value{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,18px)}
.dual-value span{display:grid;gap:2px;min-width:0}.dual-value b{font-family:var(--mono);font-size:clamp(9px,.85vmin,14px);font-weight:400;color:var(--muted)}.dual-value strong{font-family:var(--mono);font-size:clamp(17px,2.4vmin,38px);font-weight:500;white-space:nowrap}
.mini-progress{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-top:6px}.mini-progress i{height:clamp(7px,.9vh,12px);border:1px solid var(--line-soft)}.mini-progress i.on{background:var(--fg);border-color:var(--fg)}

.settings-view{grid-template-rows:auto minmax(0,1fr);gap:var(--gap);border-top:1px solid var(--line);padding-top:var(--gap)}
.settings-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.settings-tab{padding:clamp(10px,1vmin,16px);font-size:clamp(11px,1vmin,17px)}
.settings-panes{min-height:0}
.settings-pane{display:none;height:100%;min-height:0}
.settings-pane.active{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--gap)}
.settings-heading{border-bottom:1px solid var(--line-soft);padding-bottom:var(--gap)}
.settings-heading h1{margin:0;font-family:var(--mono);font-size:clamp(26px,3vmin,52px);font-weight:500;letter-spacing:.08em}
.settings-heading p{margin:clamp(5px,.7vh,10px) 0 0;color:var(--muted);font-family:var(--mono);font-size:clamp(11px,1.05vmin,18px);line-height:1.5;letter-spacing:.04em}
.slot-settings{min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);align-items:stretch}
.slot-card{min-width:0;border:1px solid var(--line-soft);padding:clamp(10px,1.1vmin,20px);display:grid;align-content:start;gap:clamp(8px,.8vmin,14px);background:rgba(255,255,255,.015)}
.slot-card h2{margin:0;font-family:var(--mono);font-weight:500;font-size:clamp(15px,1.5vmin,24px);letter-spacing:.11em}
.slot-preview{border-top:1px solid var(--line-soft);padding-top:clamp(8px,.8vmin,14px);font-family:var(--mono);color:var(--muted);font-size:clamp(10px,.95vmin,16px);line-height:1.5}
.custom-fields{display:grid;gap:clamp(6px,.6vmin,10px)}
.custom-fields[hidden]{display:none}

.settings-grid{min-height:0;display:grid;gap:var(--gap);align-content:center}.settings-grid.two-col{grid-template-columns:1fr 1fr}
.setting-group{min-width:0;display:grid;gap:clamp(5px,.5vmin,9px)}
.setting-group label{font-family:var(--mono);font-size:clamp(10px,.95vmin,16px);color:var(--muted);letter-spacing:.12em}
.setting-group input[type="text"],.setting-group input[type="number"],.setting-group select,.slot-card select,.slot-card input{width:100%;min-width:0;border:1px solid var(--line);background:#050607;color:var(--fg);padding:clamp(9px,.85vmin,14px);font-family:var(--mono);font-size:clamp(13px,1.2vmin,20px);letter-spacing:.04em;outline:none}
.setting-group input:focus,.setting-group select:focus,.slot-card input:focus,.slot-card select:focus{border-color:var(--fg)}
.inline-toggle{grid-template-columns:1fr auto;align-items:center;border-bottom:1px solid var(--line-soft);padding-bottom:var(--gap)}
.inline-toggle input{width:clamp(20px,2vmin,30px);height:clamp(20px,2vmin,30px);accent-color:var(--fg)}
.unit-input{display:grid;grid-template-columns:1fr auto;align-items:center;border:1px solid var(--line);background:#050607}.unit-input input{border:0!important}.unit-input span{padding-right:clamp(10px,1vmin,16px);font-family:var(--mono);color:var(--muted);font-size:clamp(11px,1vmin,17px)}
.action-row{display:flex;gap:var(--gap);flex-wrap:wrap}.action-button{padding:clamp(9px,.9vmin,14px) clamp(12px,1.2vw,22px);font-size:clamp(10px,.95vmin,16px)}.action-button.danger{color:var(--warn)}
.settings-status{align-self:end;border-top:1px solid var(--line-soft);padding-top:var(--gap);font-family:var(--mono);font-size:clamp(10px,.95vmin,16px);color:var(--dim);letter-spacing:.08em}

.status-strip{min-height:clamp(28px,3.6vh,46px);padding-top:clamp(5px,.65vh,10px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid var(--line);color:var(--dim);font-family:var(--mono);font-size:clamp(9px,.82vmin,14px);letter-spacing:.1em;white-space:nowrap}.status-strip span:nth-child(2){justify-self:center}.status-strip span:last-child{justify-self:end}.status-strip b{color:var(--muted);font-weight:400}
.good{color:var(--good)!important}.warn{color:var(--warn)!important}.bad{color:var(--bad)!important}

@media (max-width:1050px){
  .identity{display:none}.top-strip{grid-template-columns:1fr 1fr}.header-actions{grid-column:2}.console-view{grid-template-rows:minmax(0,1.35fr) minmax(0,.8fr) minmax(0,.72fr)}
  .complication-zone{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr 1fr}.complication{border-bottom:1px solid var(--line-soft)}.complication:nth-child(2){border-right:0}.complication:nth-child(3),.complication:nth-child(4){border-bottom:0}.complication:nth-child(3){padding-left:0}.complication:nth-child(4){padding-right:0}
  .slot-settings{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.settings-grid.two-col{grid-template-columns:1fr 1fr}
}

@media (max-width:700px){
  :root{--pad:10px;--safe-edge:14px;--gap:7px}.calendar-strip span:nth-child(2),.calendar-strip span:nth-child(4){display:none}.seconds-strip{display:none}.view-tab{padding:7px 8px}.top-strip{font-size:12px}
  .period-grid{grid-template-columns:1fr 1fr}.period-primary strong{font-size:clamp(22px,5.8vw,40px)}.period-remaining strong{font-size:clamp(26px,7vw,48px)}
  .comp-value{font-size:clamp(18px,5.6vw,34px)}.comp-value.large{font-size:clamp(24px,7vw,42px)}.weather-glyph{display:none}
  .settings-tabs{grid-template-columns:1fr}.settings-tab{padding:7px}.settings-grid.two-col{grid-template-columns:1fr 1fr}.settings-heading p{display:none}.slot-settings{grid-template-columns:1fr 1fr}.slot-card{padding:8px}.slot-preview{display:none}
  .status-strip{grid-template-columns:1fr auto}.status-strip #statusCenter{display:none}.status-strip span:last-child{justify-self:end}
}

@media (max-height:560px) and (orientation:landscape){
  :root{--pad:7px;--safe-edge:10px;--gap:5px}.top-strip{min-height:30px}.console-view{grid-template-rows:minmax(0,1.15fr) minmax(0,.7fr) minmax(0,.56fr)}
  .eyebrow{font-size:9px;margin-bottom:1px}.subvalue{font-size:9px}.comp-slot-label{font-size:8px;margin-bottom:2px}.comp-detail{font-size:8px}.status-strip{min-height:18px;font-size:8px;padding-top:2px}.progress-meta{font-size:8px;margin-bottom:2px}.segment-progress i{height:7px}
  .settings-heading p{display:none}.settings-heading h1{font-size:23px}.settings-tabs{gap:4px}.settings-tab{padding:5px;font-size:9px}.slot-settings{gap:4px}.slot-card{padding:6px;gap:5px}.slot-card h2{font-size:11px}.slot-preview{display:none}.setting-group{gap:2px}.setting-group label{font-size:8px}.setting-group input[type="text"],.setting-group input[type="number"],.setting-group select,.slot-card select,.slot-card input{padding:5px;font-size:10px}.action-button{padding:5px 8px;font-size:9px}.settings-status{padding-top:4px;font-size:8px}
}

@media (orientation:portrait) and (min-height:800px){
  .console-view{grid-template-rows:minmax(0,1.15fr) minmax(0,.7fr) minmax(0,.85fr)}
  .period-grid{grid-template-columns:1fr}.period-primary{border-right:0;border-bottom:1px solid var(--line-soft);padding:0 0 var(--gap)}.period-remaining{padding-top:var(--gap)}
}

@media (prefers-reduced-motion:reduce){.segment{transition:none}}

/* v0.2.2 weather diagnostics */
.weather-diagnostics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.weather-diagnostics div{
  min-width:0;
  display:grid;
  gap:clamp(4px,.45vmin,8px);
  padding:clamp(8px,.85vmin,14px) clamp(8px,.9vw,16px);
  border-right:1px solid var(--line-soft);
}
.weather-diagnostics div:last-child{border-right:0}
.weather-diagnostics span{
  font-family:var(--mono);
  font-size:clamp(8px,.78vmin,13px);
  letter-spacing:.12em;
  color:var(--dim);
}
.weather-diagnostics b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:clamp(10px,.95vmin,16px);
  font-weight:400;
  color:var(--muted);
}
.weather-diagnostics b.good{color:var(--good)}
.weather-diagnostics b.warn{color:var(--warn)}
.weather-diagnostics b.bad{color:var(--bad)}

@media (max-width:900px){
  .weather-diagnostics{grid-template-columns:1fr 1fr}
  .weather-diagnostics div:nth-child(2){border-right:0}
  .weather-diagnostics div:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
}

@media (max-height:620px){
  .weather-diagnostics div{padding:5px 7px}
  .weather-diagnostics span{font-size:7px}
  .weather-diagnostics b{font-size:9px}
}

[data-settings-panel="location"].active{
  grid-template-rows:auto minmax(0,1fr) auto auto auto;
}