/*
 * Online BOQ editor + My Projects (workspace app, PRD.md).
 * Tokens and patterns only from DESIGN.md: --teal/--teal-light/--teal-dark,
 * --amber for "estimate / needs attention", .error-msg's red trio for hard
 * errors, radius 6/8/12, spacing on the 4px rhythm, Poppins with tabular digits for numbers (monospace only for kbd).
 * One layout value is new: the editor runs wider than .container (1440px)
 * because a 7-column priced grid plus the abstract does not fit in 1100px.
 */

.ws-page { padding-top: 32px; padding-bottom: 48px; }
.ws-narrow { max-width: 640px; }
.ws-muted { color: var(--text-sec); }
.ws-small { font-size:var(--fs-sm); }
.ws-mono { font-family:inherit;font-variant-numeric:tabular-nums; }
.ws-danger:hover { color: #b91c1c !important; border-color: #fca5a5 !important; background: #fef2f2 !important; }

.ws-start-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ws-start-actions form { margin: 0; }
.ws-fill-cta { margin: 16px 0 24px; gap: 16px; flex-wrap: wrap; }
.ws-fill-cta .mr-upload-copy { flex: 1 1 320px; font-weight:400; }

/* ---- Project list ---- */
.ws-list-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ws-project-name { font-weight:500; }
.ws-flag {
  margin-left: 8px; font-size:var(--fs-sm); color: var(--amber);
  border: 1px solid var(--amber); border-radius: 999px; padding: 0 8px; white-space: nowrap;
}
.ws-row-actions { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.ws-row-actions form { margin: 0; }
.ws-row-actions .btn { padding: 4px 12px; font-size:var(--fs-sm); }
.ws-project-table tr:hover td { background: var(--surface); }

.ws-resume {
  margin-top: 24px; padding: 20px 24px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); display: grid; gap: 12px;
}
.ws-resume p { margin: 4px 0 0; color: var(--text-sec); font-size:var(--fs-sm); }
.ws-resume-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-resume-input {
  flex: 1 1 320px; width: 100%; padding: 8px 12px; border: 1.5px solid var(--border);
  border-radius: var(--radius); font-family:inherit;font-variant-numeric:tabular-nums; font-size:var(--fs-sm); background: var(--bg);
}

.ws-empty {
  border: 1px solid var(--border); border-radius: 12px; padding: 32px; max-width: 720px;
  box-shadow: var(--shadow);
}
.ws-empty h2 { font-size:var(--fs-base); font-weight:600; margin-bottom: 12px; }
.ws-benefits { margin: 0 0 24px 20px; display: grid; gap: 8px; }
.ws-empty .ws-small { margin-top: 16px; }

/* ---- Editor shell ---- */
.ws-editor { padding-bottom: 48px; }
.ws-topbar {
  position: sticky; top: 56px; z-index: 50; background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.ws-topbar-inner, .ws-body { max-width: 1440px; margin: 0 auto; padding: 0 24px; }
.ws-topbar-inner { display: flex; align-items: center; gap: 12px; height: 56px; }
.ws-back { color: var(--text-sec); font-size:var(--fs-sm); white-space: nowrap; }
.ws-title-input {
  flex: 1; min-width: 0; font-size:var(--fs-base); font-weight:600; 
  border: 1.5px solid transparent; border-radius: var(--radius); padding: 4px 8px; font-family: inherit;
}
.ws-title-input:hover { border-color: var(--border); }
.ws-title-input:focus { outline: none; border-color: var(--teal); }
.ws-save-state { font-size:var(--fs-sm); color: var(--text-sec); white-space: nowrap; }
.ws-save-ok::before { content: '✓ '; color: var(--teal-dark); }
.ws-save-error { color: #b91c1c; }

.ws-details { margin: 16px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.ws-details summary { cursor: pointer; padding: 10px 16px; font-weight:500; font-size:var(--fs-sm); }
.ws-details-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; padding: 4px 16px 16px;
}
.ws-details-grid label { display: grid; gap: 4px; font-size:var(--fs-sm); color: var(--text-sec); }
.ws-details-grid input, .ws-details-grid select {
  padding: 8px 10px; border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size:var(--fs-sm); font-family: inherit; color: var(--text); background: var(--bg);
}
.ws-details-grid input:focus, .ws-details-grid select:focus { outline: none; border-color: var(--teal); }

.ws-alert {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px 8px 16px; margin-bottom: 12px; border-radius: var(--radius); font-size:var(--fs-sm);
}
.ws-alert[hidden] { display: none; }
.ws-alert .btn { padding: 4px 12px; font-size:var(--fs-sm); background: var(--bg); }
.ws-alert-warn { background: #fffbeb; border: 1px solid var(--amber); color: var(--amber); }
.ws-alert-error { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }

.ws-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
/* The grid is drawn by workspace_boq.js after first paint, which then shows the
   warning bars and closes the details panel: everything jumped (layout shift
   0.7). The body stays invisible until init adds .is-ready, and is revealed
   after 3s regardless, so a script failure cannot leave a blank page. */
.ws-layout { min-height: calc(100vh - 220px); }
.ws-editor:not(.is-ready) .ws-body { visibility: hidden; animation: ws-reveal 0s 3s forwards; }
@keyframes ws-reveal { to { visibility: visible; } }

/* ---- Grid ---- */
.ws-grid-wrap { box-shadow: none; }
.ws-grid { width: 100%; border-collapse: collapse; font-size:var(--fs-sm); table-layout: fixed; min-width: 860px; }
.ws-grid col.c-sno { width: 44px; } .ws-grid col.c-code { width: 104px; }
.ws-grid col.c-unit { width: 72px; } .ws-grid col.c-qty { width: 100px; }
.ws-grid col.c-rate { width: 104px; } .ws-grid col.c-amt { width: 132px; }
.ws-grid col.c-act { width: 112px; }
.ws-grid thead th {
  position: sticky; top: 0; background: var(--surface); color: var(--text-sec);
  font-size:var(--fs-sm); font-weight:600;  
  text-align: left; padding: 8px; border-bottom: 1px solid var(--border);
}
.ws-grid th.num, .ws-grid td.num { text-align: right; }
.ws-grid td { padding: 4px; border-bottom: 1px solid var(--border); vertical-align: top; }

.ws-grid input, .ws-grid select, .ws-grid textarea {
  width: 100%; border: 1px solid transparent; border-radius: 4px; background: transparent;
  font:inherit; color: var(--text); padding: 6px 4px;
}
.ws-grid textarea { resize: none; overflow: hidden; line-height:var(--lh-snug); }
.ws-grid input:hover, .ws-grid select:hover, .ws-grid textarea:hover { border-color: var(--border); }
.ws-grid input:focus, .ws-grid select:focus, .ws-grid textarea:focus {
  outline: none; border-color: var(--teal); background: var(--bg); box-shadow: 0 0 0 2px var(--teal-light);
}
.ws-grid .ws-invalid { border-color: #fca5a5 !important; background: #fef2f2 !important; }
.ws-num-input { text-align: right; font-family:inherit;font-variant-numeric:tabular-nums; }
.ws-code { font-variant-numeric: tabular-nums; font-size:var(--fs-sm); color: var(--text-sec); }

.ws-sec-row td { background: var(--teal-light); border-bottom: 1px solid var(--border); padding: 4px; }
.ws-sec-head { display: flex; gap: 4px; align-items: center; }
.ws-sec-row .ws-sec-code { width: 48px; flex: none; font-weight:600; color: var(--teal-deep); text-align: center; }
.ws-sec-row .ws-sec-code, .ws-sec-row .ws-sec-title { min-height: 40px; }
.ws-sec-row .ws-sec-title { font-weight:600; color: var(--teal-deep); text-transform:uppercase; letter-spacing:var(--ls-caps); font-size:var(--fs-sm); }
.ws-subtotal { font-family:inherit;font-variant-numeric:tabular-nums; font-weight:600; color: var(--teal-deep); padding-top: 10px !important; }

.ws-sno { color: var(--text-sec); font-size:var(--fs-sm); padding-top: 10px !important; text-align: center; }
.ws-amount { font-family:inherit;font-variant-numeric:tabular-nums; font-weight:600; padding-top: 10px !important; }
.ws-line:hover td { background: var(--surface); }
.ws-line.ws-flagged td { background: #fffbeb; }

.ws-rate-tag { display: block; font-size:var(--fs-sm); color: var(--amber); text-align: right; padding-right: 4px; cursor: help; }
.ws-pill {
  display: inline-block; font-size:var(--fs-sm); font-weight:500; line-height:var(--lh-snug);
  border-radius: 8px; padding: 2px 8px; max-width: 100%;  /* wraps inside the amount column rather than spilling out */
}
.ws-pill-unit_mismatch, .ws-pill-basis_mismatch { color: #b91c1c; background: #fef2f2; border: 1px solid #fca5a5; }
/* A missing rate or quantity is the normal starting state since rates are
   hidden (2026-10-15): quiet, counted in the status line, found by Show next. */
.ws-pill-rate_missing, .ws-pill-qty_blank { color: var(--text-sec); background: var(--surface); border: 1px solid var(--border); }

.ws-measured {
  width: 100%; text-align: right; font-family:inherit;font-variant-numeric:tabular-nums; font-size:var(--fs-sm); padding: 6px 4px;
  border: 1px dashed var(--teal); border-radius: 4px; background: var(--teal-light); color: var(--teal-deep); cursor: pointer;
}

.ws-act { white-space: nowrap; text-align: right; }
.ws-icon {
  border: 1px solid transparent; background: transparent; border-radius: 4px; cursor: pointer;
  font-size:var(--fs-sm); color: var(--text-sec); padding: 4px 6px; min-width: 24px; font-family: inherit;
}
.ws-icon:hover:not([disabled]) { border-color: var(--border); color: var(--teal-dark); background: var(--bg); }
.ws-icon[disabled] { opacity: 0.3; cursor: default; }
.ws-icon.ws-on { color: var(--teal-deep); border-color: var(--teal); background: var(--teal-light); }
.ws-armed { color: #b91c1c !important; border-color: #fca5a5 !important; background: #fef2f2 !important; }
.ws-line .ws-icon[data-act="up"], .ws-line .ws-icon[data-act="down"] { visibility: hidden; }
.ws-line:hover .ws-icon[data-act="up"], .ws-line:hover .ws-icon[data-act="down"] { visibility: visible; }

/* Detail row: measurements + remarks */
.ws-detail td { background: var(--surface); }
.ws-detail-inner { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; padding: 8px 4px 12px; }
.ws-detail-title { margin-bottom: 8px; }
.ws-meas { width: 100%; border-collapse: collapse; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.ws-meas th { font-size:var(--fs-sm); color: var(--text-sec); font-weight:600; text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.ws-meas td { border-bottom: 1px solid var(--border); padding: 2px; }
.ws-meas td:nth-child(n+2):nth-child(-n+5) { width: 84px; }
.ws-meas td:nth-child(6) { width: 96px; padding-right: 8px; }
.ws-detail-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ws-detail-actions .btn { padding: 4px 12px; font-size:var(--fs-sm); background: var(--bg); }
.ws-detail-remarks { display: grid; gap: 4px; font-size:var(--fs-sm); color: var(--text-sec); align-content: start; }
.ws-detail-remarks textarea { border-color: var(--border) !important; background: var(--bg) !important; overflow: auto; }

/* Add-item row + search results */
.ws-add-row td { border-bottom: 1px solid var(--border); padding: 4px; }
.ws-add-wrap { position: relative; display: flex; gap: 8px; align-items: center; }
.ws-add-wrap .btn { padding: 4px 12px; font-size:var(--fs-sm); white-space: nowrap; }
.ws-grid .ws-add-input { border: 1px dashed var(--border); color: var(--text); }
.ws-grid .ws-add-input::placeholder { color: var(--text-sec); }
.ws-results {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 4px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-md);
  max-height: 360px; overflow-y: auto;
}
.ws-result {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border);
}
.ws-result:last-child { border-bottom: none; }
.ws-result.ws-active, .ws-result:hover { background: var(--teal-light); }
.ws-result-code { font-variant-numeric: tabular-nums; font-size:var(--fs-sm); color: var(--teal-dark); }
.ws-result-desc { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ws-result-rate { font-family:inherit;font-variant-numeric:tabular-nums; font-size:var(--fs-sm); white-space: nowrap; color: var(--text-sec); }
.ws-result-free { grid-template-columns: 1fr; color: var(--teal-dark); font-weight:500; }
.ws-warn-text { color: var(--amber); }

.ws-below-grid { display: flex; gap: 16px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
kbd {
  font-family: monospace; font-size:var(--fs-sm); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 4px; background: var(--bg);
}

/* ---- Abstract ---- */
.ws-abstract {
  position: sticky; top: 128px; border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; box-shadow: var(--shadow); background: var(--bg); display: grid; gap: 8px;
  max-height: calc(100vh - 144px); overflow-y: auto;
}
.ws-abstract h2 { font-size:var(--fs-sm); letter-spacing:var(--ls-caps); text-transform:uppercase; color: var(--text-sec); font-weight:500; }
.ws-ab-sections { display: grid; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.ws-ab-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size:var(--fs-sm); }
.ws-ab-sec { font-size:var(--fs-sm); color: var(--text-sec); }
.ws-ab-sec span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-ab-strong { font-weight:600; }
.ws-ab-pct { display: flex; align-items: center; gap: 4px; color: var(--text-sec); }
.ws-ab-pct input, .ws-ab-bua input {
  width: 56px; padding: 4px 6px; border: 1.5px solid var(--border); border-radius: var(--radius); font-size:var(--fs-sm);
}
.ws-ab-bua input { width: 72px; }
.ws-ab-pct input:focus, .ws-ab-bua input:focus { outline: none; border-color: var(--teal); }
.ws-ab-grand {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  background: var(--teal-light); color: var(--teal-deep); border-radius: 8px; padding: 12px; font-weight:600;
}
.ws-ab-grand .ws-mono { font-size:var(--fs-base); }
.ws-ab-warn { font-size:var(--fs-sm); color: #b91c1c; }
.ws-ab-bua { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size:var(--fs-sm); }
.ws-ab-bua-inputs { display: flex; gap: 8px; flex-wrap: wrap; color: var(--text-sec); font-size:var(--fs-sm); }
.ws-ab-note { border-top: 1px solid var(--border); padding-top: 8px; }

.ws-invalid { border-color: #fca5a5 !important; background: #fef2f2 !important; }

@media (max-width: 1024px) {
  .ws-layout { grid-template-columns: minmax(0, 1fr); }  /* 1fr grew to the table's 860px minimum: the page scrolled sideways at 768 */
  .ws-abstract { position: static; max-height: none; }
  .ws-detail-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ws-topbar { top: 56px; }
  .ws-topbar-inner, .ws-body { padding: 0 12px; }
  .ws-back { display: none; }
  .ws-topbar-inner .btn { padding: 6px 12px; font-size:var(--fs-sm); }
}

/* "or fill it online" beside the BOQ template download button */
.ws-or-online { margin-left: 12px; font-size:var(--fs-sm); color: var(--text-sec); }

/* ---- Print / client share view ---- */
.ws-print-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.ws-print-head h1 { font-size:var(--fs-h2); font-weight:500;  margin-bottom: 12px; }
.ws-print-meta { border-collapse: collapse; margin-bottom: 24px; font-size:var(--fs-sm); }
.ws-print-meta th { text-align: left; font-weight:600; color: var(--text-sec); padding: 2px 16px 2px 0; }
.ws-print-table td { vertical-align: top; }
.ws-print-remark { font-size:var(--fs-sm); color: var(--text-sec); margin-top: 4px; }
.ws-print-subtotal td { font-weight:600; background: var(--surface); text-align: right; }
.ws-print-h2 { font-size:var(--fs-base); font-weight:600; margin: 32px 0 12px; }
.ws-print-abstract { border-collapse: collapse; width: 100%; max-width: 640px; font-size:var(--fs-sm); }
.ws-print-abstract td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.ws-print-abstract td.num { text-align: right; }
.ws-print-abstract .ws-strong td { font-weight:600; }
.ws-print-grand td { font-weight:600; background: var(--teal-light); color: var(--teal-deep); font-size:var(--fs-sm); }
.ws-print-note { margin-top: 16px; }
.ws-print-cta { margin-top: 32px; }

@media print {
  .navbar, .footer, .ws-print-actions, .ws-print-cta { display: none !important; }
  .ws-page { padding: 0; }
  .container { max-width: none; padding: 0; }
  .table-wrapper { border: none; box-shadow: none; overflow: visible; }
  .data-table th { background: #fff !important; color: var(--text) !important; border-bottom: 1px solid var(--text); }
  .data-table tr:hover td { background: none; }
  .ws-print-table tr { page-break-inside: avoid; }
  .ws-print-abstract { page-break-inside: avoid; }
}

/* ---- Share panel (editor top bar) ---- */
.ws-share { position: relative; }
.ws-share-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 340px; z-index: 60;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md);
  padding: 16px; display: grid; gap: 12px; font-size:var(--fs-sm);
}
.ws-share-panel[hidden] { display: none; }
.ws-share-panel p { margin: 0; color: var(--text-sec); }
.ws-share-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-share-row .btn { padding: 6px 12px; font-size:var(--fs-sm); }

/* ---- Phone: grid rows become cards ---- */
@media (max-width: 640px) {
  .ws-grid { min-width: 0; table-layout: auto; }
  .ws-grid colgroup, .ws-grid thead { display: none; }
  .ws-grid, .ws-grid tbody, .ws-grid tr, .ws-grid td { display: block; width: 100%; }
  .ws-grid-wrap { overflow: visible; border: none; }
  .ws-grid td { border: none; padding: 2px; }
  .ws-sec-row { display: flex !important; align-items: center; background: var(--teal-light); border-radius: 8px; margin-top: 16px; }
  .ws-sec-row td { background: transparent; }
  .ws-sec-row td:first-child { flex: 1; }
  .ws-sec-row .ws-subtotal, .ws-sec-row .ws-act { width: auto; }
  .ws-line {
    display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 4px;
    border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-top: 8px;
  }
  .ws-line > td:nth-child(1) { display: none; }
  .ws-line > td:nth-child(2) { grid-column: 1 / 2; }
  .ws-line > td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .ws-line > td:nth-child(4) { grid-column: 2 / 3; grid-row: 1; }
  .ws-line > td:nth-child(5), .ws-line > td:nth-child(6), .ws-line > td:nth-child(7) { grid-row: 3; }
  .ws-line > td:nth-child(8) { grid-column: 3 / 4; grid-row: 1; }
  .ws-line .ws-icon[data-act="up"], .ws-line .ws-icon[data-act="down"] { display: none; }
  .ws-line.ws-flagged { border-color: var(--amber); }
  .ws-grid input, .ws-grid select, .ws-grid textarea { border-color: var(--border); background: var(--bg); font-size:var(--fs-base); }
  .ws-detail { display: block; border: 1px solid var(--border); border-top: none; border-radius: 0 0 8px 8px; }
  .ws-detail > td:first-child { display: none; }
  .ws-meas thead { display: none; }
  .ws-meas tr { display: grid !important; grid-template-columns: repeat(4, 1fr) auto; gap: 4px; padding: 4px; }
  .ws-meas td { display: block; width: auto !important; }
  .ws-meas td:first-child { grid-column: 1 / -1; }
  .ws-add-row td:first-child { display: none; }
  .ws-add-wrap { flex-wrap: wrap; }
  .ws-share-panel { position: fixed; left: 12px; right: 12px; top: 120px; width: auto; }
  .ws-print-actions .btn { flex: 1; text-align: center; }
}
@media (max-width: 640px) {
  .ws-topbar-inner { height: auto; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; gap: 8px; }
  .ws-title-input { flex: 1 1 100%; font-size:var(--fs-base); }
  .ws-abstract { top: auto; }
}
@media (max-width: 640px) {
  /* Long DSR descriptions would make each card ~170px tall; scroll inside instead. */
  /* Exactly four lines (16px x 1.4 + padding and border), so no line is cut through the middle. */
  .ws-grid textarea.ws-desc { max-height: calc(4 * 1.4em + 14px); overflow-y: auto; }
  /* Section name on its own line: beside the total and three buttons it showed "PLAIN CEMENT (". */
  .ws-sec-row { flex-wrap: wrap; }
  .ws-sec-row td:first-child { flex: 1 1 100%; }
  .ws-sec-row .ws-subtotal { flex: 1 1 auto; text-align: left; }
  .ed-top .btn { white-space: nowrap; }
}

/* ---- Item library: option chips, rate tags, suggestions (PRD.md §15) ---- */
.ws-opts { display: grid; gap: 4px; padding: 4px 4px 6px; }
.ws-opt-group { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ws-opt-label { font-size:var(--fs-sm); color: var(--text-sec); text-transform:uppercase; letter-spacing:var(--ls-caps); margin-right: 4px; }
.ws-chip {
  font:inherit; font-size:var(--fs-sm); padding: 2px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-sec);
}
.ws-chip:hover { border-color: var(--teal); color: var(--teal-dark); }
.ws-chip-on { background: var(--teal-light); border-color: var(--teal); color: var(--teal-deep); font-weight:500; }
.ws-linkbtn { font:inherit; font-size:var(--fs-sm); background: none; border: none; color: var(--teal-dark); cursor: pointer; padding: 2px 0; text-align: left; }
.ws-rate-warn { color: var(--amber); }
.ws-suggest {
  display: block; width: 100%; margin-top: 2px; font:inherit; font-size:var(--fs-sm); cursor: pointer;
  background: #fffbeb; border: 1px dashed var(--amber); color: var(--amber); border-radius: 4px; padding: 2px 4px;
}
.ws-grid col.c-rate { width: 132px; }

/* ---- New-project form ---- */
.ws-start-form { display: grid; gap: 12px; }
.ws-start-fields { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ws-seg { display: inline-flex; border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden; padding: 0; margin: 0; }
.ws-seg label { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size:var(--fs-sm); cursor: pointer; }
.ws-seg label + label { border-left: 1.5px solid var(--border); }
.ws-seg label:has(input:checked) { background: var(--teal-light); color: var(--teal-deep); font-weight:500; }
.ws-start-city { padding: 8px 10px; border: 1.5px solid var(--border); border-radius: var(--radius); font:inherit; font-size:var(--fs-sm); background: var(--bg); }

/* ---- Account bar (Google sign-in) ---- */
.ws-account {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font-size:var(--fs-sm);
}
.ws-account form { margin: 0; }
.ws-google-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--bg); }
.ws-alert-ok { background: var(--teal-light); border: 1px solid var(--teal); color: var(--teal-deep); }

/* ---- Phone: the site's 16px side margin and 44px tap areas (spacing audit, 2026-10-11).
   Before: a 12px margin, and buttons, icons, option chips and number boxes 28–40px tall. ---- */
@media (max-width: 640px) {
  .ws-topbar-inner, .ws-body { padding-left: var(--gutter); padding-right: var(--gutter); }
  .ed-actions .btn, .bar-note .btn, .ws-add-wrap .btn { min-height: 44px; }
  .ws-editor .ws-icon { min-width: 44px; min-height: 44px; }
  .ws-chip { min-height: 44px; padding: 0 14px; }
  .ws-opt-group { gap: 8px; }
  .ws-grid input, .ws-grid select, .ws-sec-row .ws-sec-code, .ws-sec-row .ws-sec-title,
  .ws-grid .ws-add-input, .ed-name, .ws-ab-pct input, .ws-ab-bua input { min-height: 44px; }
  .bar-note__link, .ws-linkbtn { display: inline-flex; align-items: center; min-height: 44px; }
}
/* A text button in a notice lines up with the notice's text, not 12px inside it. */
.bar-note .btn-ghost { margin-left: -12px; }

/* ---------- Final flow (2026-10-15): first line, ⋯ menu, status line ---------- */
.ed-first { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding-top: var(--s4); }
.ed-first[hidden] { display: none; }
.ed-first__label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-sec); }
.ed-first__opts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-right: var(--s3); }
.ed-more { position: relative; display: inline-flex; }
.ed-more > summary { list-style: none; cursor: pointer; min-width: 44px; justify-content: center; font-size: var(--fs-base); }
.ed-more > summary::-webkit-details-marker { display: none; }
.ed-more__list { padding: var(--s2); gap: 0; width: 220px; }
.ed-more form { margin: 0; }
.ed-more__item { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 var(--s3); border: 0; background: none; border-radius: var(--r); font: inherit; font-size: var(--fs-base); color: var(--text); text-decoration: none; text-align: left; cursor: pointer; }
.ed-more__item:hover, .ed-more__item:focus-visible { background: var(--surface); }
#statusLine.is-done { background: var(--teal-light); border-color: var(--teal); color: var(--teal-deep); }
.ed-name--ask { border-color: var(--warn-border); background: var(--warn-bg); }
.ws-reason { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--warn); }
.ws-reason[hidden] { display: none; }
.ws-example-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--r-pill); background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn); font-size: var(--fs-sm); vertical-align: middle; }
.ws-grid col.c-act { width: 150px; }
.ws-icon.ws-sizes { width: auto; padding: 0 8px; font-size: var(--fs-sm); font-weight: 500; }
@media (max-width: 767px) {
  /* Phones (owner, 2026-10-17, with AI quantity takeoff): Download · Share · ⋯,
     then AI quantity takeoff, then Save, each full width. */
  .ed-actions { display: grid; grid-template-columns: 1fr 1fr 44px; }
  .ed-actions .btn, .ed-actions > span, .ed-actions > details { width: 100%; }
  .ed-actions > * { order: 1; }
  .ed-actions > .ed-more { order: 2; }
  .ed-actions #takeoffBtn { grid-column: 1 / -1; order: 3; }
  .ed-actions #draftSave, .ed-actions #saveBtn { grid-column: 1 / -1; order: 4; }
}

/* My work (2026-10-15): one list per kind of saved thing. */
.mywork-start { display: flex; flex-wrap: wrap; gap: var(--s2); }
.mywork-group { margin-top: var(--s8); }
.mywork-group > h2 { font-size: var(--fs-base); margin-bottom: var(--s3); display: flex; align-items: center; gap: var(--s2); }
.mywork-count { font-size: var(--fs-sm); font-weight: 500; color: var(--text-sec); }
@media (max-width: 400px) {
  /* Narrow phones: the Download icon goes so the word fits. */
  .ed-actions #exportBtn svg { display: none; }
}
.ed-first__type { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
/* Start form: a trade BOQ (interior, fire) has no work type (boq_document.BOQ_TYPES). */
.ws-start-form:has(input[name="type"]:not([value="civil"]):checked) .ws-start-work { display: none; }

/* Embedded on its template page (owner-approved mockup, 2026-10-20). The
   frame grows to the BOQ's height (downloads/detail.html), so nothing in here
   may size itself to the frame: no 100vh, nothing sticky. */
html:has(.ed--embed), html:has(.ed--embed) body { min-height: 0; background: var(--bg); }
.ed--embed { padding-bottom: var(--s4); }
.ed--embed .ed-top { position: static; }
.ed--embed .ws-layout { min-height: 0; grid-template-columns: minmax(0, 1fr); }  /* the abstract under the BOQ: beside it, the description column fell to ~120px in a 1150px frame */
.ed--embed .ws-abstract { position: static; max-height: none; }
.ed-embed-note { font-size: var(--fs-sm); color: var(--text-sec); }
@media (min-width: 768px) { .ed--embed .ed-actions { width: auto; margin-left: auto; } }
.ed--embed .ws-save-state:not(.ws-save-error) { display: none; }
@media (max-width: 767px) {
  .ed--embed .ed-actions { grid-template-columns: 1fr 1fr; }
  .ed--embed .ed-actions #exportBtn { grid-column: 1 / -1; }
}