/* Chalkline.

   Read on a laptop on a kitchen table, and printed. Dark, because a shop
   owner does this at night after the trucks are back; the rate sheet prints
   on white, which is what the print rules at the bottom are for.

   One accent colour, used only for the answer and for anything to press. */

:root {
  --bg:        #0f1216;
  --surface:   #171b21;
  --surface-2: #1e242c;
  --line:      #2b323c;
  --ink:       #e9eef5;
  --dim:       #94a1b2;
  --accent:    #3ecf7a;
  --accent-2:  #2fb268;
  --warn:      #e2a13c;
  --bad:       #e8615f;
  --r:         12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 22px 90px;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* ---- header + tabs ---------------------------------------------------- */
.top {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 0 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  text-decoration: none;
  width: fit-content;      /* a flex <a> is a block: without this the link
                              spans the row and a click miles from the logo
                              navigates away */
}
.brand-name { font-weight: 700; }
.shop { color: var(--dim); font-size: 14px; }
/* Sits where the eye ends up: top right, next to the settings cog. */
.say-btn {
  margin-left: auto;
  color: var(--dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 12px;
}
.say-btn:hover { color: var(--ink); border-color: var(--dim); }

.cog {
  margin-left: 10px;
  text-decoration: none;
  font-size: 19px;
  color: var(--dim);
  padding: 2px 6px;
}
.cog:hover { color: var(--ink); }

.tabs {
  max-width: 1180px;
  margin: 0 auto 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 9px;
  color: var(--dim);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.tab:hover { background: var(--surface); color: var(--ink); }
.tab.on { background: var(--surface-2); color: var(--ink); }
.tab-icon { font-size: 14px; }

main { max-width: 1180px; margin: 0 auto; }

/* ---- page head -------------------------------------------------------- */
.pagehead { margin: 4px 0 18px; }
.pagehead h1 {
  margin: 0 0 4px;
  font-size: 26px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.h-icon { font-size: 22px; }
.lead { margin: 0 0 16px; color: var(--dim); max-width: 74ch; }
.lead b { color: var(--ink); }
.tiny { margin: 8px 0 0; color: var(--dim); font-size: 12.5px; }
.dim { color: var(--dim); }
code { font-family: ui-monospace, Consolas, monospace; font-size: 13px;
  background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }

/* ---- the answer ------------------------------------------------------- */
.answer { margin-bottom: 18px; }
.answer-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.big {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.big-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dim);
  font-weight: 700;
}
.big-value {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--accent);
}
.big-note { font-size: 12.5px; color: var(--dim); }
.big.bad { border-color: rgba(232, 97, 95, .5); }
.big.bad .big-value { color: var(--bad); }
.big.good { border-color: rgba(62, 207, 122, .45); }
.inline-in {
  width: 5.5ch;
  background: none;
  border: 0;
  border-bottom: 2px dashed var(--line);
  color: inherit;
  font: inherit;
  font-size: 30px;
  font-weight: 800;
  padding: 0;
}
.inline-in:focus { outline: none; border-bottom-color: var(--accent); }

.verdict {
  margin: 14px 0 0;
  padding: 12px 15px;
  border-radius: 10px;
  font-size: 15px;
  background: var(--surface-2);
}
.verdict:empty { display: none; }
.verdict.bad { background: rgba(232, 97, 95, .13); color: #ffb9b8; }
.verdict.good { background: rgba(62, 207, 122, .13); color: #a9edc6; }
.verdict.warn-line { background: rgba(226, 161, 60, .13); color: #f0cf9a; }

/* ---- cards ------------------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.card h2 {
  margin: 0 0 10px;
  font-size: 17px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.card h3 {
  margin: 16px 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dim);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.card h3:first-child { margin-top: 0; }
.note-card { background: var(--surface-2); }
.note-card p { margin: 0 0 10px; color: var(--dim); font-size: 13.5px; }
.note-card p:last-child { margin-bottom: 0; }
.note-card b { color: var(--ink); }
.empty p { margin: 0; color: var(--dim); }
.edit-link { font-size: 11.5px; font-weight: 500; text-transform: none;
  letter-spacing: 0; }
.crosslink { margin: 4px 0 18px; color: var(--dim); font-size: 13.5px; }

/* ---- fields ----------------------------------------------------------- */
.fld { display: block; margin-bottom: 12px; }
.fld-label { display: block; font-size: 12.5px; color: var(--dim);
  margin-bottom: 4px; }
.fld-in { display: flex; align-items: stretch; }
.fld-in .pre, .fld-in .post {
  display: flex;
  align-items: center;
  padding: 0 9px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--dim);
  font-size: 13px;
}
.fld-in .pre { border-right: 0; border-radius: 8px 0 0 8px; }
.fld-in .post { border-left: 0; border-radius: 0 8px 8px 0; }
.fld-note { display: block; font-size: 11.5px; color: var(--dim);
  margin-top: 4px; line-height: 1.45; }
.fld-big { font-size: 24px; font-weight: 800; color: var(--accent); }
.opt { color: var(--line); }

input[type=text], input[type=number], input[type=email], select, textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
}
.fld-in .pre + input { border-radius: 0 8px 8px 0; border-left: 0; }
.fld-in input + .post { margin-left: -1px; }
input:focus, select:focus { outline: none; border-color: var(--accent); }
input.sm { width: 8ch; text-align: right; }
input.name-in { font-size: 16px; font-weight: 700; max-width: 260px; }
.ref-in { margin-top: 5px; font-size: 12.5px; padding: 5px 8px; }
.chk { display: inline-flex; align-items: center; gap: 5px; }
/* the global input rule stretches a checkbox across its row */
input[type=checkbox] { width: auto; }

.grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 6px 18px;
}

/* ---- buttons ---------------------------------------------------------- */
button {
  font: inherit;
  cursor: pointer;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
}
button:hover { border-color: var(--dim); }
.go, .add, .print {
  background: var(--accent);
  border-color: var(--accent);
  color: #06240f;
  font-weight: 700;
}
.go:hover, .add:hover, .print:hover {
  background: var(--accent-2); border-color: var(--accent-2);
}
.go { padding: 12px 22px; font-size: 15px; }
.add { margin-top: 10px; }
.print { margin-left: 10px; padding: 6px 12px; font-size: 13px; }
.danger { border-color: rgba(232, 97, 95, .5); color: #ffb9b8; }
.danger:hover { border-color: var(--bad); }
.x {
  background: none;
  border: 0;
  padding: 2px 6px;
  color: var(--dim);
  font-size: 13px;
}
.x:hover { color: var(--bad); border: 0; }
.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--dim);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: underline;
}
.linkish:hover { color: var(--accent); border: 0; }

/* ---- tables ----------------------------------------------------------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.tbl th { color: var(--dim); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; }
.n { text-align: right; }
.tbl td.price, .price { color: var(--accent); font-weight: 700; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl input { padding: 6px 8px; font-size: 13.5px; }
.up { color: var(--accent); }
.down { color: var(--bad); }
.losing { color: var(--bad); font-weight: 700; }

.build { width: 100%; border-collapse: collapse; max-width: 560px; }
.build td { padding: 7px 4px; border-bottom: 1px solid var(--line); }
.build td.n { text-align: right; font-variant-numeric: tabular-nums; }
.build tr.sum td { color: var(--ink); font-weight: 600; }
.build tr.total td {
  border-top: 2px solid var(--line);
  border-bottom: 0;
  font-size: 17px;
  font-weight: 800;
  padding-top: 10px;
}
.build tr.total td.n { color: var(--accent); }

.totals { width: 100%; max-width: 340px; margin-top: 12px;
  border-collapse: collapse; }
.totals td { padding: 5px 2px; }
.totals td.n { text-align: right; font-variant-numeric: tabular-nums; }
.totals tr.total td { border-top: 1px solid var(--line); font-weight: 800;
  font-size: 17px; padding-top: 8px; }
.totals tr.dimrow td { color: var(--dim); font-size: 13px; }
.totals tr.keep td { border-top: 1px solid var(--line); font-weight: 800;
  color: var(--accent); padding-top: 8px; }
.quote-foot { display: grid; grid-template-columns: 1fr auto; gap: 24px;
  margin-top: 16px; align-items: start; }

.oh-list { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 18px; }
.oh-total { margin: 14px 0 0; font-size: 17px; }
.oh-total b { color: var(--accent); }
.inline-choose { max-width: 280px; }

/* ---- a person / a machine -------------------------------------------- */
.tech-head {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.inline-fld { font-size: 12px; color: var(--dim); }
.inline-fld select, .inline-fld .fld-in { margin-top: 3px; }
.inline-fld select { width: auto; min-width: 110px; }
.tech-head .x { margin-left: auto; }
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 6px 26px;
}
.tech-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--dim);
}
.tech-foot b { color: var(--ink); }
.tech-foot .strong { margin-left: auto; }
.tech-foot .strong b { color: var(--accent); font-size: 16px; }

