/* Shell layout. Phone first; desktop is its own layout at 900 px and up. */

html, body { height: 100%; }

.app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: 'ticker' 'main' 'tabs';
  height: 100dvh;
  overflow: hidden;
}

.app-ticker { grid-area: ticker; padding-top: env(safe-area-inset-top); }
.app-head { display: contents; }
.app-brand, .app-date { display: none; }
.app-head kr-skew-tabs { grid-area: tabs; }
.app-main { grid-area: main; overflow-y: auto; outline: none; }

/* Today */
.today { display: flex; flex-direction: column; gap: var(--space-5); padding-bottom: var(--space-6); }
.hero { display: flex; flex-direction: column; min-height: 400px; padding-top: var(--space-4); }
.hero kr-extruded-numeral { padding: var(--space-5) var(--space-4) var(--space-4); }
.hero .is-long { --kr-size: 160px; }
.hero kr-lower-third { margin-top: auto; margin-right: var(--space-5); margin-bottom: var(--space-5); }
.today-bug, .today-next { margin-inline: var(--space-4); }
.today-next h2 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.today-next p { color: var(--olive-200); }
.today-route { display: none; }

/* Numeral drop: the one motion on Today, once the hours arrive. */
@media (prefers-reduced-motion: no-preference) {
  .hero kr-extruded-numeral:not([value='']) { animation: numeral-drop 420ms cubic-bezier(0.2, 0.9, 0.25, 1.1) both; }
}
@keyframes numeral-drop { from { transform: translateY(-48px); opacity: 0; } }

/* Shift clock */
.today-clock { display: flex; flex-direction: column; gap: var(--space-3); margin-inline: var(--space-4); }
.clock-actions { display: flex; gap: var(--space-4); padding-inline: var(--space-1); }
.clock-actions .btn { flex: 1; min-height: 68px; font-size: var(--text-xl); }
.clock-actions .btn[hidden] { display: none; }
.clock-pay { color: var(--olive-200); font-weight: 500; }
.clock-pay strong { color: var(--ivory); font: 800 var(--text-xl) var(--font-display); }
.clock-error { color: var(--rose); }
.clock-error:empty { display: none; }

/* Shift list */
.today-week .panel-body { color: var(--grey-black); font-weight: 600; }
.shift-list { margin: 0; padding: 0; list-style: none; }
.shift-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-5); border-top: 2px solid var(--ivory-200); }
.shift-list div { display: flex; flex-direction: column; }
.shift-list span { color: var(--olive-800); font-size: var(--text-sm); font-weight: 500; }
.shift-nums { text-align: right; font-variant-numeric: tabular-nums; }
.shift-delete { min-height: var(--touch); padding: 0 var(--space-3); font-size: var(--text-md); }

.confirm { margin: auto; max-width: min(360px, calc(100% - 2 * var(--space-4))); padding: var(--space-5); border: 0; background: var(--grey-black); color: var(--ivory); box-shadow: var(--shadow-hard); }
.confirm::backdrop { background: var(--black-900); opacity: 0.8; }
.confirm h2 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.confirm-actions { display: flex; gap: var(--space-4); margin-top: var(--space-5); }
.confirm-actions .btn { flex: 1; }

/* Panels: ivory blocks, as in the reference. */
.panel { background: var(--ivory); color: var(--grey-black); }
.panel-head { padding: var(--space-4) var(--space-5); background: var(--ivory-200); font-size: var(--text-xl); }
.panel-body { padding: var(--space-5); color: var(--olive-800); }

/* Tab pages */
.page { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding-top: var(--space-5); }
.page kr-lower-third { align-self: stretch; margin-right: var(--space-5); }
.page-note, .page .btn { margin-inline: var(--space-4); }
.page-note { max-width: 60ch; color: var(--olive-200); }
.page-note:empty { display: none; }

/* Alerts and install guide */
.alerts { align-self: stretch; display: grid; gap: var(--space-3); padding-inline: var(--space-4); }
.alerts h2 { font-size: var(--text-xl); }
.alerts p { max-width: 60ch; color: var(--olive-200); }
.alerts p:empty { display: none; }
.alerts-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.page .alerts-actions .btn { margin-inline: 0; }
.alerts-actions .btn[hidden] { display: none; }
.alerts-link { justify-self: start; display: inline-flex; align-items: center; min-height: var(--touch); color: var(--ivory); }
.install-steps { display: grid; gap: var(--space-2); max-width: 60ch; margin-inline: var(--space-4); padding-left: var(--space-5); }

/* Settings */
.settings { align-self: stretch; display: grid; gap: var(--space-4); padding-inline: var(--space-4); }
.settings label { display: flex; flex-direction: column; gap: var(--space-1); font-weight: 600; }
.settings .btn { margin-inline: 0; justify-self: start; }
.settings kr-lower-third[hidden] { display: none; }

