/* Sitework -- the builder and JT's desk.

   The working screens: where a business answers the questions and watches
   its site take shape beside them. Dark and quiet, the same hand as every
   other JTS tool; the business's own site, on the right, is the colourful
   thing on the screen, and nothing here should compete with it.

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

:root {
  --bg:        #0f1216;
  --surface:   #171b21;
  --surface-2: #1e242c;
  --line:      #2b323c;
  --ink:       #e9eef5;
  --dim:       #94a1b2;
  --accent:    #f07aa8;
  --accent-2:  #e0588f;
  --warn:      #e2a13c;
  --bad:       #e8615f;
  /* Starter's free days -- a colour of their own, so "free" never reads as
     the pink that means "press this" or the amber that means "careful". */
  --free:      #3ecf7a;
  --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); }

/* EVERY KIND OF TYPING BOX, listed. An attribute selector matches the
   attribute, not what the browser falls back to -- so a box left off this
   list (the "Until" date on Extras was) is drawn as a bright white system
   box on a dark page. Each entry keeps the same weight, (0,1,1), so the
   narrower rules further down still win where they mean to. */
input[type=text], input[type=number], input[type=email], input[type=date],
input[type=password], input[type=tel], input[type=url], input[type=search],
input:not([type]), 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; }
/* the date picker's own calendar, in the page's dark colours */
input[type=date] { color-scheme: dark; }
input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; }

.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: #2b0716;
  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; }

/* --- shared pieces ---------------------------------------------------------- */
/* 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}

/* The header's link out to the hub. Defined here as well as in
   shopfront.css so the pages that are NOT the shop front -- admin -- still
   lay their header out properly. */
.sf-nav { margin-left: auto; display: flex; align-items: center; gap: 8px;
          flex-wrap: wrap; justify-content: flex-end; }
.sf-nav .sf-tools { display: inline-flex; align-items: center; gap: 7px;
                    text-decoration: none; color: var(--dim);
                    font-size: 14px; }
.sf-nav .sf-tools svg { width: 16px; height: 16px; }

/* =======================================================================
   SITEWORK -- the builder
   ======================================================================= */
body.builder main { max-width: 1560px; }
body.builder .top { max-width: 1560px; flex-wrap: wrap; }
.admin-line { font-size: 13px; }
.bnav { display: flex; gap: 4px; margin-left: 18px; flex-wrap: wrap; }
.bnav a {
  color: var(--dim); text-decoration: none; font-weight: 600; font-size: 14px;
  padding: 7px 12px; border-radius: 9px;
}
.bnav a:hover { background: var(--surface); color: var(--ink); }
.bnav a.on { background: var(--surface-2); color: var(--ink); }
.count {
  display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: #2b0716; font-size: 12px; font-weight: 800;
  text-align: center; line-height: 20px;
}
.top-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.top-right .say-btn { margin-left: 0; }
.pay-link { color: var(--accent); border-color: rgba(240, 122, 168, .45); }
.inline-form { display: inline; margin: 0; }
.go.small { padding: 7px 14px; font-size: 13.5px; }

/* optional / needed, said the same way everywhere (the zero rule: a box
   that has to be filled in says so; one that does not is let be) */
.opt { color: var(--dim); font-style: normal; font-size: 12px; font-weight: 400; }
.need {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: rgba(226, 161, 60, .16); color: #f0cf9a; font-size: 11px;
  font-weight: 700; letter-spacing: .02em; vertical-align: 1px;
}
.muted { color: var(--dim); }
.small { font-size: 13.5px; }
.fld-note.inline { display: inline; margin-left: 8px; }

/* the three columns: steps | the questions | the site */
.bld {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 420px;
  gap: 26px;
  align-items: start;
}
.bld-steps { position: sticky; top: 14px; }
.bld-steps ol { list-style: none; margin: 0; padding: 0; }
.bld-steps li a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9px; text-decoration: none;
  color: var(--dim); font-weight: 600; font-size: 14px;
}
.bld-steps li a:hover { background: var(--surface); color: var(--ink); }
.bld-steps li.on a { background: var(--surface-2); color: var(--ink); }
.bs-n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); font-size: 12px; color: var(--dim);
}
.bld-steps li.seen .bs-n { background: var(--accent); border-color: var(--accent); color: #2b0716; }
.bld-steps li.on .bs-n { border-color: var(--accent); }
.bs-order {
  display: block; margin-top: 12px; padding: 10px; border-radius: 9px;
  border: 1px dashed var(--line); color: var(--accent); text-decoration: none;
  font-weight: 700; font-size: 14px; text-align: center;
}
.bs-order:hover { border-color: var(--accent); }
.step-of { margin: 0 0 4px; font-size: 12px; color: var(--dim);
  text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.pv-small { display: none; margin: 0; }

.bld-form { margin-bottom: 8px; }
.bld-form .fld { margin-bottom: 16px; }
.bld-form input[type=text], .bld-form input[type=email],
.bld-form input[type=date], .bld-form input:not([type]),
.bld-form select, .bld-form textarea { font-size: 15px; }
.bld-form textarea { resize: vertical; line-height: 1.5; }
.bld-form select { max-width: none; width: 100%; }
h3.q {
  margin: 26px 0 8px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink);
}
.fld.narrow { max-width: 260px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 12px; }
.checks.col { flex-direction: column; }
.checks .chk { font-size: 14px; }
.chk input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); }
input[type=color] {
  width: 46px; height: 34px; padding: 2px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}

