/* HDH Offert presentation only. Business behavior remains in offert-app.js. */
:root {
  color-scheme: light;
  --ink: #152129;
  --muted: #657079;
  --forest: #16231E;
  --forest-2: #1B2A24;
  --paper: #f4f2ee;
  --card: #fffefa;
  --line: #e2e1dc;
  --bronze: #b99d6b;
  --bronze-2: #a98b55;
  --ok: #2F6B4F;
  --warn: #805515;
  --danger: #a33730;
  --nav-h: 4.5rem;
  --header-h: 4.25rem;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 14px;
  --shadow: 0 8px 28px #1521290a;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; max-width: 100%; }
body { font-family: var(--font); color: var(--ink); background: var(--paper); min-height: 100vh; min-height: 100dvh; font-size: 15px; line-height: 1.5; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #8d6c32; outline-offset: 3px; }
img { display: block; max-width: 100%; }
h1, h2, p { margin: 0; }
h1, h2, h3 { letter-spacing: -.035em; line-height: 1.25; }
a { color: inherit; }
button:disabled { cursor: wait; opacity: .6; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.1rem; border-radius: 10px; font-size: .94rem; font-weight: 600; text-decoration: none; border: 1px solid transparent; text-align: center; transition: background .16s, border-color .16s; }
.btn-primary { background: linear-gradient(135deg, var(--forest-2), var(--forest)); color: #fff; border-color: var(--forest); }
.btn-primary:hover { background: linear-gradient(135deg, var(--forest), var(--forest-2)); }
.btn-secondary { background: #ecece9; color: var(--ink); border-color: #e2e2df; }
.btn-secondary:hover { background: #e3e4e1; }
.btn-quiet { background: transparent; color: var(--muted); border-color: var(--line); }
.btn-quiet:hover { background: #ecece9; color: var(--ink); }
.btn-block { width: 100%; margin-top: 1rem; }
.btn-dark { background: var(--forest); color: #fffefa; border-color: var(--forest); }
.btn-dark:hover { background: var(--forest-2); }
.btn svg, .side-nav svg { width: 20px; height: 20px; flex: none; }
.eyebrow { letter-spacing: .16em; text-transform: uppercase; font-size: .7rem; font-weight: 600; color: var(--muted); }
.gate { position: relative; isolation: isolate; min-height: 100dvh; background: radial-gradient(ellipse at 0 0, #294338 0, transparent 65%), var(--forest); color: #f9f7f2; padding: calc(1.5rem + env(safe-area-inset-top)) 1.25rem calc(1.5rem + env(safe-area-inset-bottom)); }
/* Decorative photography stays behind the green scrim and the opaque access card. */
.gate::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(13,32,25,.94) 0%, rgba(17,40,31,.82) 43%, rgba(15,33,26,.40) 72%, rgba(12,29,23,.66) 100%), linear-gradient(0deg, rgba(13,29,23,.76), transparent 65%), url('/images/offert/offert-hero-desktop.webp');
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.gate-main { position: relative; z-index: 1; max-width: 68rem; margin: 0 auto; }
@media (max-width: 759px) {
  .gate::before {
    background-image: linear-gradient(180deg, rgba(17,39,30,.92) 0%, rgba(17,39,30,.84) 40%, rgba(16,35,27,.56) 63%, rgba(13,29,23,.90) 100%), url('/images/offert/offert-hero-mobile.webp');
    background-position: center, center 44%;
  }
}
.gate-brand { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.gate-brand img { width: 64px; height: 64px; }
.gate .eyebrow { color: #d4bf98; }
.welcome-name { font-size: 1.3rem; font-weight: 650; letter-spacing: -.025em; }
.welcome-badge { color: #dfd4bc; font-size: .72rem; margin-bottom: .8rem; }
.gate h1 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 650; line-height: 1.12; letter-spacing: -.045em; }
.gate h1 span { color: #d5bb88; }
.lede { font-size: 1.3rem; line-height: 1.4; font-weight: 500; }
.gate-copy { margin: 1rem 0 1.5rem; color: #ced4d6; max-width: 31rem; font-size: .96rem; }
.gate-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; font-size: .83rem; }
.gate-points li { padding-left: 2.2rem; position: relative; }
.gate-points strong, .gate-points span { display: block; }
.gate-points span { color: #bdc7cb; margin-top: .1rem; }
.gate-points li::before { content: "✓"; position: absolute; left: 0; top: .1rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 1px solid #7d735d; border-radius: .5rem; color: #dfc693; background: #ffffff07; }
.welcome-hdh { margin-top: 1.4rem; color: #e3d6bd; font-size: .8rem; }
.welcome-access { margin-top: 1.5rem; padding: 1.4rem; background: var(--card); color: var(--ink); border-radius: 22px; box-shadow: 0 20px 70px #0003; }
.welcome-access .eyebrow { color: #80683e; }
.welcome-access-heading h2 { font-size: 1.4rem; margin: .5rem 0; }
.welcome-access-heading > p:last-child { font-size: .85rem; color: var(--muted); }
.gate-actions { display: grid; gap: .65rem; margin-top: 1.2rem; }
.gate .btn-primary { background: var(--forest); border-color: var(--forest); color: #fffefa; }
.gate .btn-secondary, .gate .btn-quiet { color: var(--ink); background: transparent; border-color: #d6d6cf; }
.welcome-device { text-align: center; font-size: .74rem; color: var(--muted); margin-top: 1rem; }
.connect-panel { margin-top: 1.5rem; padding: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: .75rem; }
.connect-panel h2 { font-size: 1.15rem; }
.connect-panel p { color: var(--muted); font-size: .85rem; }
.gate .stack-form { margin-top: 1.5rem; }
.gate .field { color: var(--ink); }
.gate .error-note { color: var(--danger); background: #fff0ed; border-color: #e0b6af; }
.update-notification { padding: 1rem; border-radius: 12px; background: var(--paper); margin-top: 1rem; }
.update-notification p, .update-notification small { font-size: .8rem; color: var(--muted); display: block; }
.update-notification label { display: flex; align-items: flex-start; gap: .7rem; min-height: 44px; padding: .8rem 0; font-weight: 600; font-size: .9rem; }
.update-notification input { width: 20px; height: 20px; flex: none; accent-color: var(--forest); }
@media (min-width: 760px) { .gate { display: grid; align-items: center; padding: 3rem; } .gate-main { width: 100%; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } .welcome-access { margin: 0; padding: 2rem; } .gate-brand { margin-bottom: 3rem; } }
@media (max-width: 759px) { .gate-main { max-width: 30rem; } }
.app { min-height: 100dvh; }
.app-header { --status-gap: env(safe-area-inset-top, 0px); position: sticky; top: 0; z-index: 20; height: calc(var(--header-h) + var(--status-gap)); padding: var(--status-gap) 1rem 0; display: flex; align-items: center; justify-content: space-between; background: var(--forest); color: #fffefa; }
.brand { display: flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; font-weight: 650; font-size: 1.1rem; min-height: 44px; }
.brand img { width: 42px; height: 42px; }
.brand small { display: block; color: #bdc5c8; font-size: .62rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.icon-btn { width: 44px; height: 44px; border: 1px solid #4b585e; border-radius: 50%; background: #fffefa; color: var(--forest); display: grid; place-items: center; }
.icon-btn svg { width: 23px; height: 23px; }
.account-menu { position: absolute; top: calc(var(--header-h) + var(--status-gap) - .2rem); right: 1rem; max-width: calc(100vw - 2rem); min-width: 15rem; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem; display: grid; box-shadow: 0 16px 48px #111d2430; }
.account-menu a, .account-menu button { text-align: left; background: none; border: 0; color: inherit; text-decoration: none; min-height: 44px; padding: .7rem .8rem; border-radius: 8px; }
.account-menu a:hover, .account-menu button:hover { background: var(--paper); }
.account-company { padding: .5rem .8rem .7rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.app-frame, .app-main, .offer-list, .offer-card, .offer-top, .offer-meta, .offer-customer { min-width: 0; max-width: 100%; }
.app-main { padding: 1.5rem 1rem calc(var(--nav-h) + env(safe-area-inset-bottom) + 1.5rem); width: 100%; max-width: 46rem; margin: 0 auto; }
[data-panel] { min-width: 0; }
.view-title { font-size: 1.75rem; font-weight: 700; overflow-wrap: anywhere; }
.view-note { color: var(--muted); margin: .55rem 0 1.25rem; line-height: 1.55; overflow-wrap: anywhere; }
.view-intro { margin-bottom: 1.4rem; }
.view-intro .view-note { margin-bottom: 0; }
.section-title { margin: 1.4rem 0 .75rem; font-size: 1rem; font-weight: 650; letter-spacing: -.02em; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 .75rem; }
.section-heading h2 { margin: 0; }
.section-heading a { min-height: 44px; display: flex; align-items: center; font-size: .8rem; text-decoration: none; color: var(--muted); }
.overview-hero { margin: -1.5rem -1rem 0; padding: 1.2rem 1rem 2.5rem; background: var(--forest); color: #fffefa; }
.greeting { color: #d0b683; font-size: .86rem; margin-bottom: .35rem; }
.company-name { font-size: 1.55rem; font-weight: 650; line-height: 1.25; }
.hero-note { margin-top: .6rem; color: #bcc6cb; font-size: .86rem; }
.overview-action { margin-top: -1.2rem; padding: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); position: relative; box-shadow: var(--shadow); }
.overview-action .btn { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .4rem; margin-top: 1rem; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .25rem; min-height: 4.6rem; display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; gap: .3rem; }
.stat b { font-size: 1.3rem; font-weight: 550; font-variant-numeric: tabular-nums; color: #8b6b33; }
.stat span { color: var(--muted); font-size: .72rem; line-height: 1.2; }
.offer-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.offer-card { display: grid; gap: .3rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 1rem; text-decoration: none; color: inherit; min-height: 44px; }
.offer-card:last-child { border-bottom: 0; }
.offer-card:hover { background: #f5f3ed; }
.offer-row { display: grid; border-bottom: 1px solid var(--line); }
.offer-row:last-child { border-bottom: 0; }
.offer-row .offer-card { border-bottom: 0; }
.offer-delete, .wizard-delete { justify-self: start; margin: 0 1rem .85rem; min-height: 44px; color: var(--danger); background: transparent; border-color: #ebc4bf; }
.wizard-top .wizard-delete { flex: 1 0 100%; margin: 0; }
.offer-top, .offer-meta { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.offer-top h3 { font-size: .92rem; font-weight: 650; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.offer-customer { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.offer-amount { font-size: .92rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.offer-date { color: var(--muted); font-size: .75rem; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; width: fit-content; flex: none; border-radius: 6px; padding: .22rem .5rem; font-size: .72rem; font-weight: 550; letter-spacing: 0; background: #eeece7; color: #5a584e; }
.chip-sent { background: #e9ebf5; color: #374776; }
.chip-open { background: #e7edf4; color: #31566f; }
.chip-ok { background: #dceee4; color: var(--ok); }
.chip-warn { background: #fae9ca; color: var(--warn); }
.chip-danger { background: #f9e1df; color: var(--danger); }
.empty { background: var(--card); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: .7rem; }
.empty p { color: var(--muted); }
.error-note { color: var(--danger); border: 1px solid #ebc4bf; background: #fff0ed; padding: .75rem; border-radius: 10px; font-size: .9rem; overflow-wrap: anywhere; }
.bottom-nav { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); align-items: center; min-height: var(--nav-h); padding: .4rem .25rem calc(.4rem + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); }
.bottom-nav a { min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; text-decoration: none; color: var(--muted); font-size: .72rem; font-weight: 500; }
.bottom-nav svg { width: 22px; height: 22px; }
.bottom-nav a[aria-current="page"] { color: var(--forest); font-weight: 650; }
.nav-plus { width: 38px; height: 38px; border-radius: 50%; background: var(--forest); color: #fffefa; display: grid; place-items: center; font-size: 1.5rem; line-height: 1; margin-top: -.85rem; box-shadow: 0 0 0 5px var(--card); }
.side-nav { display: none; }
.text-back, .wizard-back { min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font-size: .85rem; font-weight: 500; }
.text-back::before, .wizard-back::before { content: "‹"; font-size: 1.5rem; vertical-align: -.08em; margin-right: .5rem; }
.company-logo { width: 76px; height: 76px; object-fit: contain; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.quote-amount { font-size: 2.3rem; font-weight: 650; margin: 1rem 0; letter-spacing: -.05em; }
#view-offert { background: var(--card); padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); }
#view-offert .chip { display: flex; margin: .7rem 0; }
#view-offert .view-note { margin: .5rem 0; }
#quoteDetailNote { padding-top: 1rem; margin-top: 1rem !important; border-top: 1px solid var(--line); }
.wizard { display: grid; gap: 1rem; width: 100%; }
.wizard-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.wizard-top h1 { font-size: .92rem; font-weight: 650; }
.wizard-step-label { color: var(--muted); font-size: .8rem; }
.wizard-progress { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .3rem; list-style: none; margin: -.3rem 0 .5rem; padding: 0; color: var(--muted); font-size: .7rem; font-weight: 500; }
.wizard-progress li { padding: .45rem 0; border-top: 3px solid #d9dcd9; white-space: nowrap; }
.wizard-progress li[aria-current="step"] { color: var(--ink); border-color: var(--bronze); font-weight: 700; }
.wizard h2 { font-size: 1.45rem; font-weight: 700; margin-bottom: .9rem; }
[data-wizard] > .field { margin-bottom: 1rem; }
.field { display: grid; min-width: 0; gap: .4rem; font-weight: 550; font-size: .84rem; }
.field input, .field textarea, .field select { width: 100%; min-width: 0; min-height: 48px; padding: .75rem .85rem; border: 1px solid #d6d9d7; border-radius: 9px; background: var(--card); color: var(--ink); font-size: 16px; font-weight: 400; }
.password-field { position: relative; display: block; }
.password-toggle { position: absolute; top: 0; right: 0; width: 44px; height: 100%; border: 0; border-radius: 9px; background: transparent; color: var(--muted); display: grid; place-items: center; padding: 0; }
.password-toggle svg { width: 22px; height: 22px; }
.gate .field .password-field input { padding-right: 2.8rem; }
.field input::placeholder, .field textarea::placeholder { color: #757e84; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #977741; }
.field input:disabled, .field textarea:disabled { background: #eceeea; color: #5f686e; }
.field input[type="file"] { padding: .55rem; font-size: .8rem; }
.field input[type="file"]::file-selector-button { border: 0; border-radius: 6px; padding: .5rem .75rem; background: #e8e8e2; color: var(--ink); margin-right: .6rem; cursor: pointer; }
.field textarea { min-height: 7rem; resize: vertical; }
.wizard-secondary { width: 100%; margin: .5rem 0 1rem; }
.stack-form { display: grid; gap: 1rem; }
#directoryCustomerForm, #newCustomerForm, #lineForm, #companyForm { background: var(--card); padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); }
#directoryCustomerForm .view-note, #newCustomerForm .view-note { margin: 0; }
.customer-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.customer-card { width: 100%; min-height: 44px; text-align: left; display: grid; gap: .2rem; padding: 1rem 2rem 1rem 1rem; position: relative; border: 0; border-bottom: 1px solid var(--line); background: var(--card); color: inherit; text-decoration: none; }
.customer-card:last-child { border-bottom: 0; }
.customer-card:hover { background: #f5f3ed; }
.customer-card::after { content: "›"; position: absolute; right: 1rem; top: 1rem; color: #8c9599; font-size: 1.2rem; }
.customer-card strong { font-size: .95rem; font-weight: 600; overflow-wrap: anywhere; }
.customer-address, .customer-meta, .customer-count { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.customer-count { color: #8a6c3b; }
.job-customer { display: inline-block; color: var(--muted); margin-bottom: 1rem; padding: .5rem .75rem; background: #e9eae5; border-radius: 8px; }
#contentSummary { white-space: pre-line; font-size: .82rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.wizard-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .5rem .8rem; align-items: center; padding: .8rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 25px #15212908; }
.wizard-bar .btn { width: 100%; margin: 0; }
.wizard-summary { grid-column: 1/-1; display: grid; gap: .2rem; }
.sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.wizard-summary span { color: var(--muted); font-size: .78rem; }
.wizard-summary strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.sum-pay { border-top: 1px solid var(--line); padding-top: .35rem; }
.sum-pay span { color: var(--ink); font-weight: 600; }
.sum-pay strong { font-size: 1.25rem; }
#wizardNext:last-child, #wizardBar:not(:has(#wizardSummary:not([hidden]))) .btn { grid-column: 1/-1; }
#saveClose { background: transparent; border-color: transparent; color: var(--muted); }
#saveClose:hover { background: var(--paper); color: var(--ink); }
.choice-list { display: grid; gap: .65rem; border: 0; margin: 1rem 0 0; padding: 0; }
.choice-list legend { font-size: .9rem; font-weight: 600; margin-bottom: .65rem; }
.choice { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .2rem .75rem; align-items: center; min-height: 44px; padding: .9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; }
.choice input { width: 20px; height: 20px; margin: 0; accent-color: #8a6c3b; }
.choice strong { font-weight: 600; font-size: .94rem; }
.choice span { grid-column: 2; color: var(--muted); font-weight: 400; font-size: .82rem; }
.choice:has(input:checked) { border-color: #a98b55; background: #f6f1e7; box-shadow: inset 0 0 0 1px #a98b55; }
#rotPersons { grid-template-columns: repeat(2,minmax(0,1fr)); }
#rotPersons legend { grid-column: 1/-1; }
.rot-result { display: grid; gap: .75rem; margin-top: 1.5rem; padding: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.rot-result p { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.rot-result strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rot-result p:last-child { padding-top: .75rem; border-top: 1px solid var(--line); font-weight: 600; }
.review-block { display: grid; gap: 1rem; margin-top: 1rem; }
.review-status { font-weight: 650; font-size: 1.1rem; }
.review-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
.review-actions .btn { margin: 0; font-size: .8rem; }
#reviewSend, #reviewStatus { padding: 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
#reviewCheckpoint { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; margin-top: 1.5rem; box-shadow: var(--shadow); }
#reviewCheckpoint > h3 { margin: 0 0 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
#sendReady { display: grid; gap: .8rem; }
.send-title { font-size: 1.2rem; font-weight: 650; overflow-wrap: anywhere; }
#sendProject { margin: 0 0 .5rem; }
.send-sections, .send-totals, .send-confirm { display: grid; gap: .65rem; min-width: 0; }
.send-sections p, .send-totals p, .send-confirm p { display: flex; justify-content: space-between; gap: .75rem; margin: 0; overflow-wrap: anywhere; font-size: .82rem; }
.send-sections p { padding-bottom: .65rem; border-bottom: 1px solid var(--line); }
.send-totals { padding: .9rem 0; }
.send-pay { background: #e7efe7; border-radius: 8px; padding: .75rem; align-items: center; }
.send-pay strong, #sendPays { font-size: 1.1rem; }
.send-confirm { padding: 1rem; border: 1px solid var(--line); border-radius: 10px; margin-top: .7rem; }
.send-confirm .review-status { font-size: 1rem; margin-bottom: .4rem; }
.send-confirm strong { text-align: right; min-width: 0; }
#sendTo { overflow-wrap: anywhere; }
#sendQuote, #sendReview { background: var(--forest); color: #fffefa; border-color: var(--forest); }
#sendQuote:hover, #sendReview:hover { background: var(--forest-2); }
#sendReady, #reviewCheckpoint, #view-offert, #sendSections { min-width: 0; max-width: 100%; }
.labor-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: .75rem; }
.labor-list { display: grid; gap: .5rem; }
.labor-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: .4rem .45rem; align-items: start; padding: .85rem .45rem .85rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.labor-copy { min-width: 0; }
.labor-copy strong { display: block; font-size: .86rem; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.labor-formula { display: block; white-space: normal; overflow-wrap: anywhere; color: var(--muted); font-size: .75rem; margin-top: .25rem; }
.labor-markup { display: block; }
.labor-sum { font-size: .83rem; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.labor-menu { min-width: 44px; min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--forest); font-size: 1.25rem; line-height: 1; }
.labor-menu:hover { background: var(--paper); }
.labor-actions { grid-column: 1/-1; display: flex; gap: .5rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.labor-actions button { min-height: 44px; padding: 0 1rem; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); font-size: .85rem; font-weight: 600; color: var(--ink); }
.labor-actions button[data-remove] { color: var(--danger); }
.labor-preview { color: var(--muted); min-height: 1.4rem; overflow-wrap: anywhere; padding: .7rem; background: var(--paper); border-radius: 8px; font-size: .86rem; }
.line-section { display: grid; gap: .7rem; margin-top: 1.25rem; }
.line-section .section-title { margin: 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.section-total { font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.quick-picks { display: flex; flex-wrap: wrap; gap: .4rem; }
.quick-picks button { min-height: 44px; padding: .5rem .85rem; border-radius: 8px; border: 1px solid var(--line); background: #ebece8; color: var(--ink); font-size: .82rem; font-weight: 500; }
#addPost { margin-top: 1.25rem; }
.type-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
.type-picker button { min-height: 64px; text-align: left; padding: .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font-size: .83rem; font-weight: 550; }
.type-picker button:hover { border-color: #a98b55; background: #f6f1e7; }
.save-state { min-height: 1.3rem; color: var(--ok); font-size: .8rem; font-weight: 550; }
.save-state:not(:empty)::before { content: "✓ "; }
.save-state.is-error { color: var(--danger); }
.save-state.is-error::before { content: ""; }
body.wizard-open .bottom-nav, body.wizard-open .side-nav { display: none !important; }
body.wizard-open .app-frame { display: block; }
body.wizard-open .app-main { max-width: 44rem; margin: 0 auto; padding-bottom: calc(16rem + env(safe-area-inset-bottom)); }
body.wizard-open.send-open .app-main { padding-bottom: calc(8rem + env(safe-area-inset-bottom)); }
#sendQuote { scroll-margin-bottom: calc(6rem + env(safe-area-inset-bottom)); }
@media (min-width: 600px) {
  .app-main { padding-left: 2rem; padding-right: 2rem; }
  .overview-hero { margin-left: -2rem; margin-right: -2rem; padding-left: 2rem; padding-right: 2rem; }
  .stat span { font-size: .8rem; }
  #companyForm { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #companyForm > img, #companyForm > .field:first-of-type, #companyForm > p, #companyForm > button { grid-column: 1/-1; }
  .wizard-bar { max-width: 40rem; left: 50%; transform: translateX(-50%); border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; }
  .wizard-progress { font-size: .75rem; }
}
@media (min-width: 900px) {
  .bottom-nav { display: none; }
  .app-header { padding-left: 1.5rem; padding-right: 2rem; }
  .brand { width: 13rem; }
  .app-frame { display: grid; grid-template-columns: 15rem minmax(0,1fr); min-height: calc(100dvh - var(--header-h)); }
  .side-nav { display: flex; position: sticky; top: var(--header-h); height: calc(100dvh - var(--header-h)); flex-direction: column; gap: .4rem; padding: 1.6rem 1rem; background: var(--forest); color: #c5ced1; }
  .side-nav .eyebrow { color: #8b9a9f; padding: 0 .8rem .6rem; }
  .side-nav a { min-height: 48px; display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 9px; text-decoration: none; font-size: .9rem; font-weight: 500; }
  .side-nav a[aria-current="page"] { background: #29363d; color: #fffefa; }
  .side-nav a:hover { background: #23313a; color: #fffefa; }
  .side-nav .side-cta { margin: .5rem 0 1.25rem; background: var(--bronze); color: var(--ink); justify-content: center; font-weight: 650; }
  .side-nav .side-cta:hover { background: #c7ac7d; color: var(--ink); }
  .sidebar-note { margin-top: auto; padding: 1rem .8rem 0; border-top: 1px solid #34434a; font-size: .75rem; color: #8e9da3; }
  .sidebar-note strong { display: block; color: #d3bb8e; font-size: .82rem; margin-bottom: .35rem; font-weight: 500; }
  .app-main { max-width: 72rem; padding: 2.5rem 3rem 3rem; }
  .overview-hero { margin: 0; border-radius: var(--radius); padding: 2rem 2rem 3rem; }
  .company-name { font-size: 2rem; }
  .overview-action { margin: -1.5rem 2rem 0; max-width: 28rem; }
  .stats { margin-top: 1.8rem; gap: .75rem; }
  .stat { align-items: flex-start; padding: 1rem 1.25rem; min-height: 6rem; }
  .stat b { font-size: 1.75rem; }
  .stat span { font-size: .8rem; }
  .offer-card { grid-template-columns: minmax(0,1fr) 14rem; gap: .3rem 1.5rem; padding: 1.2rem; }
  .offer-top { grid-column: 1/-1; }
  .offer-meta { flex-direction: row-reverse; }
  .offer-top h3 { font-size: 1rem; }
  .offer-customer { font-size: .85rem; }
  .view-title { font-size: 2rem; }
  #view-foretaget, #view-installningar, #view-offert, #view-kund, #view-kunder { max-width: 48rem; }
  .wizard { padding-top: .25rem; }
  body.wizard-open .app-main { padding-top: 1.5rem; }
  .wizard h2 { font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Offertleverans och verkliga läskvitton. */
.opening-card { margin: 24px 0; padding: 20px; border: 1px solid var(--border, #dedbd5); border-radius: 16px; background: #fff; }
.opening-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.opening-heading h2 { margin: 0; font-size: 18px; }
.opening-status { font-size: 21px; font-weight: 700; margin: 18px 0; }
.opening-dates { margin: 0; }
.opening-dates div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding: 10px 0; border-top: 1px solid #eee; }
.opening-dates dt { color: #596470; }
.opening-dates dd { margin: 0; font-weight: 600; }
.pdf-actions { display: grid; gap: 10px; margin-bottom: 16px; }
.offer-opening { color: #596470; font-size: 12px; margin: 10px 0 0; }
.quote-tools { display: grid; gap: .75rem; margin: 0 0 1rem; }
.quote-filters { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .15rem; -webkit-overflow-scrolling: touch; }
.quote-filters button { flex: none; min-height: 36px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: .3rem .8rem; font-size: .8rem; font-weight: 600; }
.quote-filters button[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: #fffefa; }
@media (max-width: 899px) {
  .app-header { --status-gap: max(env(safe-area-inset-top, 0px), 4rem); }
}

.quote-actions { display: grid; gap: 10px; margin: 20px 0; }
.lifecycle-card, .ata-row { padding: 20px; margin: 18px 0; background: #fff; border: 1px solid #dedbd5; border-radius: 16px; }
.lifecycle-card h2 { margin: 0 0 16px; font-size: 20px; }
.ata-row h2 { margin: 0 0 14px; font-size: 18px; }
.ata-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ata-fields .field { min-width: 0; }
.ata-row .btn { margin-top: 12px; }
@media (min-width: 768px) { .quote-actions { grid-template-columns: repeat(2, minmax(0,1fr)); } .ata-fields { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.ata-fields .field:last-child { grid-column: 1 / -1; }
@media (min-width: 768px) { .ata-fields .field:last-child { grid-column: auto; } }
.cover-choice img { width:100%; height:150px; object-fit:cover; border-radius:10px; margin:1rem 0; }
.cover-choice input[type=file] { max-width:100%; font-size:.85rem; }
.quote-history { list-style:none; padding:0; margin:1rem 0; }
.quote-history li { padding:.75rem 0; border-bottom:1px solid var(--line); font-size:.85rem; }
.quote-history time { display:block; color:var(--muted); margin-top:.2rem; }
#versionHistory { display:grid; gap:.6rem; margin-top:1rem; }
.pdf-viewer { width:min(100%, 960px); height:95dvh; max-height:95dvh; padding:1rem; border:0; border-radius:16px; background:var(--paper); color:var(--ink); }
.pdf-viewer::backdrop { background:#111d24c9; }
.pdf-viewer header { display:flex; justify-content:space-between; align-items:center; gap:.5rem; position:sticky; top:-1rem; background:var(--paper); padding:.5rem 0; z-index:2; }
.pdf-viewer h2 { font-size:1.2rem; }
#pdfViewerState { margin:.7rem 0; font-size:.85rem; }
#pdfViewerPages { display:grid; gap:1rem; margin-top:1rem; }
#pdfViewerPages canvas { display:block; width:100%; height:auto; background:white; box-shadow:var(--shadow); }
body:has(#pdfViewer[open]) { overflow:hidden; }
@media (max-width:759px) {
  html:has(.gate:not([hidden])), body:has(.gate:not([hidden])) { overflow:hidden; height:100dvh; }
  .gate { height:100dvh; min-height:0; overflow:hidden; padding:calc(1rem + env(safe-area-inset-top)) 1.15rem calc(.8rem + env(safe-area-inset-bottom)); }
  .gate-main { height:100%; display:flex; flex-direction:column; justify-content:space-between; gap:.7rem; }
  .gate-brand { margin-bottom:1rem; gap:.8rem; }
  .gate-brand img { width:48px; height:48px; }
  .welcome-name { font-size:1.1rem; }
  .gate h1 { font-size:clamp(1.8rem, 7.3vw, 2.35rem); }
  .welcome-badge { font-size:.66rem; margin-bottom:.55rem; }
  .gate-copy { font-size:.84rem; line-height:1.45; margin:.75rem 0 1rem; }
  .gate-points { gap:.65rem; font-size:.75rem; }
  .gate-points li { padding-left:1.9rem; }
  .welcome-hdh { margin-top:1rem; font-size:.74rem; }
  .welcome-access { margin-top:0; padding:1.1rem; border-radius:18px; flex-shrink:0; }
  .welcome-access-heading h2 { font-size:1.15rem; margin:.3rem 0; }
  .welcome-access-heading>p:last-child { font-size:.78rem; }
  .gate-actions { margin-top:.8rem; gap:.5rem; }
  .welcome-device { font-size:.67rem; margin-top:.65rem; }
  .gate-login-open .gate-points, .gate-login-open .gate-copy, .gate-login-open .welcome-badge,
  .gate-connect-open .gate-points, .gate-connect-open .gate-copy, .gate-connect-open .welcome-badge { display:none; }
  .gate-login-open .gate-actions, .gate-login-open .welcome-device { display:none; }
  .gate .stack-form { margin-top:.8rem; gap:.7rem; }
  .gate .field { font-size:.83rem; }
  .gate-connect-open .connect-panel { margin-top:.7rem; padding:.7rem; gap:.5rem; }
  .gate-connect-open .gate-actions { display:none; }
  .pdf-viewer { width:100%; height:100dvh; max-height:100dvh; margin:0; border-radius:0; }
}
@media (max-width:759px) and (max-height:700px) {
  .gate-points span, .welcome-device { display:none; }
  .gate-copy { margin:.55rem 0; font-size:.78rem; }
  .gate-points { gap:.4rem; }
  .gate-brand { margin-bottom:.6rem; }
  .welcome-hdh { margin-top:.65rem; }
  .welcome-access { padding:.9rem; }
  .gate-login-open h1, .gate-connect-open h1 { display:none; }
}
@media (max-width:759px) and (max-height:480px) {
  .gate-main { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:1rem; }
  .gate-copy, .gate-points, .welcome-badge, .welcome-device { display:none; }
  .gate h1 { font-size:1.5rem; }
  .welcome-hdh { font-size:.65rem; }
  .gate-brand img { width:36px; height:36px; }
  .gate .field input { min-height:40px; padding:.4rem; }
  .gate .stack-form { gap:.35rem; }
}
@media(max-width:759px) { .pdf-viewer { max-width:100vw; } }
.lifecycle-card summary { min-height:44px; cursor:pointer; font-weight:600; display:list-item; padding:.5rem; }

.line-detail { display:block; white-space:pre-wrap; font-size:13px; line-height:1.45; color:var(--muted); margin-top:8px; overflow-wrap:anywhere; }
#textList .labor-copy strong { white-space:pre-wrap; font-weight:500; }
#articleFooterForm { margin-top:12px; }

.device-dialog { width:min(440px,calc(100vw - 2rem)); max-height:calc(100dvh - 2rem); overflow:auto; padding:1.5rem; border:1px solid var(--line); border-radius:20px; background:var(--card); color:var(--ink); box-shadow:0 20px 80px #0004; }
.device-dialog::backdrop { background:#16231eaa; }
.device-dialog h2 { margin:.4rem 0 1rem; }
.device-dialog p { margin:.7rem 0; }
.login-install { display:none; }
.gate-login-open .login-install { display:flex; width:100%; margin-top:.5rem; }
#deductionRow, #rotDeductionLabel, #sendDeductionRow { color:var(--ok); }
#deductionRow + #payRow { color:var(--ok); }
@media(max-width:759px) and (max-height:740px) { .gate-points span, .welcome-device { display:none; } .gate-points { gap:.3rem; } .gate-copy { margin:.5rem 0; } .gate-brand { margin-bottom:.55rem; } .welcome-hdh { margin-top:.5rem; } .gate-actions .btn { min-height:42px; padding:.5rem; } }
@media(max-width:759px) and (max-height:570px) { .gate-points, .gate-copy, .welcome-badge { display:none; } .gate-login-open .login-install { min-height:36px; padding:.35rem; } }
.gate-login-open .gate-actions, .gate-login-open .welcome-device { display:none; }
@media (max-width:1000px) and (max-height:480px) {
  html:has(.gate:not([hidden])), body:has(.gate:not([hidden])) { height:100dvh; overflow:hidden; }
  .gate { height:100dvh; min-height:0; overflow:hidden; padding:.8rem 1rem; }
  .gate-main { height:100%; display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:1rem; }
  .gate-copy, .gate-points, .welcome-badge, .welcome-device { display:none; }
  .gate-brand { margin-bottom:.6rem; }
  .gate-brand img { width:36px; height:36px; }
  .gate h1 { font-size:1.6rem; }
  .welcome-hdh { font-size:.7rem; margin-top:.6rem; }
  .welcome-access { padding:.8rem; }
  .welcome-access-heading h2 { font-size:1.1rem; }
  .welcome-access-heading>p:last-child { font-size:.75rem; }
  .gate .stack-form { margin-top:.5rem; gap:.3rem; }
  .gate .field { font-size:.78rem; }
  .gate .field input { min-height:38px; padding:.35rem .6rem; }
  .gate .btn { min-height:38px; padding:.4rem .7rem; }
  .gate-actions { margin-top:.65rem; gap:.4rem; }
  .gate-login-open .login-install { margin-top:.3rem; }
}

/* Contact panels follow the app's card and action design. */
#view-kund .lifecycle-card { margin-top:1rem; padding:1.15rem; }
#view-kund details.lifecycle-card > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0; min-height:44px; font-size:1rem; }
#view-kund details summary::-webkit-details-marker { display:none; }
#view-kund details.lifecycle-card > summary::after, #contactEditDetails > summary::after { content:""; width:7px; height:7px; flex:none; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); margin-right:4px; }
#view-kund details.lifecycle-card[open] > summary::after, #contactEditDetails[open] > summary::after { transform:rotate(225deg); }
#view-kund details.lifecycle-card[open] > summary { margin-bottom:.8rem; }
#view-kund [role="status"]:empty { display:none; }
#view-kund .lifecycle-card > .view-note { margin:.25rem 0 1rem; line-height:1.5; }
#contactFacts { margin:0; display:grid; gap:0; }
#contactFacts > div { display:grid; grid-template-columns:minmax(130px,.45fr) minmax(0,1fr); gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--line); }
#contactFacts > div:last-child { border-bottom:0; }
#contactFacts dt { color:var(--muted); font-size:.85rem; }
#contactFacts dd { margin:0; font-weight:500; font-size:.92rem; overflow-wrap:anywhere; }
#contactEditDetails { border-top:1px solid var(--line); margin-top:.5rem; padding-top:.6rem; }
#contactEditDetails > summary { list-style:none; display:flex; justify-content:space-between; align-items:center; min-height:44px; color:var(--forest); font-size:.9rem; padding:0; }
#contactEditForm { padding-top:1rem; }
.contact-item { padding:1rem 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.contact-item:last-child { border-bottom:0; }
.contact-document-heading { display:flex; gap:.85rem; align-items:flex-start; }
.contact-document-heading > div { min-width:0; flex:1; }
.contact-document-heading strong { font-size:.94rem; line-height:1.45; }
.contact-document-heading .view-note { margin:.35rem 0 0; font-size:.82rem; line-height:1.5; }
.contact-file-icon { display:grid; place-items:center; width:44px; height:48px; flex:none; border-radius:10px; border:1px solid #d6e1da; background:#edf3ef; color:var(--forest); font-size:.65rem; font-weight:700; letter-spacing:.04em; }
.contact-document-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:.9rem; padding-left:calc(44px + .85rem); }
.contact-document-actions .btn { margin:0; min-height:44px; font-size:.85rem; padding:.6rem 1rem; text-decoration:none; }
.contact-note { white-space:pre-wrap; overflow-wrap:anywhere; margin:0 0 .5rem; line-height:1.5; }
.contact-item small { color:var(--muted); }
.contact-empty { margin:.8rem 0 0; padding:1rem; border-radius:10px; background:var(--paper); color:var(--muted); font-size:.9rem; line-height:1.5; }
#contactNoteForm { margin-top:1rem; }
@media(max-width:480px) {
  #view-kund .lifecycle-card { padding:1rem; }
  #contactFacts > div { grid-template-columns:minmax(0,1fr); gap:.3rem; }
  .contact-document-actions { padding-left:0; }
  .contact-document-actions .btn { flex:1; }
}

.pdf-viewer[open] { display:flex; flex-direction:column; overflow:hidden; }
.pdf-zoom-controls { display:flex; align-items:center; gap:.5rem; flex-shrink:0; padding:.5rem 0; }
.pdf-zoom-controls span { font-size:.72rem; color:var(--muted); }
.pdf-zoom-controls .btn { min-height:40px; padding:.4rem .7rem; }
#pdfPageScroll { overflow:auto; flex:1; min-height:0; touch-action:pan-x pan-y pinch-zoom; }
#pdfViewerPages { min-width:100%; touch-action:pan-x pan-y pinch-zoom; }
#pdfViewerPages canvas { max-width:none; }

.productivity-card { padding:1rem; margin:1rem 0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); }
.productivity-card h3 { font-size:1rem; margin:0 0 .6rem; }
.productivity-card .view-note { font-size:.84rem; line-height:1.5; margin:.5rem 0; }
.productivity-card ul { padding-left:1.2rem; font-size:.9rem; line-height:1.5; }
.productivity-card li { margin:.65rem 0; }
.quality-block { color:var(--danger); font-weight:600; }
#internalNotes { margin-top:1rem; }
#resumeDraft p { margin:.5rem 0; }
#copyHint, #reuseWizard { margin-bottom:1rem; }

/* Keep article actions next to the heading, before long customer descriptions. */
.labor-detail { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; }
.labor-row .labor-actions { flex-wrap: wrap; }
.labor-row .labor-sum { padding-top: .35rem; }
.labor-row .labor-menu { background: var(--paper); }

/* Content workspace: the quote list remains in place while one article is edited. */
#step-innehall #lineBoards {display:flex;flex-direction:column;gap:12px;}
#step-innehall #lineBoards > :is(#addPost,#typePicker) {order:-2;margin:0;}
#step-innehall #lineBoards > :is(#lineCount,#linesEmpty,.line-section) {order:-1;margin:0;}
#step-innehall .content-shortcuts {padding:12px 16px;margin:12px 0;}
#step-innehall .content-shortcuts summary {font-weight:650;cursor:pointer;}
#step-innehall .content-count {color:var(--muted);font-size:13px;}
#step-innehall .labor-copy {min-width:0;}
#step-innehall .labor-copy strong {overflow-wrap:anywhere;}
#step-innehall .labor-detail summary {font-size:13px;color:var(--muted);cursor:pointer;padding:8px 0;}
#step-innehall .labor-detail[open] {border-top:1px solid var(--line);margin-top:6px;}
body.line-editor-open {overflow:hidden;}
.line-editor {width:min(480px,calc(100% - 24px));max-width:480px;max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink);overflow:auto;overscroll-behavior:contain;box-shadow:0 18px 60px #15212935;}
.line-editor::backdrop {background:rgba(21,33,41,.35);}
.line-editor #lineForm {border:0;border-radius:0;margin:0;padding:20px;}
.line-editor .section-title {margin:0 0 16px;}
.line-editor #lineFormNote {font-size:13px;}
.line-editor .field {margin-top:10px;}
.line-editor #linePriceFields {display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
.line-editor #linePriceFields > :is(.labor-grid,.line-advanced,p) {grid-column:1/-1;}
.line-editor .labor-grid {margin:0;}
.line-editor .line-advanced {padding:10px 0;border-top:1px solid var(--line);margin-top:14px;}
.line-editor .line-advanced summary {cursor:pointer;font-size:14px;font-weight:600;}
.line-editor .line-editor-actions {position:sticky;bottom:-20px;display:grid;grid-template-columns:auto 1fr;gap:10px;background:var(--card);border-top:1px solid var(--line);padding:14px 0 max(14px,env(safe-area-inset-bottom));margin-top:14px;}
.line-editor .labor-preview {font-weight:650;background:#edf3ef;border-radius:10px;padding:12px;margin-top:12px;}
.line-editor .labor-preview:empty {display:none;}
@media(min-width:1000px) {.line-editor {margin:16px 24px 16px auto;max-height:calc(100dvh - 32px);}}
@media(max-width:600px) {.line-editor {width:calc(100% - 16px);max-height:calc(100dvh - 16px);margin:auto;border-radius:16px;}}
.line-editor #lineForm {gap:10px;}
.line-editor .section-title {margin-bottom:2px;}
.line-editor .field {margin-top:0;}
.line-editor #linePriceFields {gap:10px 12px;}
.line-editor #linePriceFields > .labor-grid {order:1;}
.line-editor #linePriceFields > :is(.line-advanced,p) {order:2;}
.line-editor .line-advanced {margin-top:4px;}
.line-editor .line-editor-actions {margin-top:4px;}

/* Multiple seller requests: independent responses, compact mobile overview. */
#reviewRecipients > summary { font-weight:700; cursor:pointer; padding:12px 0; }
.review-recipient-queue { list-style:none; padding:0; margin:12px 0; }
.review-recipient-queue li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid #d4dfd9; border-radius:12px; margin-bottom:8px; overflow-wrap:anywhere; }
.review-recipient-queue button { flex-shrink:0; min-height:44px; }
.review-seller-grid { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.review-seller-card { align-content:start; text-align:left; display:grid; gap:6px; padding:16px; border:1px solid #d4dfd9; border-radius:14px; background:#fff; color:#17251f; width:100%; cursor:pointer; overflow-wrap:anywhere; font:inherit; }
.review-seller-card[aria-pressed="true"] { border:2px solid #214b3b; background:#eff7f2; padding:15px; }
.review-seller-card small { color:#53675d; }
.review-seller-card:focus-visible { outline:3px solid #ad8947; outline-offset:2px; }
#reviewOverview h3 { margin:0 0 8px; }
#reviewStatus { scroll-margin-top:100px; }

@media (min-width:900px) {
  body.wizard-open .app-main:has(#step-granska:not([hidden])) { max-width:68rem; }
}

.project-photos{margin-top:24px;padding:18px;border:1px solid #d4dfd9;border-radius:16px;background:#fff}.project-photos h3{margin:0 0 8px}.project-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.project-photo-grid figure{margin:0;min-width:0}.project-photo-grid img{width:100%;height:130px;object-fit:cover;border-radius:10px}.project-photo-grid figcaption{font-size:12px;overflow-wrap:anywhere;margin:5px 0}.project-photo-grid button{min-height:40px;width:100%}@media(min-width:700px){.project-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:599px){.project-photo-grid{grid-template-columns:minmax(0,1fr)}.project-photo-grid img{height:180px}}.project-photo-grid form textarea{width:100%;min-height:76px}.project-photo-grid form .view-note{margin:8px 0}

.review-personal-message{margin:20px 0;padding:16px;border:1px solid #d4dfd9;border-radius:14px;background:#f6faf7}.review-personal-message h3{margin:0 0 8px}.review-email-preview{padding:14px;background:#fff;border:1px solid #d4dfd9;border-radius:10px;overflow-wrap:anywhere}

.review-recipient-queue li{flex-wrap:wrap}.review-recipient-message{flex-basis:100%;min-width:0;border-top:1px solid #d4dfd9;padding-top:12px}.review-recipient-message summary{cursor:pointer;font-weight:600;padding:8px 0}.review-recipient-message textarea{width:100%;box-sizing:border-box}.review-email-preview p{margin:0 0 12px}#reviewEmailRecipient{width:100%;margin:12px 0;min-height:44px}
.review-material-brief .field + .field{margin-top:14px}.review-material-brief select{font-size:14px}.review-material-brief h3{font-size:18px}.review-material-brief{margin-top:0}

.offert-header-actions{display:flex;align-items:center;gap:12px}
.offert-notification-btn{position:relative}
.offert-notification-count{position:absolute;right:-5px;top:-5px;min-width:20px;padding:2px 5px;border-radius:20px;background:#f0ca72;color:#172b24;font-size:11px;font-weight:800;line-height:16px}
.offert-notification-dialog{width:min(600px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;border:1px solid #dce4de;border-radius:18px;color:#172b24;background:#f4f3ef;overflow:auto}
.offert-notification-dialog::backdrop{background:#14251bcc}
.offert-notification-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--forest);color:white;padding:18px;position:sticky;top:0;z-index:1}
.offert-notification-dialog h2{margin:4px 0 0;font-size:1.3rem;color:white}
.offert-notification-dialog>p,.offert-notification-tools,#offertNotificationList{margin:16px}
.offert-notification-tools{display:flex;gap:8px;flex-wrap:wrap}
.offert-notification-tools .btn{min-height:44px}
.offert-notice{display:flex;flex-direction:column;gap:8px;text-align:left;width:100%;padding:16px;margin-bottom:12px;border:1px solid #dce4de;border-radius:12px;background:white;color:#172b24;font:inherit;cursor:pointer}
.offert-notice.is-unread{border-left:4px solid #24513e;background:#f9fcf9}
.offert-notice-label{font-size:.78rem;font-weight:700;color:#24513e}
.offert-notice time{font-size:.75rem;color:#637269}
.offert-notice-action{font-size:.85rem;font-weight:700}
.offert-notice>span,.offert-notice>strong{overflow-wrap:anywhere}
.offert-notice:focus-visible{outline:3px solid #b69a60;outline-offset:2px}

.material-customer-display{padding:16px;border:1px solid #cddbd3;border-radius:12px;background:#edf4ef;margin:12px 0}.material-customer-display label{display:block;font-weight:700}.material-customer-display select{display:block;width:100%;max-width:100%;font:inherit;font-size:16px;min-height:44px;margin-top:8px;padding:10px;border:1px solid #bdcdc4;border-radius:8px;color:#173d2c;background:white}.material-customer-display p{font-size:.85rem;line-height:1.5;color:#496055;margin:8px 0 0}

.offer-material-response{margin:8px 0 0;color:#21533e;font-size:13px;font-weight:650;background:#edf7f1;border-radius:7px;padding:7px 10px;line-height:1.5}

.offer-card{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "customer" "response" "meta" "opening";gap:5px;padding:14px 16px}.offer-top{grid-area:top;grid-column:auto;align-items:flex-start}.offer-customer{grid-area:customer;margin:0}.offer-material-response{grid-area:response;margin:2px 0;background:none;padding:0;font-size:12px;line-height:1.5;font-weight:600}.offer-meta{grid-area:meta;flex-direction:row;align-items:center;font-size:12px}.offer-opening{grid-area:opening;margin:0;font-size:12px}.offer-amount{font-size:14px;white-space:nowrap}.offer-date{white-space:nowrap}.offer-top .chip{flex-shrink:0}.review-transport-request{padding:14px;border:1px solid #c8d8ce;border-radius:10px;background:#f1f7f3;margin:16px 0}.review-transport-request .choice{display:flex;gap:10px;align-items:flex-start;line-height:1.5;font-weight:650}.review-transport-request input[type=checkbox]{width:20px;height:20px;flex-shrink:0;accent-color:#25533d}@media(min-width:760px){.offer-card{grid-template-columns:minmax(0,1fr) 180px;grid-template-areas:"top meta" "customer meta" "response response" "opening opening";gap:5px 20px}.offer-top{justify-content:flex-start;gap:12px}.offer-meta{flex-direction:column;align-items:flex-end;justify-content:center;gap:4px}.offer-top h3{font-size:15px}.offer-material-response{font-size:12px}.offer-customer{font-size:13px}}

/* Supplier totals are comparison values, never customer quote prices. */
.review-offer-choice {display:grid;gap:4px;border-top:1px solid #d4dfd9;padding-top:10px;margin-top:4px;}
.review-offer-total {display:grid;gap:3px;margin:6px 0;overflow-wrap:anywhere;}
.review-offer-total>strong {font-size:1.125rem;color:#214b3b;font-variant-numeric:tabular-nums;}
.review-total-editor {margin:10px 0;}
.review-total-editor form {display:grid;gap:10px;margin-top:12px;}
.review-total-editor label {display:grid;gap:6px;}
.review-total-editor input,.review-total-editor select {box-sizing:border-box;width:100%;min-height:44px;padding:10px;border:1px solid #d4dfd9;border-radius:8px;background:#fff;font:inherit;}

/* Compact comparison for several sellers; full attachment list stays in the selected reply. */
.review-seller-grid {grid-template-columns:1fr;align-items:start;}
.review-seller-card {padding:12px;gap:4px;line-height:1.4;}
.review-seller-card[aria-pressed="true"] {padding:11px;}
.review-seller-card .review-offer-choice {gap:2px;padding-top:7px;margin-top:3px;}
.review-seller-card .review-offer-total {margin:2px 0;gap:1px;}
.review-seller-card .review-offer-total>strong {font-size:1rem;}
.review-seller-card .review-offer-total>small,.review-seller-card>small {font-size:.75rem;}
.review-seller-card .review-more-offers {font-weight:650;color:#214b3b;}
@media(min-width:680px){.review-seller-grid {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1100px){.review-seller-grid {grid-template-columns:repeat(3,minmax(0,1fr));}}

/* Company reply workspace: compact metadata and distinct documents/questions/actions. */
#reviewStatus {gap:12px;padding:16px;border:1px solid #d8e2dc;border-radius:14px;background:#fff;}
#reviewStatus p {margin:0;line-height:1.5;}
#reviewStatus p:empty {display:none;}
.review-response-heading {display:grid;gap:4px;padding-bottom:12px;border-bottom:1px solid #e0e6e2;}
.review-response-heading .view-note {font-size:.85rem;}
#reviewAttachments {display:grid;gap:12px;min-width:0;}
#reviewAttachments>.view-note {font-size:.9rem;color:#243d31;}
.review-pdf-card,.review-question-card,.review-order-card {display:block;padding:14px;border:1px solid #d8e2dc;border-radius:12px;background:#fafcfb;overflow-wrap:anywhere;line-height:1.5;}
.review-pdf-card>p,.review-question-card>p,.review-order-card>p {margin:8px 0!important;}
.review-question-card {background:#f0f6f2;border-color:#bfd3c5;}
.review-order-card {background:#f6f5f1;}
.review-seller-message {padding:12px;background:#f0f6f2;border-radius:8px;white-space:pre-wrap;}
#reviewAttachments .btn {display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;margin:6px 6px 0 0;border:1px solid #ccd9d1;border-radius:9px;background:#eef3ef;color:#183e2c;font:inherit;font-weight:650;cursor:pointer;}
#reviewAttachments .btn:focus-visible {outline:3px solid #ad8947;outline-offset:2px;}
#reviewAttachments .btn:disabled {opacity:.6;cursor:wait;}
.review-management {border-top:1px solid #e0e6e2;padding-top:12px;}
.review-management>summary {font-size:.85rem;cursor:pointer;color:#53675d;}
@media(max-width:599px){#reviewStatus {padding:12px;}#reviewAttachments .btn {display:flex;width:100%;box-sizing:border-box;margin-right:0;}}

.material-customer-display input{display:block;box-sizing:border-box;width:100%;min-height:44px;font:inherit;font-size:16px;padding:10px;margin:8px 0;border:1px solid #bdcdc4;border-radius:8px;background:white;color:inherit}.material-customer-display form{margin-top:14px}.material-customer-display form button{margin-top:4px}

.quote-action-help{margin:-6px 0 16px;border-bottom:1px solid var(--line)}
.quote-action-help summary{box-sizing:border-box;min-height:44px;padding:12px 0;color:var(--muted);font-size:.875rem;cursor:pointer}
.quote-action-help summary:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:4px}
.quote-action-help dl{margin:0 0 12px}.quote-action-help dl>div{padding:10px 0}.quote-action-help dt{font-weight:600;font-size:.875rem}.quote-action-help dd{margin:4px 0 0;color:var(--muted);font-size:.875rem;line-height:1.5;overflow-wrap:anywhere}
.quote-action-help [data-action-help][hidden]{display:none}

.agreement-row{border-bottom:1px solid var(--border,#deded8);padding-bottom:12px}.agreement-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 4px}.agreement-actions .btn{min-height:44px;font-size:14px}

.seller-request-preview{width:min(1200px,calc(100vw - 24px));height:calc(100dvh - 32px);max-width:none;max-height:none;padding:0;border:1px solid #d8e2dc;border-radius:16px;background:#f5f4f0;color:#182b23;overflow:hidden}.seller-request-preview::backdrop{background:rgb(12 30 23 / 55%)}.seller-request-preview[open]{display:flex;flex-direction:column}.seller-request-preview header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 20px;background:#fff}.seller-request-preview h2{font-size:18px;margin:0 0 6px}.seller-request-preview header p,.seller-preview-state{font-size:13px;line-height:1.5;margin:0}.seller-preview-state{padding:10px 20px}.seller-request-preview iframe{flex:1;min-height:0;width:100%;border:0;background:#f5f4f0}.seller-request-preview iframe[hidden]{display:none}@media(max-width:600px){.seller-request-preview{width:100vw;height:100dvh;margin:0;border-radius:0;border:0}.seller-request-preview header{padding:12px;gap:8px}.seller-preview-state{padding:8px 12px}.seller-request-preview header .btn{min-height:44px}}

.resume-actions{display:flex;flex-wrap:wrap;gap:8px}.resume-actions .btn{min-height:44px}

.quote-unread{display:inline-block;padding:4px 8px;margin:6px 0;background:#e5efe9;color:#164b36;border-radius:8px;font-size:13px;font-weight:700}.quote-unread[hidden]{display:none}.unread-reply-list{display:grid;gap:8px;margin-top:12px}.unread-reply-list button{text-align:left;display:grid;gap:4px;min-height:44px;padding:12px;background:#fff;border:1px solid #d5e0da;border-radius:10px;color:inherit}.unread-reply-list button span{font-size:13px}.offert-seller-dialog{width:min(900px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;border:1px solid #d8e2dc;border-radius:16px;background:#f5f4f0;color:#182b23}.offert-seller-dialog::backdrop{background:rgb(12 30 23 / 55%)}.offert-seller-dialog>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;position:sticky;top:0;background:#fff;z-index:1;padding:16px 20px}.offert-seller-dialog h2{font-size:20px;margin:0 0 6px}.offert-seller-dialog header p{font-size:14px;margin:0}.seller-inbox-body{padding:16px 20px}.seller-inbox-tabs{display:flex;flex-wrap:wrap;gap:8px}.seller-inbox-tabs [aria-pressed=true]{background:#1d4838;color:#fff}.seller-inbox-body [data-pdfs] .btn{margin:4px}.seller-inbox-body .sr-conversation{margin:16px 0}.seller-inbox-body .sr-context-text{white-space:pre-wrap}@media(max-width:600px){.offert-seller-dialog{width:100vw;max-height:100dvh;margin:0;border-radius:0}.seller-inbox-body{padding:12px}.offert-seller-dialog>header{padding:12px}}

/* Access flows remain reachable when a phone rotates or its keyboard reduces height. */
.gate-connect-open .gate-actions, .gate-connect-open .welcome-device { display: none; }
@media (max-width: 1000px) {
  .gate { overflow-y: auto; overscroll-behavior-y: contain; }
  .gate-main { height: auto; min-height: 100%; align-self: start; }
}
@media (min-width: 760px) and (max-width: 1000px) and (min-height: 481px) {
  .gate { padding: 2rem; }
  .gate-main { grid-template-columns: 1.1fr 1fr; gap: 2rem; }
  .welcome-access { padding: 1.5rem; }
}

.welcome-pilot { margin-top: .65rem; color: var(--ok); font-size: .78rem; font-weight: 500; }
.gate-login-open .welcome-pilot, .gate-connect-open .welcome-pilot { display: none; }


.contact-tabs { display: flex; gap: .25rem; padding: .3rem; margin: 1.25rem 0; border: 1px solid var(--line); border-radius: 12px; background: #eae9e4; }
.contact-tabs [role="tab"] { flex: 1; min-height: 44px; border: 0; border-radius: 8px; padding: .65rem 1rem; background: transparent; color: var(--muted); font-weight: 600; }
.contact-tabs [aria-selected="true"] { background: var(--card); color: var(--forest); box-shadow: 0 1px 5px #15212914; }
#contactsSellers > .field { margin-top: 1rem; }
#sellerDirectoryList:empty { display: none; }
.seller-contact-dialog { width: min(480px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; border: 1px solid var(--line); border-radius: 18px; padding: 1.5rem; background: var(--card); color: var(--ink); }
.seller-contact-dialog::backdrop { background: #16231e99; }
.seller-contact-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.seller-contact-dialog h2 { font-size: 1.25rem; }
.seller-contact-dialog .field input, .seller-contact-dialog textarea { width: 100%; min-width: 0; }
.seller-contact-dialog .stack-form { margin-top: 1rem; }
.seller-contact-dialog .contact-channel { overflow-wrap: anywhere; color: var(--ok); }

/* Compact contact controls and readable, touch-friendly channels. */
.contact-list-controls { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.contact-list-controls select, #sellerDirectorySort { width:100%; min-height:44px; }
.contact-quick { display:grid; gap:.65rem; margin:.75rem 0 1.25rem; padding:1rem; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.contact-quick-channel { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem .75rem; min-width:0; }
.contact-quick-value { overflow-wrap:anywhere; min-width:0; font-size:.95rem; }
.contact-quick-buttons { display:flex; flex-wrap:wrap; gap:.4rem; }
.contact-quick-buttons .btn { min-height:44px; padding:.5rem .75rem; font-size:.9rem; }
.contact-copy-state { margin:0; color:var(--ok); font-size:.85rem; }
.contact-copy-state:empty { display:none; }
@media(max-width:480px) { .contact-list-controls { grid-template-columns:1fr; } .contact-quick-channel { display:grid; } }
.seller-contact-dialog { margin:auto; inset:0; }

.material-order-state { display:grid; gap:.2rem; padding:.6rem .75rem; margin:.5rem 0; border-left:3px solid #95a49c; border-radius:6px; background:#eff1ee; color:#42594d; font-size:.85rem; overflow-wrap:anywhere; }
.order-state-sent { border-color:#2f6b4f; background:#eaf4ed; color:#23523a; }
.order-state-warning,.order-state-pending { border-color:#a87822; background:#fff3dc; color:#765019; }
.quote-order-status { margin:1rem 0; }
.quote-order-status .material-order-state { padding:1rem; font-size:.95rem; }
.quote-order-status p { margin:.2rem 0; }
.quote-order-status .btn { justify-self:start; margin-top:.4rem; }

.offer-card { grid-template-areas:"top" "customer" "response" "orders" "meta" "opening"; }
.offer-order-states { grid-area:orders; min-width:0; }
@media(min-width:760px) { .offer-card { grid-template-areas:"top meta" "customer meta" "response response" "orders orders" "opening opening"; } }