/* ---- warnings --------------------------------------------------------- */
.warns:empty { display: none; }
.warn {
  margin: 0 0 8px;
  padding: 10px 13px;
  border-radius: 9px;
  background: rgba(226, 161, 60, .12);
  border: 1px solid rgba(226, 161, 60, .35);
  color: #f0cf9a;
  font-size: 13.5px;
}

/* ---- saved / said ----------------------------------------------------- */
.said {
  position: fixed;
  right: 18px;
  bottom: 16px;
  margin: 0;
  padding: 7px 13px;
  border-radius: 20px;
  font-size: 12.5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--dim);
  opacity: 1;
  transition: opacity .2s;
}
.said:empty { opacity: 0; }
.said.good { color: var(--accent); }
.said.bad { color: #ffb9b8; border-color: rgba(232, 97, 95, .5); }

/* ---- setup ------------------------------------------------------------ */
.setup { max-width: 940px; margin: 0 auto; }
.setup h1 { font-size: 30px; margin: 10px 0 6px; }
.trade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.trade {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
  cursor: pointer;
  font-size: 13.5px;
}
.trade input { display: none; }
.trade:hover { border-color: var(--dim); }
.trade.on { border-color: var(--accent); color: var(--accent); }
.name-fld { max-width: 420px; }

.mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.mod {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon name" "blurb blurb";
  gap: 2px 9px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  cursor: pointer;
}
.mod input { display: none; }
.mod:hover { border-color: var(--dim); }
.mod.on { border-color: var(--accent); background: rgba(62, 207, 122, .07); }
.mod.core { cursor: default; opacity: .75; }
.mod-icon { grid-area: icon; font-size: 17px; }
.mod-name { grid-area: name; font-weight: 700; font-size: 14px; }
.mod-blurb { grid-area: blurb; font-size: 12.5px; color: var(--dim);
  line-height: 1.45; }
.mod-always {
  grid-area: blurb;
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}
.mod.core .mod-blurb { display: none; }
.setup-go { margin: 22px 0 40px; display: flex; align-items: center; gap: 16px; }
.setup-go .said { position: static; }

.mod-rows { display: grid; gap: 4px; }
.mod-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 13.5px;
}
.mod-row:last-child { border-bottom: 0; }

