/* Clearslate
   Readable one-handed at arm's length, in daylight, on a roof.
   Big type, high contrast, no horizontal scrolling, nothing to explain. */

:root {
  --ink: #14181d;
  --paper: #f7f6f3;
  --card: #ffffff;
  --line: #d9d6d0;
  --muted: #6b6f76;
  --slate: #3a4a5c;
  --leak: #b3261e;
  --dry: #1c6b4a;
  --mortar: #8a5a1c;
  --warn: #8a6400;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main { max-width: 760px; margin: 0 auto; padding: 16px 16px 64px; }

/* nav */
.topnav {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  background: var(--slate); padding: 12px 16px;
}
.topnav a { color: #fff; text-decoration: none; font-weight: 600; }
.topnav .brand { margin-right: auto; font-size: 20px; letter-spacing: .5px; }
.topnav .muted { opacity: .7; font-weight: 400; }

/* headline — the one line that answers "what am I doing today" */
.headline {
  background: var(--card); border: 2px solid var(--slate);
  border-radius: 10px; padding: 16px; margin-bottom: 20px;
}
.headline.wet { border-color: var(--warn); }
.weatherswitch { text-align: right; margin-bottom: 8px; }
.weatherswitch a {
  font-size: 15px; color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
  display: inline-block;
}
.eyebrow {
  margin: 0; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.headline-job { display: block; text-decoration: none; color: inherit; }
.headline-job .name { display: block; font-size: 30px; font-weight: 700; line-height: 1.15; }
.headline-job .addr { display: block; font-size: 20px; color: var(--muted); }

/* sections */
h2 { font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
     color: var(--muted); margin: 28px 0 8px; }
h3.merchant { font-size: 17px; margin: 14px 0 4px; }
.sub { margin: 0 0 10px; color: var(--muted); font-size: 15px; }

/* job cards */
.job {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
}
.job.dim { opacity: .62; }
.job.cold { border-left: 5px solid var(--leak); }
.jobhead { display: block; text-decoration: none; color: inherit; }
.jobhead strong { font-size: 21px; }
.addr { display: block; color: var(--muted); }
.addr.big { font-size: 20px; margin-top: -6px; }

.meta {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin: 8px 0 0; font-size: 15px; color: var(--muted);
}
.meta form { margin: 0; }

.leak {
  background: var(--leak); color: #fff; font-weight: 700; font-size: 13px;
  letter-spacing: .08em; padding: 3px 8px; border-radius: 4px;
}
.tag, .days {
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; font-size: 14px;
}
.type { font-size: 13px; padding: 2px 8px; border-radius: 4px; }
.type.dry { background: #e4f1ea; color: var(--dry); }
.type.mortar { background: #f3e9da; color: var(--mortar); }

/* tasks — tapping, not typing */
ul.tasks { list-style: none; margin: 10px 0 0; padding: 0; }
ul.tasks li {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--line);
}
/* The description takes the slack so the mortar/dry tag stays on its line. */
ul.tasks li > span:first-of-type { flex: 1 1 0; min-width: 0; }
ul.tasks li.done { opacity: .5; text-decoration: line-through; }
ul.tasks.big li { font-size: 19px; }
ul.tasks form { margin: 0; }
.tick {
  font-size: 26px; line-height: 1; width: 48px; height: 48px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--slate); cursor: pointer;
}
.dur, .mat { font-size: 14px; color: var(--muted); }

ul.materials, ul.plain { list-style: none; margin: 0; padding: 0; }
ul.materials li, ul.plain li {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 6px;
}
ul.materials .mat { display: block; font-size: 19px; color: var(--ink); }
ul.materials .for { font-size: 15px; color: var(--muted); }

.warn {
  background: #fdf5e0; border: 1px solid #e6d7a8; border-radius: 8px;
  padding: 12px 14px; color: var(--warn);
}
.flash {
  background: #e8eef5; border: 1px solid #c4d3e4; border-radius: 8px;
  padding: 12px 14px; margin-bottom: 16px;
}
.empty { color: var(--muted); font-style: italic; }
.closed { background: #eef3ee; border-radius: 10px; padding: 12px 14px; }
.problem { margin: 6px 0 0; }

/* forms */
form.stack { display: flex; flex-direction: column; gap: 12px; }
fieldset { border: 1px solid var(--line); border-radius: 10px; background: var(--card);
           margin: 0 0 16px; padding: 14px; }
legend { font-weight: 700; padding: 0 6px; }
label { display: block; font-size: 15px; color: var(--muted); }
label.check { display: flex; gap: 10px; align-items: center; font-size: 18px; color: var(--ink); }
input, select, textarea {
  width: 100%; font: inherit; padding: 12px; margin-top: 4px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
label.check input { width: auto; margin: 0; transform: scale(1.4); }
button {
  font: inherit; font-weight: 600; padding: 14px 20px;
  background: var(--slate); color: #fff; border: 0; border-radius: 8px; cursor: pointer;
}
button.small, a.small {
  font-size: 15px; padding: 8px 14px; display: inline-block;
  text-decoration: none; background: #fff; color: var(--slate);
  border: 1px solid var(--line); border-radius: 8px;
}

.taskrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.taskrow input, .taskrow select { width: auto; flex: 1 1 140px; margin-top: 0; }
.taskrow button { padding: 12px 16px; }

.searchbar { display: flex; gap: 8px; margin-bottom: 16px; }
.searchbar input { margin-top: 0; }

.login { max-width: 360px; margin: 12vh auto; padding: 0 16px; }
.login h1 { font-size: 34px; letter-spacing: .5px; }
.login form { display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 460px) {
  .headline-job .name { font-size: 26px; }
  .taskrow input, .taskrow select { flex: 1 1 100%; }
  /* Keep the nav on one line rather than letting "Out" drop below. */
  .topnav { gap: 12px; padding: 10px 12px; }
  .topnav a { font-size: 16px; }
  .topnav .brand { font-size: 17px; }
}