/* picking one thing out of a set, as cards */
.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin: 6px 0 12px;
}
.pick-grid-sm { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.pick {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  cursor: pointer;
  font-size: 14px;
}
/* The radio is hidden from sight, not from the keyboard: it stays in the
   page so Tab and the arrow keys still reach it. */
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pick:hover { border-color: var(--dim); }
.pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick.on { border-color: var(--accent); background: rgba(240, 122, 168, .08); }
.pick b { font-size: 14px; }
.pick span { color: var(--dim); font-size: 12.5px; line-height: 1.4; }
.pick.tick.on::after {
  content: ""; position: absolute; top: 10px; right: 11px;
  width: 6px; height: 11px; border: solid var(--accent);
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.sw-chip {
  display: flex; align-items: center; justify-content: space-between;
  height: 46px; padding: 0 10px; border-radius: 7px; margin-bottom: 6px;
  background: var(--p-bg);
  border: 1px solid rgba(255, 255, 255, .08);
}
.pick .sw-chip-t { font-weight: 800; font-size: 18px; color: var(--p-ink); }
.pick .sw-chip-b {
  background: var(--p-acc); color: var(--p-acc-ink); font-size: 11px;
  font-weight: 700; padding: 3px 9px; border-radius: 6px;
}
.pick.font .font-sample { color: var(--ink); font-size: 22px; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick.font .font-body { color: var(--dim); font-size: 13px; }

/* hours */
.hours { margin: 4px 0 14px; }
.hrow {
  display: grid;
  grid-template-columns: 96px 86px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.hday { font-weight: 600; font-size: 14px; }
.hspan { display: flex; align-items: center; gap: 8px; }
.bld-form .hspan select { width: auto; max-width: 140px; }
.hrow.closed .hspan { opacity: .35; }
@media (max-width: 560px) {
  .hrow { grid-template-columns: 1fr auto; }
  .hspan { grid-column: 1 / -1; }
}

/* photos: one slot */
.upl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 10px; }
.upl-img {
  width: 120px; height: 80px; object-fit: contain; border-radius: 8px;
  background: repeating-conic-gradient(#2a3039 0% 25%, #232830 0% 50%) 50% / 14px 14px;
  border: 1px solid var(--line);
}
.upl-img.wide { width: 200px; height: 112px; object-fit: cover; }
.upl-img.round { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.upl-btns { display: flex; align-items: center; gap: 12px; }
.upl-said { font-size: 13px; color: var(--dim); }
.upl-said.bad { color: #ffb9b8; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); font-weight: 600;
  font-size: 13.5px; text-decoration: none; cursor: pointer; line-height: 1.3;
}
.btn:hover { border-color: var(--dim); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }

/* lists */
.list-sec { margin-bottom: 18px; }
.list { display: flex; flex-direction: column; gap: 8px; }
.lrow {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface);
}
.lrow-in { flex: 1; min-width: 0; display: grid; gap: 8px; }
.grid-svc { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid-svc textarea { grid-column: 1 / -1; }
.grid-menu { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 0.8fr); }
.grid-menu input[name=menu_desc] { grid-column: 1 / -1; }
.grid-team { grid-template-columns: 1fr 1fr; }
.grid-team textarea { grid-column: 1 / -1; }
.grid-rev { grid-template-columns: 1fr 1fr; }
.grid-rev textarea { grid-column: 1 / -1; }
.grid-faq { grid-template-columns: 1fr; }
.row-tools { display: flex; flex-direction: column; gap: 2px; }
.list .add {
  align-self: flex-start; margin-top: 2px;
  background: transparent; color: var(--accent); border: 1px dashed var(--line);
  font-weight: 700;
}
.list .add:hover { border-color: var(--accent); background: transparent; }
.gal-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 10px; }
.gal-row { flex-direction: column; align-items: stretch; position: relative; }
.gal-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 7px; }
.gal-row .row-tools { position: absolute; top: 14px; right: 14px; flex-direction: row;
  background: rgba(0, 0, 0, .55); border-radius: 8px; }
.gal-row .row-tools .x { color: #fff; }
.team-row { align-items: center; }
.upl-sm { flex-direction: column; gap: 6px; margin: 0; width: 70px; }
.empty-note { padding: 16px 18px; border: 1px dashed var(--line); border-radius: 10px;
  color: var(--dim); }
.empty-note p { margin: 0; }
.slug-in input { min-width: 0; }
.slug-in .pre { white-space: nowrap; }
#slugSaid.bad { color: #ffb9b8; }

.save-sum {
  margin: 10px 0 0; padding: 11px 14px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 13.5px; color: var(--dim);
}
.bld-next { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 22px 0 40px; }
.bld-next .go { margin-left: auto; text-decoration: none; }

/* the preview, beside the questions */
.bld-preview { position: sticky; top: 14px; }
.pv-bar { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; }
.pv-toggle { display: inline-flex; background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; padding: 3px; }
.pv-toggle button { background: transparent; border: 0; padding: 5px 12px; font-size: 13px;
  color: var(--dim); border-radius: 7px; }
.pv-toggle button.on { background: var(--surface-2); color: var(--ink); }
.pv-frame {
  position: relative; overflow: hidden; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 22px; background: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.pv-frame iframe { display: block; border: 0; background: #fff; }
.pv-frame.is-phone { width: 390px; height: min(780px, calc(100vh - 110px)); max-width: 100%; }
.pv-frame.is-phone iframe { width: 100%; height: 100%; }
.pv-frame.is-computer { width: 100%; height: min(640px, calc(100vh - 110px)); border-radius: 10px; }
.pv-frame.is-computer iframe { transform-origin: 0 0; }
.pv-frame.small { width: 281px; height: 520px; }
.pv-frame.small iframe { width: 390px; height: 722px; transform: scale(.72); transform-origin: 0 0; }

@media (max-width: 1260px) {
  .bld { grid-template-columns: 190px minmax(0, 1fr); }
  .bld-preview { display: none; }
  .pv-small { display: block; }
}
@media (max-width: 820px) {
  .bld { grid-template-columns: 1fr; }
  .bld-steps { position: static; }
  .bld-steps ol { display: flex; overflow-x: auto; gap: 4px; padding-bottom: 6px; }
  .bld-steps li a { white-space: nowrap; }
  .bs-order { display: inline-block; }
  .grid-svc, .grid-menu, .grid-team, .grid-rev { grid-template-columns: 1fr; }
  .bnav { margin-left: 0; width: 100%; order: 3; }
}

/* the page for your site */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; } }
.pv-card .pv-frame { margin: 4px 0 10px; }
.ready-list { list-style: none; margin: 0 0 12px; padding: 0; }
.ready-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: 14.5px; }
.ready-list li:last-child { border-bottom: 0; }
.ready-list a { color: var(--ink); text-decoration: none; }
.ready-list a:hover { text-decoration: underline; }
.ready-list .mark { flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line); position: relative; }
.ready-list li.ok .mark { background: #3ecf7a; border-color: #3ecf7a; }
.ready-list li.ok .mark::after { content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #0f1216; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ready-list li.need .mark { border-color: var(--warn); }
.ready-list li.ok a { color: var(--dim); }
.tag { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; background: var(--surface-2); color: var(--dim); }
.ready-list li.need .tag { background: rgba(226, 161, 60, .16); color: #f0cf9a; }
.tag.new { background: var(--accent); color: #2b0716; margin-left: 0; }
.row-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.row-btns form { margin: 0; }
.live-card { border-color: rgba(240, 122, 168, .45); }
.order-card h2 { font-size: 26px; }
.order-list li { margin-bottom: 6px; }

/* messages */
.msg.is-new { border-color: rgba(240, 122, 168, .5); }
.msg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.msg-head .tag { margin-left: 0; }
.msg-when { margin-left: auto; font-size: 12.5px; }
.msg-ways { display: flex; gap: 16px; flex-wrap: wrap; font-weight: 700; margin: 0 0 8px; }
.msg-body { background: var(--surface-2); border-radius: 9px; padding: 10px 13px; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-del { margin: 8px 0 0; text-align: right; }
.msg-photo { display: inline-flex; flex-direction: column; gap: 4px; margin: 10px 0 0; text-decoration: none; }
.msg-photo img { display: block; max-width: min(100%, 320px); max-height: 240px; border-radius: 9px;
  border: 1px solid var(--line); object-fit: cover; }

/* small forms */
.inline-grid { display: flex; gap: 8px; align-items: center; max-width: 520px; margin: 0 0 8px; }
.inline-grid input { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 6px; max-width: 420px; align-items: flex-start; }
.stack .fld, .stack textarea { width: 100%; }
.dom { padding: 10px 0; border-bottom: 1px solid var(--line); }
ol.steps { margin: 8px 0 0; padding-left: 20px; }
ol.steps li { margin-bottom: 4px; }

/* ---- the feedback box in Settings --------------------------------------
   The same card every JTS app carries (jtsapps_site/kit/push_feedback.py). */
.jts-feedback textarea { width: 100%; min-height: 92px; resize: vertical; }
.jts-feedback label.f > span { display: block; font-size: 12.5px; color: var(--dim); margin-bottom: 4px; }
.jts-feedback .fb-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 10px 0 0;
}
.jts-feedback .fb-row select { width: auto; flex: 0 1 auto; }
.jts-feedback .fb-row .go { margin-left: auto; }

/* =======================================================================
   SITEWORK -- the sales page. Scoped to the shop front, so nothing here can
   reach a working screen.
   ======================================================================= */
body.shopfront .sw-sec { margin: clamp(56px, 7vw, 96px) 0 0; }
body.shopfront .sw-samples {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
  margin-top: 22px;
}
body.shopfront .sw-sample {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 2px solid var(--sf-edge); border-radius: var(--sf-r);
  background: var(--sf-panel); overflow: hidden;
  box-shadow: var(--sf-shadow);
  transition: transform .15s ease;
}
body.shopfront .sw-sample:hover { transform: translate(-2px, -2px); }
body.shopfront .sw-sample-bar { display: flex; gap: 5px; padding: 9px 12px;
  background: rgba(255, 255, 255, .04); border-bottom: 1px solid var(--sf-edge); }
body.shopfront .sw-sample-bar i { width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); }
body.shopfront .sw-sample-page { display: flex; flex-direction: column; gap: 12px;
  padding: 16px; min-height: 170px; background: var(--sb); color: var(--si); }
body.shopfront .sw-sample-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.shopfront .sw-sample-top b { font-size: 14px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: var(--si); }
body.shopfront .sw-sample-top em { font-style: normal; font-size: 10px; font-weight: 800;
  padding: 3px 8px; border-radius: 5px; background: var(--sa); color: var(--sai); }
body.shopfront .sw-sample-lines { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
body.shopfront .sw-sample-lines i { display: block; height: 11px; border-radius: 3px;
  background: var(--si); opacity: .85; width: 86%; }
body.shopfront .sw-sample-lines i + i { width: 58%; opacity: .35; height: 8px; }
body.shopfront .sw-sample-btn { display: block; width: 96px; height: 26px; border-radius: 6px;
  background: var(--sa); margin-top: auto; }
body.shopfront .sw-sample-meta { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 16px; }
body.shopfront .sw-sample-meta span { color: var(--sf-dim); font-size: 13.5px; }
body.shopfront .sw-points {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px; margin-top: 22px;
}
body.shopfront .sw-point { border: 2px solid var(--sf-edge); border-radius: var(--sf-r);
  padding: 20px 22px; background: var(--sf-panel); }
body.shopfront .sw-point h3 { margin: 0 0 8px; }
body.shopfront .sw-point p { margin: 0; color: var(--sf-dim); max-width: 46ch; }
body.shopfront .sw-how { list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
  counter-reset: sw; }
body.shopfront .sw-how li { counter-increment: sw; position: relative;
  padding: 22px 22px 20px; border: 2px solid var(--sf-edge); border-radius: var(--sf-r); }
body.shopfront .sw-how li::before { content: counter(sw); display: inline-flex;
  width: 34px; height: 34px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--sf-accent); color: #2b0716;
  font-weight: 800; margin-bottom: 10px; }
body.shopfront .sw-how h3 { margin: 0 0 6px; }
body.shopfront .sw-how p { margin: 0; color: var(--sf-dim); }
body.shopfront .sw-start { max-width: 640px; margin: clamp(56px, 7vw, 96px) auto 0; }
body.shopfront .sw-faq { max-width: 860px; margin-top: 16px; }
body.shopfront .sw-q { border-bottom: 1px solid var(--sf-edge); padding: 6px 0; }
body.shopfront .sw-q summary { cursor: pointer; font-weight: 700; font-size: 17px; padding: 12px 0; }
body.shopfront .sw-q p { margin: 0 0 14px; color: var(--sf-dim); max-width: 70ch; }
body.shopfront .sw-not { margin: 16px 0 0; padding-left: 20px; color: var(--sf-dim); }
body.shopfront .sw-not li { margin-bottom: 6px; }
body.shopfront .sw-price-line { margin-top: 22px; }


/* jts-more: written by jtsapps_site/kit/push_hublink.py */
/* The way out to the rest of the JTS tools, top of every app's Settings.
   Quiet -- it is a door, not a thing being sold, so it is outlined rather
   than filled and sits where the gear in the header already is. Its own
   colours: the six stylesheets do not share a button rule. */
/* NO NEGATIVE MARGIN. -8px pulled the button's box down over the
   <h1> by 4px -- harmless here because the button still won the
   hit test, but an overlapping box stealing a click is a fault
   this project has already chased once, and it is not worth
   carrying for four pixels. Measured clear at 1700 and 430 wide. */
.jts-more{display:flex;justify-content:flex-end;margin:0 0 2px}
.jts-more-btn{display:inline-block;text-decoration:none;
  padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;
  color:var(--accent,#7bc043);background:transparent;
  border:1px solid var(--line,#2b323c)}
.jts-more-btn:hover{border-color:var(--accent,#7bc043);
  background:rgba(127,127,127,.10)}
/* end jts-more */

/* a link dressed as the main button: the base .go rule was written for a
   <button>, which brings its own rounding and no underline */
a.go { display: inline-block; border-radius: 9px; text-decoration: none; }

/* a button that cannot be pressed yet has to look it */
button:disabled, button:disabled:hover {
  opacity: .45; cursor: not-allowed; filter: none;
}

/* The start box: every field the full width of the card. The shared rule
   only stretches typed email boxes, so the business name and password came
   out a third as wide as the email between them. */
body.shopfront .sw-start .fld-in input { flex: 1 1 auto; width: 100%; }


/* ---- a box that opens for one choice ----------------------------------
   "Something else" opens a box to say what the business is; "Something not
   here?" opens the request for a part of their own. Both sit right under
   what opened them, outlined in the accent so it is plain where the cursor
   went. */
.kind-box, .custom-box {
  margin: 2px 0 18px;
  padding: 14px 16px 4px;
  border-radius: 10px;
  border: 1.5px solid var(--accent);
  background: rgba(240, 122, 168, .06);
}
.custom-state { margin: 0 0 12px; font-size: 13.5px; color: var(--dim); }
.custom-state.is-asked { color: #f0cf9a; }
.custom-state.is-approved { color: #7fdc9f; }
.custom-state.is-declined { color: #f0a09e; }
.pick.ask { border-style: dashed; }
.pick.ask.on { border-style: solid; }
.asked-part {
  margin: 8px 0 14px; padding: 12px 16px; border-radius: 10px;
  border: 1px dashed var(--line); background: var(--surface-2);
}
.asked-part h3 { margin: 0 0 6px; }

/* ---- make your own colours --------------------------------------------- */
.pick.swatch.own .sw-chip { position: relative; }
.pick .sw-wheel {
  position: absolute; right: -7px; top: -7px;
  width: 20px; height: 20px; border-radius: 50%;
  background: conic-gradient(#ff5a5a, #ffb04d, #f2ec55, #5ad97a, #4dc0ff,
                             #7b5cff, #ff5ad2, #ff5a5a);
  border: 2px solid var(--surface-2);
}
.own-cols {
  margin: 2px 0 16px; padding: 14px 16px;
  border-radius: 10px; border: 1.5px solid var(--accent);
  background: rgba(240, 122, 168, .05);
}
.col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px; margin: 8px 0;
}
.col-pick {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line);
}
.col-pick:hover { border-color: var(--dim); }
.col-pick input[type=color] { width: 44px; height: 40px; flex: none; }
.col-pick span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.col-pick b { font-size: 13.5px; }
.col-pick i { font-style: normal; color: var(--dim); font-size: 12px; }
.col-warn {
  margin: 6px 0; padding: 8px 12px; border-radius: 8px;
  background: rgba(226, 161, 60, .14); color: #f0cf9a; font-size: 13.5px;
}

/* ---- the little drawing of each layout ---------------------------------
   Five blocks per drawing, placed differently for each layout, in the
   colours of a finished page: a light ground, a dark photo, white panels,
   grey lines and the accent for the button. */
.pick .lay {
  position: relative; display: block; height: 64px; margin-bottom: 7px;
  border-radius: 7px; overflow: hidden;
  background: #f3efe8; border: 1px solid rgba(255, 255, 255, .06);
}
.lay i { position: absolute; display: block; border-radius: 2px; background: #cdc5b8; }
.lay i.dk, .lay-bold i:nth-child(1), .lay-poster i:nth-child(1),
.lay-side i:nth-child(1) { background: #2e333b; }

/* bold: a dark band across the top, big white title, a button */
.lay-bold i:nth-child(1) { left: 0; top: 0; width: 100%; height: 60%; border-radius: 0; }
.lay-bold i:nth-child(2) { left: 8%; top: 17%; width: 48%; height: 9px; background: #fff; }
.lay-bold i:nth-child(3) { left: 8%; top: 38%; width: 18%; height: 7px; background: var(--accent); }
.lay-bold i:nth-child(4) { left: 8%; top: 73%; width: 72%; height: 4px; }
.lay-bold i:nth-child(5) { left: 8%; top: 85%; width: 50%; height: 4px; }
/* classic: everything centred, a short rule under the title */
.lay-classic i:nth-child(1) { left: 0; top: 0; width: 100%; height: 1px; }
.lay-classic i:nth-child(2) { left: 26%; top: 20%; width: 48%; height: 8px; background: #3a3f47; }
.lay-classic i:nth-child(3) { left: 44%; top: 38%; width: 12%; height: 2px; background: var(--accent); }
.lay-classic i:nth-child(4) { left: 18%; top: 58%; width: 64%; height: 4px; }
.lay-classic i:nth-child(5) { left: 30%; top: 71%; width: 40%; height: 4px; }
/* clean: words on the left, a photo on the right */
.lay-clean i:nth-child(1) { right: 8%; top: 14%; width: 34%; height: 58%; background: #b8c3ce; border-radius: 4px; }
.lay-clean i:nth-child(2) { left: 8%; top: 22%; width: 38%; height: 8px; background: #3a3f47; }
.lay-clean i:nth-child(3) { left: 8%; top: 44%; width: 16%; height: 7px; background: var(--accent); }
.lay-clean i:nth-child(4) { left: 8%; top: 84%; width: 84%; height: 4px; }
.lay-clean i:nth-child(5) { display: none; }
/* poster: the photo fills it, a big title low on the left */
.lay-poster i:nth-child(1) { left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; }
.lay-poster i:nth-child(2) { left: 8%; top: 50%; width: 62%; height: 12px; background: #fff; }
.lay-poster i:nth-child(3) { left: 8%; top: 74%; width: 20%; height: 7px; background: var(--accent); }
.lay-poster i:nth-child(4), .lay-poster i:nth-child(5) { display: none; }
/* cards: white panels on a soft ground */
.lay-cards { background: #e7e0d5 !important; }
.lay-cards i:nth-child(1) { left: 7%; top: 10%; width: 86%; height: 34%; background: #fff; border-radius: 5px; }
.lay-cards i:nth-child(2) { left: 7%; top: 52%; width: 41%; height: 38%; background: #fff; border-radius: 5px; }
.lay-cards i:nth-child(3) { left: 52%; top: 52%; width: 41%; height: 38%; background: #fff; border-radius: 5px; }
.lay-cards i:nth-child(4) { left: 13%; top: 30%; width: 16%; height: 5px; background: var(--accent); }
.lay-cards i:nth-child(5) { left: 13%; top: 18%; width: 40%; height: 5px; background: #3a3f47; }
/* side menu: a dark column down the left */
.lay-side i:nth-child(1) { left: 0; top: 0; width: 26%; height: 100%; border-radius: 0; }
.lay-side i:nth-child(2) { left: 5%; top: 16%; width: 15%; height: 5px; background: #fff; }
.lay-side i:nth-child(3) { left: 5%; top: 34%; width: 15%; height: 6px; background: var(--accent); }
.lay-side i:nth-child(4) { left: 34%; top: 20%; width: 42%; height: 8px; background: #3a3f47; }
.lay-side i:nth-child(5) { left: 34%; top: 44%; width: 56%; height: 4px; }
/* brochure: headings down the left, words beside them */
.lay-brochure i:nth-child(1) { left: 0; top: 0; width: 100%; height: 4px; background: var(--accent); border-radius: 0; }
.lay-brochure i:nth-child(2) { left: 8%; top: 22%; width: 20%; height: 6px; background: #3a3f47; }
.lay-brochure i:nth-child(3) { left: 36%; top: 22%; width: 56%; height: 4px; }
.lay-brochure i:nth-child(4) { left: 8%; top: 60%; width: 20%; height: 6px; background: #3a3f47; }
.lay-brochure i:nth-child(5) { left: 36%; top: 60%; width: 46%; height: 4px; }

/* ---- what the site did ------------------------------------------------
   Numbers only (stats.py). Quiet on purpose: the pink is for pressing, and
   a chart is read, not pressed. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stats-card .bars { display: flex; align-items: flex-end; gap: 3px; height: 72px; margin: 4px 0 2px;
  padding-bottom: 1px; border-bottom: 1px solid var(--line); }
.stats-card .bars i { flex: 1 1 0; min-width: 2px; background: #3d4755; border-radius: 3px 3px 0 0; }
.stats-card .bars i:last-child { background: var(--dim); }
.stats-card .bars i:hover { background: var(--ink); }
.bars-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); margin: 0 0 12px; }
table.stats { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.stats th, table.stats td { padding: 7px 4px; border-bottom: 1px solid var(--line); text-align: right; }
table.stats th[scope=row], table.stats thead th:first-child { text-align: left; font-weight: 600; }
table.stats thead th { font-size: 12.5px; font-weight: 600; color: var(--dim); }
table.stats td { font-weight: 700; width: 24%; }

/* ---- getting found on Google ------------------------------------------
   The search-result card is drawn in Google's own light colours on
   purpose: it is a picture of somewhere else, not part of this screen. */
.g-card { background: #fff; color: #202124; border-radius: var(--r); padding: 16px 18px; margin: 6px 0 18px;
  font-family: Arial, Helvetica, sans-serif; max-width: 640px; }
.g-site { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.3; }
.g-site b { font-weight: 400; color: #202124; }
.g-ico { width: 28px; height: 28px; border-radius: 50%; background: #f1f3f4; border: 1px solid #dadce0;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #3c4043; flex: none; }
.g-url { color: #4d5156; font-size: 12px; }
.g-title { color: #1a0dab; font-size: 20px; line-height: 1.3; margin: 8px 0 4px; }
.g-desc { color: #4d5156; font-size: 14px; line-height: 1.58; margin: 0; }
.copy-list { margin: 6px 0 8px; border-top: 1px solid var(--line); }
.copy-row { display: grid; grid-template-columns: 130px 1fr; gap: 4px 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.copy-row dt { color: var(--dim); font-size: 13.5px; }
.copy-row dd { margin: 0; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.copy-val { overflow-wrap: anywhere; }
.copy-btn { font-size: 13px; }
.copy-btn.done { color: #6fd08c; }
.copy-hours { display: grid; gap: 2px; font-size: 14px; }
@media (max-width: 560px) { .copy-row { grid-template-columns: 1fr; } }

/* ---- pages (the Pages step) ---------------------------------------------- */
.page-count {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--dim);
}
.page-count b { color: var(--ink); font-size: 18px; }
.page-count.full { border-color: var(--warn); }
.grid-page { grid-template-columns: 1fr; }
.grid-page .fld-note { margin: -4px 0 0; }
.page-row .upl-img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; }


/* =======================================================================
   THE THREE WAYS TO HAVE A SITE (pricing.py) -- on the sales page, in the
   builder's order page, and on JT's desk.
   ======================================================================= */

/* ---- the sales page: three cards, Own It in the middle and bigger ----- */
body.shopfront .sw-plans {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  gap: 20px;
  align-items: stretch;
  margin-top: 26px;
}
@media (max-width: 960px) {
  body.shopfront .sw-plans { grid-template-columns: 1fr; }
  /* On a phone the one to look at comes first. */
  body.shopfront .sw-plan-main { order: -1; }
}
body.shopfront .sw-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--sf-edge);
  border-radius: var(--sf-r);
  background: var(--sf-panel);
  padding: 26px 24px 22px;
}
body.shopfront .sw-plan-main {
  border-color: var(--sf-accent);
  box-shadow: var(--sf-shadow);
  padding-top: 34px;
  margin-top: -8px;          /* a margin, not a transform: the scroll reveal
                                sets transform:none once it has run */
}
@media (max-width: 960px) {
  body.shopfront .sw-plan-main { margin-top: 0; }
}
body.shopfront .sw-plan-flag {
  position: absolute;
  top: -14px;
  left: 24px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--sf-accent);
  color: #2b0716;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.shopfront .sw-plan h3 { margin: 0 0 4px; font-size: 22px; }
body.shopfront .sw-plan-price {
  margin: 0;
  font-family: "Bricolage Grotesque", Archivo, sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
body.shopfront .sw-plan-main .sw-plan-price { color: var(--sf-accent); }
body.shopfront .sw-plan-say { margin: 4px 0 14px; color: var(--sf-dim); }
body.shopfront .sw-plan-points {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.shopfront .sw-plan-points li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
}
body.shopfront .sw-plan-points li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .5em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--sf-accent);
  border-bottom: 2px solid var(--sf-accent);
  transform: rotate(-45deg);
}
body.shopfront .sw-plan-go { margin-top: 16px; text-align: center; }
/* The note takes the free space, so every card's button lands on the same
   line however long its note is. */
body.shopfront .sw-plan-refund {
  margin: auto 0 0;
  font-size: 12.5px;
  color: var(--sf-dim);
}

/* the comparison table: scrolls on its own on a phone, never the page */
body.shopfront .sw-compare-wrap {
  margin-top: 30px;
  overflow-x: auto;
  border: 2px solid var(--sf-edge);
  border-radius: var(--sf-r);
}
body.shopfront .sw-compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14.5px;
}
body.shopfront .sw-compare th,
body.shopfront .sw-compare td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--sf-edge);
  vertical-align: top;
}
body.shopfront .sw-compare thead th {
  font-family: "Bricolage Grotesque", Archivo, sans-serif;
  font-size: 17px;
}
body.shopfront .sw-compare tbody th {
  color: var(--sf-dim);
  font-weight: 600;
  white-space: nowrap;
}
body.shopfront .sw-compare tbody tr:last-child th,
body.shopfront .sw-compare tbody tr:last-child td { border-bottom: 0; }
body.shopfront .sw-compare .sw-compare-main {
  background: rgba(240, 122, 168, .07);
}

/* ---- the Custom request form ------------------------------------------ */
body.shopfront .custom-head { max-width: 760px; }
body.shopfront .custom-form,
body.shopfront .custom-done { max-width: 760px; }
body.shopfront .custom-form input[type=text],
body.shopfront .custom-form input[type=email],
body.shopfront .custom-form input[type=tel],
body.shopfront .custom-form select,
body.shopfront .custom-form textarea { width: 100%; }
body.shopfront .custom-form fieldset { border: 0; padding: 0; margin: 0 0 14px; }
body.shopfront .custom-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 0 18px;
}
body.shopfront .custom-alt { max-width: 760px; margin-top: 18px; }
/* A box only a robot fills in: off the screen, out of the tab order. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- the builder's order page ----------------------------------------- */
.plan-pick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 16px;
  align-items: stretch;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
}
/* Notes take the free space; the one button sits at the very bottom, so
   the three buttons line up however long each card's notes are. */
.plan-notes { margin-top: auto; padding-top: 6px; }
.plan-notes .fld-note { margin: 0 0 8px; }
.plan-card form { margin: 6px 0 0; }
.plan-card .plan-go { display: block; width: 100%; text-align: center;
  margin-top: 6px; }
.plan-main { border-color: var(--accent); padding-top: 26px; }
.plan-flag {
  position: absolute;
  top: -11px;
  left: 18px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #2b0716;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.plan-price { margin: 0; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.plan-main .plan-price { color: var(--accent); }
.plan-say { margin: 2px 0 10px; color: var(--dim); }
.plan-points { margin: 0 0 14px; padding-left: 18px; font-size: 14px; }
.plan-points li { margin-bottom: 4px; }
.plan-card .warn { margin-bottom: 12px; }

/* ---- plan first: the price, the free days and the limits, pronounced ---
   (JT, 2026-09-24). Every card leaves room for a flag on its top edge, so
   the three line up whichever ones carry one. */
.plan-pick .plan-card { padding-top: 26px; }
.plan-card h2 { margin: 0 0 2px; }
.plan-pick .plan-price { font-size: 32px; letter-spacing: -.01em; }
.plan-flag-free { background: var(--free); color: #062a15; }
.plan-flag-mine { background: var(--ink); color: var(--bg); }
.plan-mine { border-color: var(--ink); }
.plan-free-line {
  margin: 8px 0 0;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(62, 207, 122, .12);
  border: 1px solid rgba(62, 207, 122, .45);
  color: #a8f2c7;
  font-weight: 800;
  font-size: 14.5px;
}
.plan-limits {
  margin: 14px 0 12px;
  border-top: 1px solid var(--line);
}
.plan-limits div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.plan-limits dt { color: var(--dim); flex: none; }
.plan-limits dd { margin: 0; font-weight: 700; text-align: right;
  overflow-wrap: anywhere; }

/* the line under the header while building: which plan, and how full */
.plan-line { background: var(--surface); border: 1px solid var(--line); }
.plan-line a { margin-left: auto; white-space: nowrap; }
.plan-line-free { color: var(--free); }

/* a layout the plan does not include: shown, marked, not pickable */
.pick.off { opacity: .55; cursor: not-allowed; }
.pick.off:hover { border-color: var(--line); }
.plan-tag {
  align-self: flex-start;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--dim) !important;
  font-size: 11px !important;
  font-weight: 700;
}

/* the DNS settings for connecting their own domain */
.dns-steps { margin-top: 12px; }
.dns-tbl { max-width: 560px; margin: 6px 0 8px; }
.dns-tbl code { font-size: 12.5px; word-break: break-all; }

/* a note from JTS, set apart so it reads as his words */
.review-note {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 9px 9px 0;
}
.review-note p { margin: 0 0 6px; }
.review-note p:last-child { margin-bottom: 0; }
.refund-line { margin-top: 8px; }
.refund-line .fld-note { display: inline; }
.billing-card h2 { font-size: 19px; }

/* ---- JT's desk --------------------------------------------------------- */
.review-card { border-color: rgba(240, 122, 168, .55); }
.send-back { margin-top: 14px; max-width: 560px; }
.send-back textarea { font-size: 14px; font-weight: 400; color: var(--ink); }
.refund-form { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.site-filter { max-width: none; flex-wrap: wrap; margin-bottom: 12px; }
.site-filter input[type=search] { flex: 1 1 220px; }
.site-filter select { width: auto; }
.creq { padding: 12px 0; border-bottom: 1px solid var(--line); }
.creq:last-child { border-bottom: 0; }
.creq-top { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.creq-when { margin-left: auto; }
.creq .tiny { display: block; }
.creq-form { margin-top: 8px; max-width: 640px; }
.creq-form select { width: auto; flex: 0 0 auto; }
.creq-new { box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
tr.q-order td:first-child, tr.q-changes td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* ---- plan first, on the shop front (JT, 2026-09-24) ------------------- */
body.shopfront .sw-plan-flag-free { background: var(--free, #3ecf7a); color: #062a15; }
body.shopfront .sw-plan-free {
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(62, 207, 122, .12);
  border: 1px solid rgba(62, 207, 122, .45);
  color: #a8f2c7;
  font-weight: 800;
  font-size: 14.5px;
}
body.shopfront .sw-plan-limits { margin: 0 0 16px; border-top: 1px solid var(--sf-edge); }
body.shopfront .sw-plan-limits div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--sf-edge);
  font-size: 14px;
}
body.shopfront .sw-plan-limits dt { color: var(--sf-dim); flex: none; }
body.shopfront .sw-plan-limits dd { margin: 0; font-weight: 700; text-align: right;
  overflow-wrap: anywhere; }
/* the plan question on the sign-up form */
body.shopfront .sw-pick { border: 0; margin: 4px 0 14px; padding: 0;
  display: grid; gap: 8px; }
body.shopfront .sw-pick legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
body.shopfront .sw-pick-one {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 2px solid var(--sf-edge); border-radius: 10px;
  cursor: pointer;
}
body.shopfront .sw-pick-one:has(input:checked),
body.shopfront .sw-pick-one.on { border-color: var(--sf-accent); }
body.shopfront .sw-pick-one input { width: auto; margin: 0; }
body.shopfront .sw-pick-one span { color: var(--sf-dim); font-size: 14px; }