:root {
  --side: 320px;
  --line: #111;
  --ink: #111;
  --muted: #444;
  --bg: #fff;
  font-family: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}
body {
  display: flex;
  min-height: 100dvh;
}
#side {
  width: var(--side);
  min-width: 220px;
  max-width: 70vw;
  flex: 0 0 var(--side);
  display: flex;
  flex-direction: column;
  padding: 16px 14px 12px;
  gap: 12px;
  border-right: 3px solid var(--line);
  height: 100dvh;
}
.side-top { flex: 0 0 auto; }
.side-mid { flex: 1 1 auto; overflow: auto; min-height: 120px; }
.side-bot { flex: 0 0 auto; border-top: 1px solid #ccc; padding-top: 10px; }
.lbl {
  display: block;
  font-size: 13px;
  margin: 0 0 4px;
  font-weight: 700;
}
input, select, button {
  font: inherit;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #333;
  background: #fff;
  min-height: 40px;
}
.row { display: flex; gap: 8px; }
.row > div { flex: 1; }
.grow { flex: 2; }
.grid {
  display: grid;
  grid-template-columns: 44px repeat(5, 1fr);
  gap: 2px;
  font-size: 11px;
}
.grid .h, .grid .p {
  background: #111;
  color: #fff;
  text-align: center;
  padding: 6px 2px;
  font-weight: 700;
}
.grid .cell {
  border: 1px solid #bbb;
  padding: 6px 4px;
  cursor: pointer;
  background: #fff;
  min-height: 44px;
  text-align: left;
}
.grid .cell.on { outline: 2px solid #111; background: #eee; }
.grid .cell.white { background: #fff; }
.grid .cell.grey { background: #e8e8e8; }
.grid .p .t { font-weight: 400; font-size: 9px; }
.grid .band { background: #f3f3f3; text-align: center; font-weight: 700; }
.clock { font-size: 12px; margin: 8px 0 0; color: #222; }
.pin.next {
  background: #ffd400;
  border-radius: 50%;
  transform: none;
  margin-top: -11px;
}
.lesson { font-size: 13px; margin: 8px 0 0; min-height: 3em; }
#split {
  width: 8px;
  cursor: col-resize;
  background: #111;
  flex: 0 0 8px;
  z-index: 2;
}
#mapPane {
  flex: 1 1 auto;
  min-width: 0;
  height: 100dvh;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mapWrap { position: relative; flex: 0 0 auto; }
#mapWrap img { display: block; width: 100%; height: 100%; }
.pin {
  position: absolute;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  margin-top: -22px;
  background: #c00;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.hidden { display: none !important; }
.gate {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.gate-card { max-width: 360px; width: 100%; }
.gate-card h1 { margin: 0 0 8px; }
.gate-card p { color: #444; }
.gate-card button { margin-top: 12px; width: 100%; min-height: 44px; font-weight: 700; background: #111; color: #fff; border: 0; }
.name-hist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.name-hist button { margin: 0; width: auto; min-height: 36px; padding: 6px 10px; font-weight: 700; background: #eee; color: #111; border: 0; }
#googleBtn { min-height: 44px; margin-top: 12px; }
body.in .gate { display: none; }
button.out { margin-top: 8px; width: auto; min-height: 36px; padding: 6px 10px; background: #fff; }
.hint { font-size: 12px; color: #444; margin: 6px 0 0; font-weight: 400; }
.desk-only { display: none; }
@media (min-width: 701px) {
  .desk-only { display: block; }
  button.desk-only { display: inline-block; }
}
.edit-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; font-weight: 700; }
.edit-row input { width: auto; min-height: 0; }
.lesson-edit { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.lesson-edit input { min-height: 36px; padding: 6px 8px; }
.lesson-edit button { min-height: 36px; font-weight: 700; background: #111; color: #fff; border: 0; }
.lesson-edit.hidden { display: none; }
body.editing #mapWrap { cursor: crosshair; }
@media (max-width: 700px) {
  html, body {
    height: auto;
    min-height: 100svh;
    overflow: auto;
  }
  body {
    flex-direction: column;
  }
  #side {
    order: 2;
    width: 100% !important;
    flex: 0 0 auto;
    flex-basis: auto !important;
    max-width: none;
    height: auto;
    border-right: 0;
    border-bottom: 3px solid #111;
  }
  #split { display: none; }
  #mapPane {
    order: 1;
    width: 100%;
    height: 70svh;
    min-height: 320px;
    flex: 0 0 70svh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  #mapWrap {
    width: 100%;
    min-height: 0;
  }
  #mapWrap img {
    width: 100%;
    height: auto;
    background: #f4f4f4;
  }
}
.print-sheet { display: none; }
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  html, body {
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
  }
  body.printing #gate,
  body.printing #side,
  body.printing #split,
  body.printing #mapPane { display: none !important; }
  body.printing .print-sheet { display: block !important; }
  .print-sheet { color: #111; }
}
.ptt { font-family: Helvetica, Arial, sans-serif; }
.ptt-head {
  background: #14365a;
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.ptt-head span { font-size: 14px; font-weight: 700; }
.ptt table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ptt th {
  background: #14365a;
  color: #fff;
  font-size: 11px;
  padding: 6px 4px;
}
.ptt td { border: 0.4pt solid #9aa3ad; vertical-align: top; padding: 0; }
.ptt .per {
  background: #4a5568;
  color: #fff;
  text-align: center;
  font-weight: 800;
  font-size: 9px;
  width: 9%;
  padding: 6px 2px;
}
.ptt .per.prep { background: #5b6573; }
.ptt .per.band { background: #6b7280; }
.ptt .band-row td.span {
  background: #e8edf2;
  text-align: center;
  font-weight: 800;
  font-size: 11px;
  padding: 4px;
  color: #334155;
}
.ptt .cell {
  position: relative;
  padding: 4px 6px 4px 10px;
  min-height: 48px;
}
.ptt .cell.alt { background: #f3f4f6; }
.ptt .cell.prep { background: #eef1f4; }
.ptt .bar {
  position: absolute;
  left: 1px; top: 1px; bottom: 1px;
  width: 5px;
}
.ptt .sub { font-weight: 800; font-size: 10px; }
.ptt .meta { font-size: 8px; color: #4b5563; margin-top: 2px; }
.ptt .teach { font-size: 9px; font-style: italic; color: #334155; margin-top: 6px; }
.pmap { font-family: Helvetica, Arial, sans-serif; }
.pmap h1 { font-size: 16px; margin: 0 0 8px; }
.pmap-wrap { position: relative; width: 100%; }
.pmap-wrap img { width: 100%; height: auto; display: block; }
.pmap-wrap .pin {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #e11;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
}