.listedit .grip { color: var(--line); cursor: default; width: 20px; }
.listedit .keyname {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
  color: var(--line);
}
.gen-add { display: flex; gap: 8px; margin-top: 10px; max-width: 420px; }
.gen-add input { flex: 1; }

/* ---- the printed rate sheet ------------------------------------------ */
.sheet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 30px;
  max-width: 720px;
}
.sheet-head { border-bottom: 2px solid var(--line); padding-bottom: 12px;
  margin-bottom: 16px; }
.sheet-head h1 { margin: 0; font-size: 24px; }
.sheet-head p { margin: 2px 0 0; color: var(--dim); font-size: 13px; }
.sheet h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--dim); margin: 22px 0 6px; }
.sheet-tbl { width: 100%; border-collapse: collapse; }
.sheet-tbl th { text-align: left; font-weight: 500; padding: 6px 0;
  border-bottom: 1px solid var(--line); }
.sheet-tbl td { text-align: right; padding: 6px 0; font-weight: 700;
  border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.big-n { font-size: 19px; color: var(--accent); }
.sheet-foot { margin: 20px 0 0; color: var(--dim); font-size: 12.5px; }

@media print {
  body { background: #fff; color: #000; padding: 0; }
  .top, .tabs, .said, .no-print, .pagehead { display: none !important; }
  .sheet { border: 0; padding: 0; max-width: none; background: #fff; }
  .sheet-head h1, .sheet h2, .sheet-tbl th, .sheet-tbl td { color: #000; }
  .sheet-head { border-bottom-color: #000; }
  .sheet-tbl th, .sheet-tbl td { border-bottom-color: #ccc; }
  .big-n { color: #000; }
  .card { border-color: #ccc; background: #fff; }
  .print { display: none; }
}

@media (max-width: 760px) {
  .quote-foot { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .tech-foot .strong { margin-left: 0; }
  .big-value { font-size: 25px; }
}

/* ---- explanations, folded shut --------------------------------------- */
/* The reasoning behind a number is worth keeping and is not worth a
   paragraph in the way every time the page is opened. */
details.note-card, details.inline-why {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 18px;
  margin-bottom: 16px;
}
details.inline-why { margin: 0 0 14px; padding: 10px 14px; }
details.note-card > summary, details.inline-why > summary {
  cursor: pointer;
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
  list-style: none;
}
details.note-card > summary::marker,
details.inline-why > summary::marker { content: ""; }
details.note-card > summary::before,
details.inline-why > summary::before { content: "› "; color: var(--dim); }
details[open].note-card > summary::before,
details[open].inline-why > summary::before { content: "⌄ "; }
details.note-card > summary:hover, details.inline-why > summary:hover {
  color: var(--ink);
}
details.note-card p, details.inline-why p {
  margin: 10px 0 0;
  color: var(--dim);
  font-size: 13.5px;
}
details.note-card b, details.inline-why b { color: var(--ink); }

/* ---- the feedback box ------------------------------------------------- */
.kind-row { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px;
  margin-bottom: 14px; }
.kind {
  display: block;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
  cursor: pointer;
  font-size: 13.5px;
}
.kind input { display: none; }
.kind:hover { border-color: var(--dim); }
.kind.on { border-color: var(--accent); color: var(--accent); }
.say-box { min-height: 130px; }
.sent-list { margin-top: 4px; }
.sent-item {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.sent-item:last-child { border-bottom: 0; }
.sent-when { color: var(--dim); font-size: 11.5px; }
.sent-flag { color: var(--warn); font-size: 11.5px; }

/* ---- the trial line ---------------------------------------------------- */
.notice {
  max-width: 1180px;
  margin: 0 auto 16px;
  padding: 10px 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
}
.notice.warn { background: rgba(226, 161, 60, .12);
  border: 1px solid rgba(226, 161, 60, .35); color: #f0cf9a; }
.notice.bad { background: rgba(232, 97, 95, .12);
  border: 1px solid rgba(232, 97, 95, .4); color: #ffb9b8; }
.notice a { font-weight: 700; text-decoration: none; color: inherit;
  border-bottom: 1px solid currentColor; }
.notice-x {
  /* the global button rule would paint this a solid block */
  margin-left: auto;
  background: none;
  border: 0;
  padding: 2px 6px;
  color: inherit;
  opacity: .6;
  font-size: 13px;
}
.notice-x:hover { opacity: 1; border: 0; }

/* ---- the JTS mark ------------------------------------------------------ */
.jts-mark {
  width: 30px;
  height: 30px;
  display: block;
  flex: 0 0 auto;
  /* takes the header's own colour, so it cannot end up the wrong shade */
  color: inherit;
}
.brand .jts-mark { color: var(--accent); }

/* An error has to be readable. The old one was three words, so a one-line
   pill was enough; a real explanation needs room and needs to stay put
   until it is dealt with. */
.said.bad {
  max-width: 420px;
  white-space: normal;
  line-height: 1.45;
  text-align: left;
}
.said.bad a { color: inherit; font-weight: 700; text-decoration: underline; }

/* ---- the one-time note ------------------------------------------------- */
.first-note {
  max-width: 1180px;
  margin: 0 auto 18px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-radius: 12px;
  background: rgba(53, 196, 107, .08);
  border: 1px solid rgba(53, 196, 107, .35);
  font-size: 14px;
  line-height: 1.6;
}
.first-note b { color: var(--ink); }
/* the global button rule would paint this a solid block */
.first-x {
  flex: none;
  background: none;
  border: 1px solid rgba(53, 196, 107, .5);
  color: var(--ink);
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 12.5px;
  white-space: nowrap;
}
.first-x:hover { background: rgba(53, 196, 107, .14); }

/* ---- signing in from the desktop copy ----------------------------------
   Two boxes and a button. The email box takes the room because an address
   is the long one; the global `input{width:100%}` rule would otherwise give
   all three the whole row each and stack them. */
.signin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.signin-row input[type=email] { flex: 2 1 220px; width: auto; }
.signin-row input[type=password] { flex: 1 1 150px; width: auto; }
.signin-row button { flex: none; }

/* --- Shop Rate ---------------------------------------------------------- */
/* Kept to the end of the file so the shared look above is untouched and a
   later copy of it can be dropped in without losing these. */
.foot{max-width:980px;margin:32px auto 40px;padding:0 18px;text-align:center}
/* The base .warn is amber. These three say which kind it is -- a note, a
   good thing and a problem should not all look like a warning. */
.warn.info{background:rgba(148,161,178,.10);border-color:rgba(148,161,178,.30);
  color:var(--dim)}
.warn.good{background:rgba(62,207,122,.12);border-color:rgba(62,207,122,.35);
  color:#a8e8c4}
.warn.bad{background:rgba(232,97,95,.12);border-color:rgba(232,97,95,.38);
  color:#f0b3b2}
.answer-row .big-value .tiny{font-size:14px;color:var(--dim);margin-left:2px}
.tbl td .tiny{display:block;line-height:1.35;margin-top:2px}
select{background:var(--surface-2);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:7px 9px;font:inherit;max-width:240px}
select:focus{outline:2px solid var(--accent-2);outline-offset:1px}
input[type=file]{color:var(--dim);font:inherit}
.fld-big{width:100%;background:var(--surface-2);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit}
.losing td{background:rgba(232,97,95,.08)}
/* Money that LEFT should not read like money that arrived: .price is the
   house green, so the leak and short-by columns get their own colour. */
.cost{color:#f0908e;font-weight:600}
.totals td .tiny{display:block;margin-top:2px}