/* shiftcal — minimal Material. Flat backgrounds, system fonts (no web-font
   fetch), subtle elevation shadows, inline SVG icons. No raster assets, so it
   loads fast and renders the same on a 7-year-old phone as on a new one. */

:root {
  --primary: #3f51b5;
  --on-primary: #ffffff;
  --surface: #ffffff;
  --bg: #f5f5f5;
  --text: #212121;
  --muted: #5f6368;
  --border: #e0e0e0;
  --warn: #b00020;
  --warn-bg: #fdecef;
}

* { box-sizing: border-box; }

/* Never allow sideways scrolling: a stray wide element (an input, a long label,
   a preview image) must clip, not let the whole page slide laterally on a phone. */
html, body { overflow-x: hidden; max-width: 100%; }
img { max-width: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
}

svg { width: 24px; height: 24px; fill: currentColor; vertical-align: middle; }

.appbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.appbar h1 { margin: 0; font-size: 1.15rem; font-weight: 500; }

.wrap { max-width: 640px; margin: 24px auto; padding: 0 16px; }

.card {
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
  padding: 20px;
  margin-bottom: 20px;
}
.card h2 { margin: .1em 0 .5em; font-size: 1.1rem; font-weight: 500; }
.muted { color: var(--muted); font-size: .94rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 6px;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.btn svg { width: 20px; height: 20px; }
.btn.secondary {
  background: var(--surface);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.file { display: block; width: 100%; margin: 14px 0; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

/* Two equal columns: the date label and the date input each span the full width
   (their own line); the start/end times share the row below. Every cell can shrink
   (min-width:0), so the row fits any phone without overflowing — no fixed widths. */
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  align-items: center;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.row.flag { background: var(--warn-bg); border-color: var(--warn); }
.row input {
  width: 100%;
  min-width: 0;
  font: inherit;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.row input[type="date"] { grid-column: 1 / -1; }
.row .rolein { grid-column: 1 / -1; }   /* per-shift role on its own full-width line */
/* The spelled-out date ('Sat, April 23, 2026') on its own line above the inputs —
   our unambiguous label, since the native picker shows D/M/Y on many phones. */
.dow {
  grid-column: 1 / -1;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: -2px;
}

.flagmsg {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -2px 0 10px;
  color: var(--warn);
  font-size: .88rem;
}
.flagmsg svg { width: 18px; height: 18px; }

.banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  margin-bottom: 16px;
  background: var(--warn-bg);
  border-left: 4px solid var(--warn);
  border-radius: 4px;
}
.banner svg { width: 22px; height: 22px; fill: var(--warn); flex: 0 0 auto; }

.field { display: block; margin: 12px 0; }
.field span { display: block; font-size: .82rem; color: var(--muted); margin-bottom: 4px; }
.field input {
  width: 100%;
  font: inherit;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.rows-head {
  margin: 16px 0 8px;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.sep { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }

/* Uploaded screenshot(s), shown back so a row can be checked against the source. */
.card details > summary {
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: .4em;
}
.shots { display: flex; flex-direction: column; gap: 12px; }
.shot {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 80vh;     /* a tall portrait screenshot scales down to fit, not dominate */
  width: auto;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}