/* hhrs-view: terminal */
body {
  margin: 0;
  min-height: 100dvh;
  background: #1b2838;
  color: #f7f1e8;
  font: 16px/1.35 system-ui, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
.terminal {
  box-sizing: border-box;
  width: min(36rem, 100%);
  min-height: 100dvh;
  height: auto;
  margin: 0 auto;
  padding: 0.7rem 0.85rem calc(16px + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: 0.45rem;
}
.terminal__head, .terminal__face { display: grid; justify-items: center; gap: 0.2rem; }
.terminal__brand { margin: 0; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #d7c4a4; }
h1 { margin: 0; font-size: 1.25rem; text-align: center; }
p { margin: 0; }
.terminal__status, .terminal__place, .terminal__date { text-align: center; }
.terminal__place { color: #d7dee8; }
.terminal__time {
  margin: 0.15rem 0 0;
  font-size: clamp(2.5rem, 12vw, 4.75rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.terminal__date { font-size: 1.05rem; }
.terminal__skew { color: #f3d7a1; text-align: center; font-size: 0.85rem; }
.terminal__message { min-height: 1.25rem; text-align: center; white-space: pre-line; }
.terminal__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.terminal__field { display: grid; gap: 0.15rem; color: #d7c4a4; font-size: 0.8rem; }
.terminal__field input {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.85rem;
  padding: 0 0.65rem;
  border: 2px solid transparent;
  border-radius: 0.45rem;
  background: #fffdf8;
  color: #1c2430;
  font: 1.15rem/1.2 ui-monospace, Consolas, monospace;
  letter-spacing: 0.06em;
}
.terminal__field.is-selected input { border-color: #e0a24a; }
.terminal__pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, 44px);
  gap: 0.35rem;
  min-height: 0;
}
.terminal__pad button,
.terminal__clocks button,
#terminal-activate button,
#terminal-move button {
  font: inherit;
  font-weight: 650;
  border-radius: 0.45rem;
  touch-action: manipulation;
}
.terminal__pad button {
  min-height: 44px;
  height: 44px;
  border: 0;
  background: #243447;
  color: #fffdf8;
  font-size: 1.25rem;
}
.terminal__clocks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.terminal__clocks button,
#terminal-activate button {
  min-height: 52px;
  border: 0;
  background: #8a4b08;
  color: #fffdf8;
}
button:disabled { opacity: 0.55; }
#terminal-activate { display: grid; gap: 0.6rem; }
#terminal-activate label { display: grid; gap: 0.25rem; }
#terminal-activate input {
  min-height: 3rem;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 0.45rem;
  font: inherit;
}
#terminal-ready, #terminal-manual { min-height: 0; }
#terminal-manual { display: grid; grid-template-rows: auto auto auto; gap: 0.45rem; min-width: 0; }
#terminal-move button { min-height: 2.5rem; background: transparent; color: #f7f1e8; border: 1px solid #d9d0c3; }
[hidden] { display: none !important; }
@media (max-width: 340px) {
  .terminal__fields { grid-template-columns: 1fr; }
}
@media (min-width: 600px) and (orientation: portrait) {
  .terminal { width: min(40rem, 100%); }
  .terminal__time { font-size: clamp(3.25rem, 8vw, 4.75rem); }
  .terminal__pad { width: min(22rem, 100%); margin-inline: auto; grid-template-rows: repeat(4, 52px); }
  .terminal__pad button { height: 52px; }
  .terminal__clocks { margin-top: 20px; }
}
@media (orientation: landscape) and (min-width: 700px) and (min-height: 480px) {
  .terminal {
    width: min(68rem, 100%);
    height: 100dvh;
    min-height: 0;
    align-content: center;
  }
  #terminal-manual { display: block; position: relative; padding-right: calc(22rem + 0.85rem); }
  .terminal__fields { grid-column: auto; grid-row: auto; }
  .terminal__clocks { margin-top: 22px; }
  .terminal__pad { position: absolute; top: 0; right: 0; width: 22rem; margin: 0; grid-template-rows: repeat(4, 64px); }
  .terminal__pad button { height: 64px; }
}