/* VerbalIt Pricing Calculator — house style (forest theme, ember accent) */
:root {
  --ember:#E8722A; --ember-dark:#c95f1f; --charcoal:#2A2A2A;
  --bg:#F7F4EF; --surface:#fff; --border:#E8DDD0;
  --text:#2A2A2A; --text-mid:#5a5650; --text-muted:#8a847b;
  --forest:#2f5d50; --success:#2e8b57; --low:#c0392b;
  --radius:14px; --shadow:0 2px 10px rgba(42,42,42,.06);
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased;
}

/* Header + tabs */
.pc-header { background:var(--forest); color:#fff; padding:16px 20px; }
.pc-header .wrap { max-width:1080px; margin:0 auto; display:flex; align-items:center; gap:12px; }
.brand { font-weight:800; font-size:18px; letter-spacing:-.3px; }
.brand .dot { color:var(--ember); }
.home-link { margin-left:auto; color:#d9e6e1; text-decoration:none; font-size:14px; }
.home-link:hover { color:#fff; }

/* Intro block */
.pc-intro { background:#fff; border-bottom:1px solid var(--border); }
.pc-intro .wrap { max-width:1080px; margin:0 auto; padding:24px 20px 22px; }
.intro-title { font-size:24px; margin:0 0 6px; letter-spacing:-.5px; color:var(--charcoal); }
.intro-lead { margin:0 0 16px; color:var(--text-mid); max-width:680px; }
.intro-steps { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.intro-step { flex:1 1 280px; display:flex; gap:12px; align-items:flex-start;
  background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:13px 15px; }
.intro-num { flex:0 0 26px; width:26px; height:26px; border-radius:50%; background:var(--ember); color:#fff;
  font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.intro-step strong { display:block; font-size:15px; color:var(--charcoal); margin-bottom:2px; }
.intro-step span { font-size:13px; color:var(--text-mid); line-height:1.45; }
.intro-note { margin:0; font-size:13px; color:var(--text-muted); max-width:720px; }
.intro-note a { color:var(--ember-dark); font-weight:700; }

.tabs-wrap { background:var(--forest); }
.tabs { max-width:1080px; margin:0 auto; padding:0 20px; display:flex; gap:6px; }
.tab { background:rgba(255,255,255,.14); color:#eaf2ef; border:none; padding:13px 22px;
  border-radius:12px 12px 0 0; font:inherit; font-weight:700; font-size:15px; cursor:pointer; }
.tab:hover { background:rgba(255,255,255,.24); }
.tab.active { background:var(--bg); color:var(--charcoal); }

/* Layout */
.pc-main { max-width:1080px; margin:0 auto; padding:22px 20px 64px; }
.pc-main h1 { font-size:19px; margin:4px 0 6px; letter-spacing:-.3px; color:var(--charcoal); }
.pc-main .lead { color:var(--text-mid); margin:0 0 20px; max-width:700px; }

.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px; margin-bottom:18px; }
.card h2 { font-size:13px; margin:0 0 14px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-mid); }
.card-head { display:flex; align-items:center; justify-content:space-between; }
.card-head h2 { margin-bottom:0; }

.mini { font-size:12px; color:var(--text-muted); }
.linkbtn { background:none; border:none; color:var(--ember-dark); font:inherit; font-weight:700; cursor:pointer; padding:0; text-decoration:underline; }
.empty { color:var(--text-muted); text-align:center; padding:22px 8px; }

/* Inputs */
select,input[type=number],input[type=text] { font:inherit; padding:8px 10px; border:1px solid var(--border);
  border-radius:9px; background:#fff; color:var(--text); width:100%; }
select:focus,input:focus { outline:2px solid rgba(232,114,42,.35); border-color:var(--ember); }
select { padding-right:28px; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a847b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; }

/* Buttons */
.btn { display:block; width:100%; font:inherit; font-weight:700; cursor:pointer; border:none;
  border-radius:10px; padding:11px 14px; text-align:center; text-decoration:none; }
.btn-primary { background:var(--ember); color:#fff; }
.btn-primary:hover { background:var(--ember-dark); }
.btn-primary.slim { width:auto; padding:9px 16px; font-size:14px; }
.btn-ghost { background:#f3ece2; color:var(--charcoal); }
.btn-ghost:hover { background:#ece2d4; }
.btn-danger { background:var(--low); color:#fff; }
.btn-danger:hover { background:#a5301f; }

/* Confirm modal */
.pc-modal { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(42,42,42,.45); }
.pc-modal[hidden] { display:none; }
.pc-modal-card { background:var(--surface); border-radius:var(--radius); box-shadow:0 12px 40px rgba(42,42,42,.25);
  padding:22px 22px 18px; max-width:380px; width:100%; }
.pc-modal-card h3 { margin:0 0 8px; font-size:18px; color:var(--charcoal); }
.pc-modal-card p { margin:0 0 18px; color:var(--text-mid); font-size:14px; line-height:1.5; }
.pc-modal-btns { display:flex; gap:10px; }
.pc-modal-btns .btn { flex:1; }

/* ===== SERVICE BUILDER ===== */
/* list vs edit mode */
#view-services .edit-mode { display:none; }
#view-services.editing .list-mode { display:none; }
#view-services.editing .edit-mode { display:block; }
#view-services.editing > h1, #view-services.editing > .lead { display:none; }

/* compact service cards (Jobs-screen feel) */
#svc-list { margin-top:14px; }
.svc-card { display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:#fffdfa; border:1px solid var(--border); border-radius:12px; padding:14px 16px;
  margin-bottom:10px; cursor:pointer; font:inherit; transition:border-color .12s, box-shadow .12s; }
.svc-card:hover { border-color:var(--ember); box-shadow:0 2px 10px rgba(232,114,42,.12); }
.svc-card-name { font-weight:700; font-size:16px; color:var(--charcoal); }
.svc-card-name em { color:var(--text-muted); font-weight:600; }
.svc-card-shape { color:var(--text-mid); font-size:13px; margin-left:auto; white-space:nowrap; }
.svc-card-go { color:var(--ember); font-size:22px; font-weight:700; line-height:1; margin-left:4px; }

.pill { font-size:11px; font-weight:700; background:#e7f0ec; color:var(--forest); padding:4px 11px; border-radius:999px; white-space:nowrap; }

/* focused edit screen */
.se-head { display:flex; align-items:center; gap:10px; margin:-2px 0 16px; }
.se-back { background:none; border:none; color:var(--ember-dark); font:inherit; font-weight:700; font-size:15px; cursor:pointer; padding:4px 0; margin-right:auto; }
.se-back:hover { text-decoration:underline; }
.se-field { display:block; margin-bottom:16px; }
.se-field > span { display:block; font-size:13px; font-weight:700; color:var(--text-mid); margin-bottom:5px; }
.svc-name { font-weight:700; font-size:16px; }
.se-field-inline { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.se-field-inline > span { font-size:13px; font-weight:700; color:var(--text-mid); }
.se-field-inline .unit-in { width:150px; flex:0 0 150px; }
.se-hint { font-size:12px; color:var(--text-muted); margin:0 0 10px; }
.sb-sub { font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); font-weight:700; margin:18px 0 6px; }
.sb-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.sb-row .lbl { flex:1; }
.sb-row .val { width:90px; flex:0 0 90px; text-align:right; }
.sb-row .dollar,.sb-row .times { color:var(--text-muted); font-weight:700; }
.rowdel { border:none; background:#f3ece2; color:var(--text-mid); width:30px; height:30px; flex:0 0 30px;
  border-radius:8px; font-size:17px; cursor:pointer; line-height:1; }
.rowdel:hover { background:#f0d9cb; color:var(--low); }
.rowdel.big { width:32px; height:32px; flex:0 0 32px; }
.addsmall { background:none; border:1px dashed var(--border); color:var(--ember-dark);
  border-radius:8px; padding:7px 12px; font:inherit; font-weight:700; cursor:pointer; font-size:13px; margin-bottom:4px; }
.addsmall:hover { background:#fdf3ec; }
.sb-toggle { display:flex; align-items:center; gap:9px; margin:18px 0 6px; font-weight:600; font-size:14px; cursor:pointer; }
.sb-toggle input { width:auto; }
.sb-cplx,.sb-unit { padding:10px 0 2px; border-top:1px dashed var(--border); }
.se-ok { margin-top:22px; }

/* ===== JOB TABLE ===== */
.table-scroll { overflow-x:auto; }
.jt { width:100%; min-width:720px; border-collapse:collapse; font-size:14px; }
.jt th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.3px;
  color:var(--text-muted); font-weight:700; padding:0 6px 8px; border-bottom:2px solid var(--border); white-space:nowrap; }
.jt td { padding:7px 6px; border-bottom:1px solid var(--border); vertical-align:middle; }
.jt tbody tr:last-child td { border-bottom:1px solid var(--border); }
.jt .svc { font-weight:700; white-space:nowrap; }
.jt select { min-width:96px; }
.jt input.num { width:62px; min-width:56px; text-align:right; }
.jt td:last-child { padding-right:2px; }
.jt .ralign { text-align:right; }
.jt td.money { font-weight:700; white-space:nowrap; text-align:right; }
.jt small { color:var(--text-muted); font-weight:600; }
.jt .rate { font-size:12px; font-weight:700; color:var(--forest); background:#e7f0ec; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.jt .rate.low { color:#fff; background:var(--low); }
.jt .rate.na { color:var(--text-muted); background:#f0ece5; }
.jt .del { border:none; background:#f3ece2; color:var(--text-mid); width:28px; height:28px; border-radius:7px; font-size:16px; cursor:pointer; line-height:1; }
.jt .del:hover { background:#f0d9cb; color:var(--low); }
.jt .mini { color:var(--text-muted); }
.jt tfoot td { border-top:2px solid var(--charcoal); border-bottom:none; padding-top:12px; font-weight:700; }
.empty-row { text-align:center; color:var(--text-muted); padding:24px 8px; }

.addbar { margin-top:14px; }
.addbar select { max-width:360px; }

/* Job tab: full-width table on top, price + extras side-by-side below */
.job-bottom { display:grid; grid-template-columns:320px 1fr; gap:18px; align-items:start; }
.job-cards { display:none; }

/* Result panel */
.result { }
.result .row { display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:14px; }
.result .row span:last-child { font-weight:700; white-space:nowrap; }
.result .row.sub { border-top:1px solid var(--border); margin-top:6px; padding-top:10px; }
.result .row.total { font-size:20px; font-weight:800; border-top:2px solid var(--charcoal); margin-top:8px; padding-top:12px; }
.result .label { color:var(--text-mid); font-weight:600; }
.rate-box { background:var(--forest); color:#fff; border-radius:12px; padding:14px; margin:14px 0 6px; text-align:center; }
.rate-num { font-size:30px; font-weight:800; letter-spacing:-.5px; }
.rate-num.rate-low { color:#ffd2c9; }
.rate-lbl { font-size:12px; opacity:.85; text-transform:uppercase; letter-spacing:.5px; }
.rate-sub { font-size:12px; opacity:.8; margin-top:4px; }
.freq-note { font-size:12px; color:var(--ember-dark); background:#fdf0e6; border-radius:8px; padding:7px 10px; margin-top:8px; }

/* Job extras */
.switch-row { display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px; margin-bottom:14px; cursor:pointer; }
.switch-row input { width:auto; }
.field-block { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.field-block > span { font-size:12px; color:var(--text-muted); font-weight:600; }
.field-hint { font-size:11px; color:var(--text-muted); line-height:1.4; margin-top:2px; }
.field-hint strong { color:var(--text-mid); }
.travel-inline { display:flex; gap:10px; }
.travel-inline .field-block { flex:1; }

/* Save card */
.save-row { display:flex; gap:10px; flex-wrap:wrap; }
.sbtn { flex:1 1 160px; display:flex; align-items:center; gap:11px; text-align:left;
  background:#fffdfa; border:1px solid var(--border); border-radius:11px; padding:11px 13px;
  font:inherit; cursor:pointer; transition:border-color .12s, box-shadow .12s, background .12s; }
.sbtn:hover { border-color:var(--ember); box-shadow:0 2px 10px rgba(232,114,42,.12); }
.sbtn-ic { font-size:18px; line-height:1; flex:0 0 auto; width:24px; text-align:center; }
.sbtn-txt { display:flex; flex-direction:column; gap:1px; line-height:1.25; }
.sbtn-txt strong { font-size:14px; font-weight:700; color:var(--charcoal); }
.sbtn-txt small { font-size:11px; color:var(--text-muted); font-weight:600; }
.sbtn-danger { border-style:dashed; }
.sbtn-danger:hover { border-color:var(--low); box-shadow:0 2px 10px rgba(192,57,43,.12); background:#fdf2f0; }
.sbtn-danger .sbtn-txt strong { color:var(--low); }
.share-note { font-size:12px; color:var(--success); margin-top:10px; display:none; }
.save-card .mini { margin:12px 0 0; }

.pc-foot { max-width:1080px; margin:0 auto; padding:0 20px 48px; color:var(--text-muted); font-size:12px; }
.pc-foot a { color:var(--ember-dark); }

/* ===== MOBILE ===== */
@media (max-width:800px) {
  .job-bottom { grid-template-columns:1fr; }
  .table-scroll { display:none; }       /* hide table, show cards */
  .job-cards { display:block; }
  .jc-card { border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:12px; background:#fffdfa; }
  .jc-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .jc-head strong { font-size:16px; }
  .jc-fields { display:flex; flex-wrap:wrap; gap:10px; }
  .jc-f { display:flex; flex-direction:column; gap:4px; flex:1 1 150px; }
  .jc-f.jc-narrow { flex:0 0 100px; }
  .jc-f span { font-size:12px; color:var(--text-muted); font-weight:600; }
  .jc-foot { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:10px; border-top:1px dashed var(--border); }
  .jc-total { font-weight:700; font-size:16px; }
  .jc-total small { font-weight:500; color:var(--text-muted); font-size:11px; }
  .jc-foot .rate { font-size:13px; font-weight:700; color:var(--forest); background:#e7f0ec; padding:3px 9px; border-radius:999px; }
  .jc-foot .rate.low { color:#fff; background:var(--low); }
  .jc-foot .rate.na { color:var(--text-muted); background:#f0ece5; }
  .del { border:none; background:#f3ece2; color:var(--text-mid); width:28px; height:28px; border-radius:7px; font-size:16px; cursor:pointer; }
}