/* Buttons */
.btn {
  min-height: 52px;
  padding: 0 var(--space-5);
  border: 0;
  position: relative;
  isolation: isolate;
  background: none;
  color: var(--grey-black);
  font: 800 var(--text-lg) var(--font-display);
  cursor: pointer;
}
/* The fill skews, the label stays upright. */
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--olive); transform: skewX(-8deg); box-shadow: var(--shadow-hard); }
.btn:disabled { cursor: progress; }
.btn:disabled::before { background: var(--olive-200); }
.btn-quiet { color: var(--ivory); }
.btn-quiet::before { background: var(--black-700); box-shadow: none; }

/* Sign-in */
[data-view='sign-in'] { grid-template-areas: 'main'; grid-template-rows: minmax(0, 1fr); }
[data-view='sign-in'] .app-ticker, [data-view='sign-in'] .app-head { display: none; }
.signin { min-height: 100%; display: grid; align-items: center; padding: var(--space-5) var(--space-4); }
.signin-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  padding-bottom: var(--space-5);
  background: var(--grey-black);
  box-shadow: var(--shadow-hard);
}
.signin-fields, .signin-error, .signin-card .btn, .signin-link { margin-inline: var(--space-5); }
.signin-fields { display: flex; flex-direction: column; gap: var(--space-4); }
.signin-fields[hidden] { display: none; }
.signin-fields label { display: flex; flex-direction: column; gap: var(--space-1); font-weight: 600; }
.signin-fields input, .settings input, .settings select {
  min-height: 48px;
  padding: 0 var(--space-3);
  border: 2px solid var(--olive-800);
  background: var(--black-700);
  color: var(--ivory);
  font: 500 var(--text-md) var(--font-body);
}
.signin-error { color: var(--rose); }
.signin-error:empty { display: none; }
.signin-link { align-self: flex-start; min-height: var(--touch); display: flex; align-items: center; color: var(--olive-200); }

/* Kit page */
.kit-page { height: auto; display: block; overflow: visible; }
.kit-head { padding: var(--space-5) var(--space-4); background: var(--black-900); border-bottom: 3px solid var(--burgundy); }
.kit-head h1 { font-size: var(--text-2xl); }
.kit-head p { color: var(--ivory-300); }
.kit-section { padding: var(--space-6) var(--space-4); border-bottom: 3px solid var(--black-700); }
.kit-section > h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.kit-layouts { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; }
.kit-layout { min-width: 0; max-width: 100%; }
.kit-layout h3 { font: 600 var(--text-sm) var(--font-body); color: var(--olive-200); margin-bottom: var(--space-2); }
.kit-scroll { overflow-x: auto; }
.kit-phone { width: 358px; max-width: 100%; }
.kit-desktop { width: 960px; }
.kit-stage { background: var(--grey-black); }
.kit-backdrop { min-height: 260px; padding: var(--space-5); display: flex; align-items: flex-end; }
.kit-small { --kr-size: 120px; }
.kit-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-2); }
.kit-pair { display: flex; justify-content: space-between; gap: var(--space-3); min-height: var(--touch); align-items: center; padding: var(--space-2) var(--space-3); font-weight: 600; font-size: var(--text-sm); }
.kit-focus { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }
.kit-focus-demo { outline: 3px solid var(--ivory); outline-offset: 2px; box-shadow: 0 0 0 5px var(--black-900); }

@container kr (min-width: 900px) {
  .app {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: 'head' 'main';
  }
  .app-ticker { display: none; }
  .app-head {
    grid-area: head;
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-3) max(var(--space-6), calc((100% - 1360px) / 2));
    background: var(--black-900);
    border-bottom: 3px solid var(--burgundy);
  }
  .app-brand {
    display: block;
    padding: 2px 22px 2px 12px;
    background: var(--olive);
    color: var(--grey-black);
    font: 800 1.375rem var(--font-display);
    text-decoration: none;
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  }
  .app-date { display: block; margin-left: auto; color: var(--ivory-300); font-size: 0.9375rem; }

  .today {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-areas: 'hero route' 'clock route' 'bug next' 'week week';
    gap: var(--space-5);
    max-width: 1360px;
    margin-inline: auto;
    padding: var(--space-5) var(--space-6) var(--space-6);
  }
  .hero { grid-area: hero; min-height: 400px; padding-top: var(--space-5); }
  .hero kr-extruded-numeral { padding: 0 var(--space-5); }
  .today-route { grid-area: route; display: flex; flex-direction: column; }
  .today-route .panel-body { flex: 1; display: grid; place-items: center; }
  .today-bug { grid-area: bug; margin: 0; align-self: start; }
  .today-next { grid-area: next; margin: 0; }
  .today-clock { grid-area: clock; margin: 0; }
  .today-week { grid-area: week; }

  .page { max-width: 1360px; margin-inline: auto; padding: var(--space-6); }
  .page kr-lower-third { max-width: 640px; margin-right: 0; }
  .page-note, .page .btn { margin-inline: 0; }
  .page .btn { margin-left: var(--space-2); }
  .settings { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; padding-inline: 0; }
  .settings-wide { grid-column: 1 / -1; }
  .alerts { max-width: 720px; padding-inline: 0; }
  .install-steps { margin-inline: 0; }

  .kit-head, .kit-section { padding-inline: var(--space-6); }
}