/* The JAS header. One component, used by the app and the Sales Walk so they look like one product. */
.jas-header { position: sticky; top: 0; z-index: 30; background: var(--jas-navy); border-bottom: 3px solid var(--jas-bright); color: #fff; font-family: var(--jas-font); }
.jas-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 80rem; margin: 0 auto; padding: 10px 16px; }
.jas-header__brand { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; min-width: 0; }
/* JAPP logo (Jeff, Nov 5): the white version (J, P, P white, A green) on a clear background, straight on the dark header. */
.jas-header__brand img { height: 36px; width: auto; display: block; }
.jas-header__label { font-size: 11px; font-weight: 700; letter-spacing: 2px; line-height: 1.5; color: #d6ded7; border-left: 1px solid #667168; padding-left: 14px; text-transform: uppercase; }
.jas-header__nav { display: flex; gap: 4px; font-size: 14px; font-weight: 600; }
.jas-header__nav a { color: #d6ded7; text-decoration: none; padding: 7px 10px; border-radius: 8px; }
.jas-header__nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.jas-header__nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.14); }
.jas-header__user { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #d6ded7; }
.jas-header__user .who { display: inline-flex; } /* the name is the My Stuff button, on phones too (Jeff, Nov 7) */
.jas-header__user a, .jas-header__user button { color: #fff; background: rgba(255,255,255,.1); border: 0; border-radius: 8px; padding: 7px 12px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.jas-header__user a:hover, .jas-header__user button:hover { background: rgba(255,255,255,.2); }
.jas-header form { margin: 0; }
.jas-header__user .jas-header__lang--round { width: 36px; height: 36px; padding: 0; border-radius: 9999px; font-size: 13px; font-weight: 700; letter-spacing: .02em; display: grid; place-items: center; }
@media (min-width: 768px) { .jas-header__brand img { height: 42px; } }
@media (max-width: 380px) { .jas-header__brand img { height: 28px; } .jas-header__label { display: none; } }
.jas-header--static { position: relative; }

/* Bottom ribbon (phones): navy bar with bright-green top edge, icon over label, lit pill on the current area. */
.jas-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--jas-navy); border-top: 3px solid var(--jas-bright); box-shadow: 0 -4px 14px rgba(0,0,0,.18); font-family: var(--jas-font); }
.jas-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; padding: 6px 2px; border-radius: 12px; color: #c4cec6; font-size: 12px; font-weight: 700; line-height: 1.1; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.jas-tabbar a:active { background: rgba(255,255,255,.12); }
.jas-tabbar a[aria-current="page"] { color: #fff; background: var(--jas-green); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.jas-tabbar__icon { width: 24px; height: 24px; }
@media (min-width: 768px) { .jas-tabbar { display: none; } }

/* Back bar: one big, obvious way out of any detail, edit or form page. */
.jas-backbar { display: flex; align-items: center; margin: -4px 0 14px; }
.jas-backbar a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 10px; border-radius: 999px; background: #fff; border: 1px solid var(--jas-line); color: var(--jas-green-dark); font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.jas-backbar a:hover, .jas-backbar a:active { background: var(--jas-green-pale); border-color: var(--jas-green); }
.jas-backbar svg { width: 20px; height: 20px; }
.jas-backbar--walk { margin: 0; padding: 8px 12px; background: var(--jas-green-pale); border-bottom: 1px solid var(--jas-line); }

/* Search-as-you-type dropdown (typeahead_controller.js) */
.typeahead-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; margin: 0; padding: 4px; list-style: none; max-height: 70vh; overflow-y: auto; background: #fff; color: #0f172a; border: 1px solid #cbd5e1; border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,.18); font-size: 15px; text-align: left; }
.typeahead-list[hidden] { display: none; }
.typeahead-clear { position: absolute; right: 8px; transform: translateY(-50%); z-index: 2; width: 28px; height: 28px; border: 0; border-radius: 9999px; background: #e2e8f0; color: #334155; font-size: 20px; line-height: 1; display: grid; place-items: center; padding: 0; cursor: pointer; }
.typeahead-clear[hidden] { display: none; }
.jas-switcher .typeahead-clear { background: rgba(255,255,255,.2); color: #fff; }
input[data-typeahead-target]::-webkit-search-cancel-button, input[data-controller~="typeahead"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.typeahead-head { padding: 6px 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.typeahead-empty { padding: 10px; color: #64748b; font-size: 14px; }
.typeahead-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; min-height: 44px; }
.typeahead-item:hover, .typeahead-item.is-active { background: #f1f5f9; }
.typeahead-badge { flex: none; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 800; }
.typeahead-opp { background: #e0f2fe; color: #075985; }
.typeahead-job { background: #fef3c7; color: #92400e; }
.typeahead-contact { background: #e2e8f0; color: #334155; }
.typeahead-text { display: flex; flex-direction: column; min-width: 0; }
.typeahead-main { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.typeahead-sub { font-size: 13px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jas-switcher { display: none; position: relative; }
.jas-switcher input { width: 15rem; border: 0; border-radius: 8px; padding: 7px 12px; font: inherit; font-size: 14px; background: rgba(255,255,255,.14); color: #fff; }
.jas-switcher input::placeholder { color: #c4cec6; }
.jas-switcher input:focus { outline: 2px solid var(--jas-bright); background: rgba(255,255,255,.22); }
.jas-switcher .typeahead-list { left: auto; width: 24rem; }
@media (min-width: 1024px) { .jas-switcher { display: block; } }
.jas-switcher--corner { display: none !important; } /* the phone/small-window copy of the search box; only the look files show it */

/* Red number on Comms (header link and bottom bar) */
.jas-badge { display: inline-block; min-width: 18px; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; vertical-align: middle; }
.jas-tabbar a { position: relative; }
.jas-tabbar .jas-badge { position: absolute; top: 2px; left: calc(50% + 4px); margin: 0; }

/* Phone bar: five round icon buttons, the microphone (Daily log) bigger in the middle. */
.jas-tabbar--round { display: flex; align-items: center; justify-content: space-around; padding-top: 8px; }
.jas-tabbar--round a { flex: 0 0 auto; width: 52px; min-height: 52px; height: 52px; padding: 0; border-radius: 9999px; background: rgba(255,255,255,.08); }
.jas-tabbar--round .jas-tabbar__mic { width: 66px; height: 66px; margin-top: -22px; background: var(--jas-green); color: #fff; border: 3px solid var(--jas-navy); box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.jas-tabbar--round .jas-tabbar__mic .jas-tabbar__icon { width: 30px; height: 30px; }
.jas-tabbar--round a[aria-current="page"] { background: var(--jas-green); }

/* Help chat button: a round chat bubble floating above the phone bar (bottom right) on every staff page. */

/* Top bar: on a computer the tabs, search and user buttons sit in the one header row. On a phone the logo has its own row
   and every button (tabs, Help, language, Sign out) shares ONE scrolling row under it (Jeff, Nov 1). */
.jas-header__bar { display: contents; }
@media (max-width: 767px) {
  .jas-header__inner { flex-wrap: wrap; row-gap: 6px; padding-bottom: 8px; }
  .jas-header__bar { display: flex; align-items: center; gap: 4px; flex: 1 1 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .jas-header__bar::-webkit-scrollbar { display: none; }
  .jas-header__nav, .jas-header__user { flex: 0 0 auto; width: auto; margin: 0; gap: 4px; }
  .jas-header__nav a, .jas-header__user a, .jas-header__user button { white-space: nowrap; font-size: 14px; padding: 7px 10px; }
}
/* The row of pages under the active tab. */
.jas-subnav { background: #fff; border-bottom: 1px solid #e2e8f0; font-family: var(--jas-font); }
.jas-subnav__inner { display: flex; gap: 2px; max-width: 80rem; margin: 0 auto; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.jas-subnav__inner::-webkit-scrollbar { display: none; }
.jas-subnav a { white-space: nowrap; padding: 10px 12px; font-size: 14px; font-weight: 600; color: #64748b; text-decoration: none; border-bottom: 3px solid transparent; }
.jas-subnav a:hover { color: #0f172a; }
.jas-subnav a[aria-current="page"] { color: var(--jas-navy); border-bottom-color: var(--jas-bright); }

/* Column headings that stay put under the top bar while a long table scrolls (the table sets --sticky-top). */
.sticky-under-header th { position: sticky; top: var(--sticky-top, 0); z-index: 5; background: #fff; box-shadow: 0 2px 0 #cbd5e1; }

/* Shared data table (Jeff, Nov 7: every table should feel like all the others). One class, `jas-table`, gives compact rows, a quiet
   header and light row lines. Number cells carry `jas-num` (right aligned, digits line up). Group rows, subtotals and the grand total have
   their own row classes. Colors read the slate scale, so the test-site looks recolor them with everything else. */
.jas-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.3; }
@media (min-width: 640px) { .jas-table { font-size: 14px; } }
.jas-table th { padding: 6px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  color: var(--color-slate-500, #64748b); background: var(--color-slate-50, #f8fafc); border-bottom: 2px solid var(--color-slate-300, #cbd5e1); }
.jas-table td { padding: 6px 8px; vertical-align: middle; border-bottom: 1px solid var(--color-slate-100, #f1f5f9); }
.jas-table tbody tr:hover > td { background: var(--color-slate-50, #f8fafc); }
.jas-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jas-table th:not(.jas-num):not([class*="text-right"]):not([class*="text-center"]) { text-align: left; }
.jas-table th.jas-num { text-align: right; }
.jas-table .jas-group > td, .jas-table .jas-group > th { background: var(--color-slate-100, #f1f5f9); color: var(--color-slate-900, #0f172a); font-weight: 700; border-top: 1px solid var(--color-slate-300, #cbd5e1); letter-spacing: 0; text-transform: none; font-size: inherit; }
.jas-table .jas-subtotal > td { font-weight: 600; background: var(--color-slate-50, #f8fafc); border-top: 1px solid var(--color-slate-300, #cbd5e1); }
.jas-table tfoot td, .jas-table .jas-grand > td { font-weight: 800; border-top: 2px solid var(--color-slate-900, #0f172a); border-bottom: 0; background: #fff; }
.jas-table .jas-sub { display: block; font-size: 12px; color: var(--color-slate-500, #64748b); font-weight: 400; }
/* Number boxes in the editable grids (price lines, budget, bids): right aligned, digits line up. */
.li-editor [data-line-field="qty"], .li-editor [data-line-field="cost"], .li-editor [data-line-field="margin"], .li-editor [data-line-field="uprice"],
.li-editor [data-line-field="total"], .li-editor [data-line-field="ptotal"], [data-field="qty"], [data-field="cost"], [data-field="margin"], [data-field="uprice"],
[data-field="unitcost"], [data-field="unit_cost"], [data-field="price"], .jas-num-input { text-align: right; font-variant-numeric: tabular-nums; }

/* Language switch: a small flag slider in the top right corner, outside the menu row (Jeff, Nov 2). */
.jas-corner { display: flex; align-items: center; gap: 10px; margin: 0 0 0 auto; flex: 0 0 auto; }
.jas-help-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9999px; color: #fff; background: rgba(255,255,255,.12); text-decoration: none; }
.jas-help-icon:hover { background: rgba(255,255,255,.24); }
.jas-lang { display: flex; align-items: center; gap: 6px; margin: 0; flex: 0 0 auto; }
.jas-lang__track { position: relative; display: block; width: 52px; height: 28px; padding: 0; border: 0; border-radius: 9999px; overflow: hidden; cursor: pointer; background: #fff; box-shadow: inset 0 1px 3px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.35); }
.jas-lang__flag { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .2s; }
.jas-lang__flag--es { opacity: 0; }
.jas-lang__track.is-es .jas-lang__flag--es { opacity: 1; }
.jas-lang__track.is-es .jas-lang__flag--en { opacity: 0; }
.jas-lang__knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 9999px; background: #f4f4f5; box-shadow: 0 1px 3px rgba(0,0,0,.5); transition: transform .2s; }
.jas-lang__track.is-es .jas-lang__knob { transform: translateX(24px); }
.jas-lang__label { font-size: 12px; font-weight: 700; color: #d6ded7; letter-spacing: .04em; }
@media (max-width: 767px) { .jas-corner { order: 1; } .jas-header__bar { order: 2; } }

/* Page frame: the three page widths. Every page picks one with content_for :page_width (form, standard, wide). */
.page-frame { margin-left: auto; margin-right: auto; width: 100%; }
.page-frame--form { max-width: 36rem; }      /* create and edit forms, one task per page */
.page-frame--standard { max-width: 64rem; }  /* job pages, detail pages, lists of cards */
.page-frame--wide { max-width: 80rem; }      /* tables, boards, dashboards */

/* Line-item editor, compact rows (Jeff, Nov 5). One line: name, qty, unit, cost, total; the description sits under it, two lines tall.
   Whether a row fits on one line depends on the room the editor has, not the screen, so these are container queries.
   On a phone: name, then the numbers in a wrapping grid (each with a small label), then the description. */
.li-editor { container: li / inline-size; }
.li-handle { width: 1.25rem; flex: none; }
.li-remove { width: 2rem; }
.li-remove-space { width: 2rem; flex: none; }
.li-head { display: none; }
.li-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); gap: .375rem; }
.li-label { display: block; margin-bottom: .125rem; font-size: .7rem; color: #64748b; }
.li-budget { width: 100%; }
.li-line textarea { line-height: 1.3; }
.li-aiwrap { display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; }
.li-aiwrap > input, .li-aiwrap > textarea { width: 100%; }
@container li (min-width: 48rem) {
  .li-aiwrap { flex-direction: row; align-items: flex-start; }
  .li-aiwrap--center { align-items: center; }
  .li-aiwrap > input, .li-aiwrap > textarea { flex: 1 1 0; width: auto; }
  .li-main:not([data-price]) { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: .375rem; }
  .li-main:not([data-price]) > .li-name { flex: 1 1 10rem; }
  .li-main:not([data-price]) > .li-nums { display: flex; flex: none; gap: .375rem; }
  .li-main:not([data-price]) > .li-nums > * { flex: none; }
  .li-main:not([data-price]) > .li-desc { flex: 1 1 100%; }
  .li-main:not([data-price]) .li-label { display: none; }
  .li-head:not([data-price]) { display: flex; gap: .25rem; padding: .25rem calc(1rem + 1px) 0; font-size: .7rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .02em; }
  .li-head:not([data-price]) > .li-main { display: flex; flex: 1 1 0; min-width: 0; align-items: center; column-gap: .375rem; }
  .li-head:not([data-price]) > .li-main > .li-name { flex: 1 1 10rem; padding-left: .5rem; }
  .li-head:not([data-price]) > .li-main > .li-nums { display: flex; flex: none; gap: .375rem; }
  .li-head:not([data-price]) .li-nums > * { flex: none; padding-left: .5rem; }
  .li-main:not([data-price]) .li-code { width: 7rem; } .li-main:not([data-price]) .li-qty { width: 5rem; } .li-main:not([data-price]) .li-unit { width: 6rem; }
  .li-main:not([data-price]) .li-cost { width: 7rem; } .li-main:not([data-price]) .li-total { width: 7rem; }
  .li-head:not([data-price]) .li-code { width: 7rem; } .li-head:not([data-price]) .li-qty { width: 5rem; } .li-head:not([data-price]) .li-unit { width: 6rem; }
  .li-head:not([data-price]) .li-cost { width: 7rem; } .li-head:not([data-price]) .li-total { width: 7rem; }
  .li-main:not([data-price]) .li-budget { width: 16rem; }
}
@container li (min-width: 72rem) {
  .li-main[data-price] { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: .375rem; }
  .li-main[data-price] > .li-name { flex: 1 1 10rem; }
  .li-main[data-price] > .li-nums { display: flex; flex: none; gap: .375rem; }
  .li-main[data-price] > .li-nums > * { flex: none; }
  .li-main[data-price] > .li-desc { flex: 1 1 100%; }
  .li-main[data-price] .li-label { display: none; }
  .li-head[data-price] { display: flex; gap: .25rem; padding: .25rem calc(1rem + 1px) 0; font-size: .7rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .02em; }
  .li-head[data-price] > .li-main { display: flex; flex: 1 1 0; min-width: 0; align-items: center; column-gap: .375rem; }
  .li-head[data-price] > .li-main > .li-name { flex: 1 1 10rem; padding-left: .5rem; }
  .li-head[data-price] > .li-main > .li-nums { display: flex; flex: none; gap: .375rem; }
  .li-head[data-price] .li-nums > * { flex: none; padding-left: .5rem; }
  .li-main[data-price] .li-code, .li-head[data-price] .li-code { width: 7rem; } .li-main[data-price] .li-qty, .li-head[data-price] .li-qty { width: 5rem; }
  .li-main[data-price] .li-unit, .li-head[data-price] .li-unit { width: 6rem; } .li-main[data-price] .li-cost, .li-head[data-price] .li-cost { width: 7rem; }
  .li-main[data-price] .li-uprice, .li-head[data-price] .li-uprice { width: 7rem; } .li-main[data-price] .li-margin, .li-head[data-price] .li-margin { width: 4.5rem; }
  .li-main[data-price] .li-total, .li-head[data-price] .li-total { width: 7rem; } .li-main[data-price] .li-budget { width: 16rem; }
}

/* Home page search on a phone: sits to the right of "Hi, Jeff"; its list opens full width under the row. */
.home-search { border: 2px solid #2f7d3b; border-radius: 12px; padding: 12px 16px; font: inherit; font-size: 17px; background: #fff; color: #0f172a; box-shadow: 0 3px 10px rgba(15, 23, 42, .22); }
.home-search::placeholder { color: #64748b; }
.home-search:focus { outline: 3px solid var(--jas-bright); outline-offset: 0; border-color: #2f7d3b; box-shadow: 0 4px 14px rgba(15, 23, 42, .3); }

/* Tablet widths without the metal look (Sales Walk, and the real site): the logo squeezed to 0 px wide and painted over the tabs, and the
   page grew to 806 px at 768 (QA site-06). The brand keeps its size; the tabs scroll sideways inside their own row instead. */
.jas-header__brand { flex: 0 0 auto; }
.jas-header__brand img { flex: none; width: auto; max-width: none; }
.jas-header__nav { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.jas-header__nav::-webkit-scrollbar { display: none; }
.jas-header__nav a { white-space: nowrap; flex: none; }

/* The round bottom bar is a phone bar (Jeff, Nov 8: on a computer it repeats the top bar and takes up room). The logo is the Home button there.
   Higher specificity than the .jas-tabbar--round rule above, which used to override the "hide at 768px and wider" rule by accident (Oct 26). */
@media (min-width: 768px) { .jas-tabbar.jas-tabbar--round { display: none; } }

/* Plan / PDF viewer (Jeff, Nov 9). The plans scroll inside their own box so its scrollbars and zoom buttons never leave the screen.
   pan-x pan-y: the phone moves the plans with one finger by itself (with its natural glide); two-finger pinch is left to our code,
   so the browser does not zoom the whole page instead. The script sets the exact height of the "fill" box to the rest of the screen. */
.pdfv { position: relative; height: 70vh; min-height: 320px; border-radius: 12px; background: #cbd5e1; overflow: hidden; }
.pdfv--fill { height: calc(100dvh - 22rem); min-height: 300px; }
.pdfv__scroll { position: relative; width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; cursor: grab; outline: none; }
.pdfv__scroll.is-dragging { cursor: grabbing; }
.pdfv__pages { position: relative; margin: 0 auto; padding: 4px 4px 72px; display: flex; flex-direction: column; gap: 8px; width: 100%; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pdfv__pages > div { width: 100%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12); flex: none; }
.pdfv__pages canvas { display: block; width: 100%; height: 100%; }
/* The zoom buttons float over the plans: bottom right on a phone (where the thumb is), top right on a computer. */
.pdfv__tools { position: absolute; right: 10px; bottom: 10px; z-index: 5; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 9999px; background: rgba(36,40,38,.88); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.3); font-family: var(--jas-font); }
.pdfv__btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9999px; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 24px; font-weight: 700; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pdfv__btn:hover, .pdfv__btn:active { background: var(--jas-green); }
.pdfv__pct { min-width: 3.2em; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pdfv__page { padding: 0 6px 0 8px; font-size: 13px; font-weight: 600; color: #d6ded7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdfv__page:empty { display: none; }
.pdfv__hint { margin-top: 6px; font-size: 12px; color: #64748b; }
@media (min-width: 768px) { .pdfv__tools { top: 10px; bottom: auto; } .pdfv__pages { padding-bottom: 4px; } }
.pdfv--tools-top .pdfv__tools { top: 10px; bottom: auto; }

/* Takeoff: a plan sheet with coloured marks over it (app/views/takeoffs/show, takeoff_controller.js). */
.tko__body { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: 8px; }
@media (max-width: 800px) { .tko__body { grid-template-columns: minmax(0, 1fr); } }
.tko__panel { background: #fff; border-radius: 12px; padding: 10px; overflow: auto; max-height: calc(100dvh - 15rem); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.tko__stage { position: relative; height: calc(100dvh - 15rem); min-height: 360px; background: #94a3b8; border-radius: 12px; overflow: hidden; touch-action: none; outline: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.tko__stage.is-drawing { cursor: crosshair; }
.tko__stage.is-panning { cursor: grabbing; }
.tko__sheet { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #fff; box-shadow: 0 2px 10px rgb(0 0 0 / .3); }
.tko__sheet canvas { display: block; width: 100%; height: 100%; }
.tko__marks { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tko__sharp { position: absolute; left: 0; top: 0; pointer-events: none; }
.tko__stagewrap { position: relative; min-width: 0; }
.tko__version { margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 16px; font-weight: 800; letter-spacing: .02em; }
.tko__version span { font-size: 13px; font-weight: 500; letter-spacing: 0; margin-left: 6px; }
.tko__version--current { background: #d1fae5; color: #065f46; border: 2px solid #10b981; }
.tko__version--old, .tko__version--other { background: #fef3c7; color: #92400e; border: 2px solid #f59e0b; }
/* Full screen: the takeoff covers the whole window (app bars included); the tools stay at the top. */
.tko--full { position: fixed; inset: 0; z-index: 1000; margin: 0 !important; padding: 8px; background: #f1f5f9; overflow: auto; }
.tko--full .tko__version { padding: 4px 12px; font-size: 13px; }
.tko--full .tko__hint { display: none; }
body.tko-full-on { overflow: hidden; }
.tko__dims { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; padding: 6px; border-radius: 8px; background: #f1f5f9; font-size: 12px; color: #334155; }
.tko__dims label { display: flex; flex-direction: column; gap: 2px; }
.tko__dims input { width: 4.2rem; min-height: 2.25rem; border: 1px solid #94a3b8; border-radius: 6px; padding: 0 6px; font-size: 15px; background: #fff; }
.tko__extra { grid-column: 2 / -1; font-size: 12.5px; color: #0f766e; font-weight: 600; font-variant-numeric: tabular-nums; padding-left: 6px; }
.tko__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.tko__bar > * { flex: none; }
.tko__pager { position: absolute; z-index: 4; left: 8px; bottom: 8px; max-width: calc(100% - 16px); display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: rgb(255 255 255 / .95); box-shadow: 0 1px 6px rgb(0 0 0 / .3); }
.tko__pager .tko__select { min-width: 0; max-width: 15rem; flex: 1 1 auto; }
.tko__pageno { padding: 0 6px; font-size: 13px; font-weight: 600; color: #334155; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Phone: the tools are one row that slides sideways, the sheet comes first and the item list sits under it. */
@media (max-width: 800px) {
  .tko__bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tko__stagewrap { order: 1; }
  .tko__panel { order: 2; max-height: none; }
  .tko__legend { font-size: 11px; max-width: 55%; }
}
.tko__scaleform { position: absolute; z-index: 5; top: 8px; left: 8px; right: 8px; max-width: 34rem; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 12px; border-radius: 12px; border: 2px solid #c026d3; background: #fdf4ff; font-size: 14px; box-shadow: 0 4px 14px rgb(0 0 0 / .25); }
.tko__scaleform[hidden] { display: none; }
.tko__tool:disabled { opacity: .45; cursor: default; }
.tko__over { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.tko__legend { position: absolute; top: 8px; right: 8px; max-width: 60%; max-height: 70%; overflow: auto; background: rgb(255 255 255 / .94); border: 1px solid #cbd5e1; border-radius: 10px; padding: 6px 10px; font-size: 13px; line-height: 1.5; box-shadow: 0 1px 4px rgb(0 0 0 / .15); pointer-events: none; }
.tko__legend:empty { display: none; }
.tko__legend div { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tko__legend b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.tko__swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex: none; border: 1px solid rgb(0 0 0 / .25); }
.tko__tip { position: absolute; z-index: 3; padding: 2px 8px; border-radius: 6px; background: #0f172a; color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; }
.tko__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; color: #0f172a; font-size: 14px; }
.tko__tool, .tko__nav { min-height: 2.75rem; padding: 0 12px; border-radius: 10px; border: 1px solid #cbd5e1; background: #fff; font-size: 14px; font-weight: 600; color: #0f172a; }
.tko__nav { font-size: 20px; padding: 0 14px; }
.tko__tool:hover, .tko__nav:hover { background: #f1f5f9; }
.tko__tool.is-on { background: #e0f2fe; border-color: #0284c7; }
.tko__tool.is-active { background: #0f172a; border-color: #0f172a; color: #fff; }
.tko__select, .tko__input { min-height: 2.75rem; border: 1px solid #cbd5e1; border-radius: 10px; padding: 0 10px; font-size: 16px; background: #fff; }
.tko__select { max-width: 18rem; }
.tko__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 6px; border-radius: 10px; border: 2px solid transparent; background: #f8fafc; cursor: pointer; }
.tko__row.is-active { border-color: #0f172a; background: #fff; }
.tko__row.is-hidden { opacity: .55; }
.tko__row input[type=color] { width: 28px; height: 28px; padding: 0; border: 1px solid #94a3b8; border-radius: 6px; background: none; }
.tko__row input[type=text] { width: 100%; min-height: 2.25rem; border: 1px solid transparent; border-radius: 6px; padding: 0 6px; font-size: 15px; font-weight: 600; background: transparent; }
.tko__row input[type=text]:hover, .tko__row input[type=text]:focus { border-color: #94a3b8; background: #fff; }
.tko__row .tko__qty { grid-column: 2; font-size: 13px; color: #334155; font-variant-numeric: tabular-nums; padding-left: 6px; }
.tko__row .tko__acts { grid-column: 3; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(2, auto); gap: 0; }
.tko__icon { min-width: 2.25rem; min-height: 2.25rem; border-radius: 8px; border: 0; background: transparent; font-size: 16px; }
.tko__icon:hover { background: #e2e8f0; }
.tko__icon.is-sure { background: #dc2626; color: #fff; font-size: 12px; font-weight: 700; padding: 0 6px; }

/* Employee handbook (My Stuff > Handbook, Jeff Nov 13): a jump lands below the sticky top bar, a round "Contents" button stays in
   reach (above the phone's bottom bar), search hits are yellow. */
.handbook .hb-anchor { scroll-margin-top: calc(var(--sticky-top, 120px) + 12px); } /* --sticky-top = the top bar's height (sticky-offset controller) */
.handbook mark.hb-hit { background: #fde68a; color: inherit; border-radius: 2px; padding: 0 1px; }
.hb-to-contents { position: fixed; right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 35; padding: 10px 14px; border-radius: 9999px; background: var(--jas-green, #247f31); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
@media (min-width: 768px) { .hb-to-contents { bottom: 24px; } }
@media print { .hb-to-contents { display: none; } }