/* ajmalps.com - Toolbox. Shared by /toolbox/ and every tool page.
   Built on the neumorphic tokens already in style.css, so light and dark both work. */

/* ============ Toolbox landing ============ */
.tb-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;margin-top:38px;
}
.tb-card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--neu-surface);border-radius:20px;padding:26px 24px;
  box-shadow:var(--neu-out);color:inherit;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
a.tb-card:hover{box-shadow:var(--neu-hover);transform:translateY(-3px)}
.tb-card h3{font-size:19px;font-weight:600;letter-spacing:-.01em}
.tb-card p{font-size:14.5px;color:var(--muted);line-height:1.55}
.tb-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:10px}
.tb-tag{
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:var(--neu-surface);box-shadow:var(--neu-in);
  border-radius:20px;padding:5px 11px;
}
.tb-soon{opacity:.62}
.tb-soon .tb-tag{color:var(--faint)}

/* ============ Shared tool-page chrome ============ */
.tool-head{margin-bottom:8px}
.tool-note{
  font-size:13px;line-height:1.6;color:var(--muted);
  background:var(--neu-surface);box-shadow:var(--neu-in);
  border-radius:14px;padding:16px 18px;margin-top:22px;
}
.tool-note b{color:var(--ink)}
.tool-note.warn{color:#a1560f}
:root[data-theme="dark"] .tool-note.warn{color:#f0a760}

/* ============ Calculator ============ */
.calc{--c-ok:#2f855a;--c-bad:#c53030;--c-warn:#b7601a}
:root[data-theme="dark"] .calc{--c-ok:#4ade80;--c-bad:#f87171;--c-warn:#fbbf24}

.calc-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px;margin-top:34px;
}
.calc-card{
  background:var(--neu-surface);border-radius:20px;padding:26px 24px;
  box-shadow:var(--neu-out);display:flex;flex-direction:column;
}
.calc-card.full{grid-column:1/-1}
.calc-card h2{
  font-size:17px;font-weight:600;letter-spacing:-.01em;
  padding-bottom:13px;margin-bottom:18px;border-bottom:1px solid var(--hairline);
  display:flex;align-items:center;gap:11px;
}
.calc-card h2 .ic{
  width:34px;height:34px;flex:0 0 34px;border-radius:11px;
  background:var(--neu-surface);box-shadow:var(--neu-out-sm);
  display:flex;align-items:center;justify-content:center;
}
.calc-card h2 .ic svg{width:17px;height:17px;stroke:var(--blue);fill:none;stroke-width:1.9}

.f{margin-bottom:15px}
.f label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px 3px;line-height:1.4;
}
.f-in{position:relative}
.f-in input,.f-in select{
  width:100%;padding:11px 13px;border-radius:12px;
  background:var(--neu-surface);box-shadow:var(--neu-in);
  border:none;outline:none;color:var(--ink);
  font-family:inherit;font-weight:500;font-size:15px;
}
.f-in input:focus-visible,.f-in select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.f-in input[readonly]{opacity:.66;cursor:not-allowed}
.f-in .u{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  color:var(--faint);font-size:12px;font-weight:600;pointer-events:none;
}
.f-in select{appearance:none;cursor:pointer;padding-right:34px}
.f-in .caret{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;pointer-events:none;stroke:var(--muted);fill:none;stroke-width:2.4;
}
/* Printed twin of the control, written by preparePrint in crane-calc.js and
   shown only by the print stylesheet. It is left in the DOM after printing, so
   it has to stay hidden here or the value appears twice on screen. */
.f-in .pv{display:none}
.f-in input::-webkit-outer-spin-button,.f-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.f-in input[type=number]{-moz-appearance:textfield}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.f-hint{font-size:11.5px;color:var(--faint);margin:6px 0 0 3px;line-height:1.45}
.f-flag{font-size:11.5px;font-weight:600;color:var(--blue);margin:6px 0 0 3px;line-height:1.45}
.mini{
  width:100%;margin-top:7px;padding:7px;border-radius:10px;
  background:var(--neu-surface);box-shadow:var(--neu-out-sm);
  border:none;color:var(--blue);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;
}
.mini:active{box-shadow:var(--neu-in)}

.res{
  margin-top:auto;padding-top:17px;border-top:1px solid var(--hairline);
  display:flex;flex-direction:column;gap:11px;
}
.res-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.res-row .k{font-size:13.5px;color:var(--muted);line-height:1.4}
.res-row .v{
  background:var(--neu-surface);box-shadow:var(--neu-out-sm);border-radius:10px;
  padding:7px 13px;font-weight:600;min-width:98px;text-align:right;color:var(--blue);
  font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto;
}
.res-row .v.dim{color:var(--muted)}
.res-row .v.big{font-size:17px}
.v.ok{color:var(--c-ok)}
.v.bad{color:var(--c-bad)}
.v.warn{color:var(--c-warn)}

/* ============ Record strip (project / date / prepared by) ============ */
.rec{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:15px;background:var(--neu-surface);box-shadow:var(--neu-out);
  border-radius:18px;padding:22px 24px;margin-top:30px;
}

/* ============ Diagrams ============ */
.dg-wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.dg-t{
  font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:9px;padding-left:9px;border-left:3px solid var(--blue);line-height:1.4;
}
.dg-box{
  background:var(--neu-surface);border-radius:15px;box-shadow:var(--neu-out-sm);
  padding:11px;overflow:hidden;
}
.dg-box svg{width:100%;display:block}
.dg-box svg text{font-family:inherit}
/* theme-aware diagram palette */
.calc{
  --d-sky:#e8ebf2;--d-ground:#cbd5e0;--d-line:#94a3b8;--d-ink:#374151;
  --d-steel:#4a5568;--d-steel-d:#2d3748;--d-steel-l:#718096;--d-pale:#cbd5e0;
  --d-load:#f6ad55;--d-load-s:#c05621;--d-glass:#a8c5e0;--d-halo:#e8ebf2;
}
:root[data-theme="dark"] .calc{
  --d-sky:#161922;--d-ground:#23283340;--d-line:#4b5563;--d-ink:#cbd5e0;
  --d-steel:#6b7280;--d-steel-d:#9ca3af;--d-steel-l:#4b5563;--d-pale:#374151;
  --d-load:#d98a3d;--d-load-s:#f6ad55;--d-glass:#3b5878;--d-halo:#161922;
}
.d-sky{fill:var(--d-sky)}
.d-ground{fill:var(--d-ground)}
.d-line{stroke:var(--d-line)}
.d-ink{fill:var(--d-ink)}
.d-steel{fill:var(--d-steel)}
.d-steel-d{fill:var(--d-steel-d)}
.d-steel-l{fill:var(--d-steel-l)}
.d-pale{fill:var(--d-pale)}
.d-load{fill:var(--d-load);stroke:var(--d-load-s)}
.d-glass{fill:var(--d-glass)}
.d-rope{stroke:var(--d-steel-l)}
.d-dim{stroke:var(--d-steel-l);fill:var(--d-steel-l)}
.d-lbl{fill:var(--d-ink);paint-order:stroke;stroke:var(--d-halo);stroke-width:4px}
.d-lbl-a{fill:var(--blue);paint-order:stroke;stroke:var(--d-halo);stroke-width:4px}
/* pass/fail state inside the diagrams */
.calc svg text.ok{fill:var(--c-ok)}
.calc svg text.bad{fill:var(--c-bad)}
.calc svg text.warn{fill:var(--c-warn)}
.calc svg rect.ok{fill:var(--c-ok);stroke:var(--c-ok)}
.calc svg rect.bad{fill:var(--c-bad);stroke:var(--c-bad)}
.calc svg rect.warn{fill:var(--c-warn);stroke:var(--c-warn)}

@media(max-width:720px){
  .dg-wrap{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
  /* fixed 220px letterboxes the drawing once the box is narrow */
  .dg-box svg{height:auto !important}
}
/* Touch: 30px is too thin for a thumb, and this gets used with gloves on site.
   hover:none catches phones and tablets that are wider than the 720px query. */
@media(hover:none),(max-width:720px){
  .mini{padding:13px 10px;font-size:13px}
}

/* ============ Print ============
   One printed result, whatever the screen is doing. The sheet is a record of a
   check that gets filed, so it prints as a record: every control is replaced by
   its value (preparePrint in crane-calc.js writes the .pv spans) and every row
   is label left, value right, the same shape the results already use on screen.
   Dark mode must never reach paper: it wastes toner and the greys go muddy.
   Sized so it works on both A4 (210mm, the narrower) and Letter (279mm tall,
   the shorter), so the width is set by A4 and the height budget by Letter. */
.print-only{display:none}

@media print{
  /* No size, so the sheet follows whatever paper is loaded.
     14mm top and bottom, 13mm sides: clear of the unprintable edge every
     office printer keeps (~6.4mm), and it leaves the two card columns wide
     enough that "Crane weight, excl. counterweight" stays on one line. */
  @page{margin:14mm 13mm}

  /* --- force the light palette, overriding the dark theme --- */
  /* color-scheme has to be forced with it. Left on dark, Chrome paints the
     canvas - the whole sheet behind the page box - in its dark UA colour, so
     printing from dark mode came out framed in solid black on all four sides,
     whatever html and body were set to. */
  :root,:root[data-theme="dark"],:root[data-theme="light"]{
    color-scheme:light !important;
    --ink:#000;--muted:#333;--faint:#555;--hairline:#b9bec7;
    --bg:#fff;--bg-alt:#fff;--card:#fff;--link:#000;--blue:#134a8e;
    --neu-surface:#fff;
    --neu-out:none;--neu-out-sm:none;--neu-in:none;--neu-hover:none;
  }
  html,body{background:#fff !important;color:#000 !important}
  /* status colours dark enough to survive greyscale.
     Needs to out-specify `:root[data-theme="dark"] .calc`, hence the prefixes. */
  :root .calc,:root[data-theme="dark"] .calc,:root[data-theme="light"] .calc{
    --c-ok:#146c3a;--c-bad:#a31c1c;--c-warn:#8a5200;
    --d-sky:#fff;--d-ground:#e4e7ec;--d-line:#7c838f;--d-ink:#000;
    --d-steel:#4a5568;--d-steel-d:#2d3748;--d-steel-l:#6b7280;--d-pale:#d6dae1;
    --d-load:#f0b46a;--d-load-s:#8a4b12;--d-glass:#cbd9e8;--d-halo:#fff;
  }
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}

  /* --- strip the screen chrome --- */
  #nav,footer,.progress,.skip,.no-print,.crumbs,.mini,.f-hint,.caret{display:none !important}
  .print-only{display:block}
  main{padding-top:0 !important}
  /* style.css puts break-inside:avoid on every section, which would try to hold
     the whole tool on one sheet and spill into a blank page. */
  main>section{padding:0 !important;break-inside:auto !important}
  .wrap{max-width:none;padding:0}

  /* --- masthead: title left, what-this-is and where-it-came-from under it --- */
  h1{font-size:16pt !important;margin:0;letter-spacing:-.01em;line-height:1.1}
  /* the intro sells the tool on screen; on paper the title already says it */
  .eyebrow,.sub{display:none}
  .tool-head{margin:0}
  .print-sub{
    font-size:7.5pt !important;line-height:1.3 !important;color:#333;
    margin:1mm 0 3mm;padding-bottom:2mm;border-bottom:1.2pt solid #000;
    letter-spacing:.02em;break-after:avoid;
  }

  /* --- record strip stays with the title --- */
  .rec{
    /* not five equal columns: a real project name and a crane model are long
       and everything else is short, and equal columns wrapped "Al Wakrah
       Sewage Pumping Station" down five lines and dragged the strip with it */
    grid-template-columns:1.9fr 0.85fr 1.5fr 1.1fr 0.85fr;
    gap:0 4mm;padding:2.2mm 3mm;margin:0 0 3.5mm;
    border:0.7pt solid #99a0ab;border-radius:1.5mm;break-inside:avoid;break-after:avoid;
  }
  /* the record fields read better stacked than as label-and-value rows: five
     narrow columns leave no room for a value beside its own label */
  .rec .f{display:block;margin:0;border:0;padding:0}
  .rec .f label{margin-bottom:0.6mm}
  .rec .f-in{max-width:none;text-align:left}
  .rec .f-in .pv{font-size:8.5pt !important;min-height:4.6mm}
  .rec .f-in .pv.empty{width:100%;min-width:0}

  /* --- cards ---
     Two columns that flow, in the page order the screen uses, so a printed
     sheet can be read alongside the tool.
     The grid has to become a multi-column flow to print well. A grid row is as
     tall as its taller card, and these cards run 60-143mm, so on a grid the
     mismatch inside every row was dead column - about 170mm of it, which is
     what the old hand-tuned `order` list existed to claw back, at the cost of
     printing the cards out of the order the page shows them in. Worse, page one
     could only ever hold one row: a row and the header together overflow the
     sheet, so a third of page one was blank whatever the order. A column flow
     has no rows to couple heights, so the cards simply pack: three fit on page
     one, and the order stays the DOM's.
     Measured alternative, worse, do not retry: full-width stacked cards, six
     cards in series beats the column it saves. */
  .calc-grid{
    display:block;column-count:2;column-gap:4mm;column-fill:auto;margin:0;
  }
  /* Whole cards only. A card that splits leaves its results, or worse its
     safety note, orphaned on the next sheet away from the numbers they
     qualify. They now fit in a column, so this no longer costs a page. */
  .calc-card{
    border:0.7pt solid #99a0ab;border-radius:1.5mm;padding:2.5mm 3mm;
    break-inside:avoid;display:block;margin:0 0 4mm;
  }
  /* The diagrams run the full width under both columns, on a sheet of their
     own. Left to flow they straddled the page break, so half the drawings sat
     on one sheet and half on the next with the card's border hanging open
     between them. Whole, they are the drawing sheet you can put beside the
     numbers. Sized below to fill that sheet without tipping onto a fourth. */
  .calc-card.full{-webkit-column-span:all;column-span:all;margin-bottom:0;break-before:page}
  .f,.res,.res-row,.tool-note{break-inside:avoid}
  .calc-card h2{
    font-size:10pt !important;padding-bottom:1.5mm;margin:0 0 2mm;
    border-bottom:0.7pt solid #99a0ab;break-after:avoid;color:#000;
  }
  .calc-card h2 .ic{display:none}

  /* --- entered values: label left, value right, one line each ---
     The controls themselves are replaced by .pv spans. Printing the real
     inputs clipped anything wider than its box, printed the placeholder of a
     field nobody filled, and put the date picker's glyph on the paper. */
  .f{
    display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
    gap:0 3mm;margin:0 0 1.4mm;padding-bottom:1.2mm;
    border-bottom:0.4pt dotted #b9bec7;
  }
  .f label{
    flex:1 1 auto;font-size:6.8pt !important;margin:0;color:#333;
    text-transform:uppercase;letter-spacing:.04em;
  }
  /* margin-left:auto, not justify-content alone: a long label in a half-width
     pair ("Sling angle from horizontal") pushes the value onto its own line,
     where space-between has nothing to push it against and it fell back to the
     left, out of the value column */
  .f-in{flex:0 0 auto;max-width:56%;margin-left:auto;text-align:right}
  /* .pv-ready is set by preparePrint once the twins exist. Without the guard, a
     browser that never ran the script would print a sheet of labels with the
     controls hidden and nothing in their place. */
  .calc.pv-ready .f-in input,
  .calc.pv-ready .f-in select,
  .calc.pv-ready .f-in .u{display:none !important}
  .f-in .pv{
    display:block;font-size:9pt !important;line-height:1.25 !important;
    font-weight:600;color:#000;word-break:break-word;
  }
  /* an untouched field prints as a rule to be filled in by hand on site */
  .f-in .pv.empty{min-width:22mm;border-bottom:0.5pt solid #6b7280;height:3.2mm}
  .f-in .pv .pv-u{
    font-style:normal;font-weight:500;color:#444;
    font-size:7.5pt !important;margin-left:1mm;
  }
  /* the two-up fields keep their pairing, each half still a label/value row */
  .f2{gap:0 4mm;margin-bottom:0}
  .f-flag{
    flex:1 0 100%;font-size:6.8pt !important;color:#000;font-weight:600;
    margin:0.8mm 0 0;text-align:left;
  }

  /* --- calculated results: same row shape, boxed value, as on screen --- */
  .res{padding-top:2mm;margin-top:2mm;gap:1.4mm;border-top:0.7pt solid #99a0ab}
  .res-row{gap:3mm}
  .res-row .k{font-size:7.5pt !important;line-height:1.3 !important;color:#333}
  .res-row .v{
    border:0.5pt solid #b9bec7;border-radius:1mm;padding:0.6mm 1.8mm;
    font-size:8.5pt !important;min-width:0;
  }
  .res-row .v.big{font-size:10pt !important}

  /* --- notes: keep the warnings, they belong on a filed sheet --- */
  .tool-note{
    border:0.5pt solid #b9bec7;border-radius:1mm;padding:2mm 2.5mm;margin-top:2.5mm;
    font-size:6.8pt !important;line-height:1.35;break-inside:avoid;
  }
  .tool-note *{font-size:6.8pt !important;line-height:1.35 !important}
  /* the one at the top is the disclaimer that governs the whole sheet */
  .tool-note.warn{
    border:0.9pt solid #000;padding:2.5mm 3mm;margin:0 0 3.5mm;
    font-size:7.2pt !important;
  }
  .tool-note.warn *{font-size:7.2pt !important}
  /* same specificity trap as the diagram vars: :root[data-theme="dark"]
     .tool-note.warn out-ranks a bare .tool-note.warn, so printing from dark
     mode left this note orange while its bold runs went black */
  :root .tool-note.warn,:root[data-theme="dark"] .tool-note.warn,
  :root[data-theme="light"] .tool-note.warn{color:#000}

  /* --- diagrams: let the card flow, keep each drawing whole ---
     The drawings are the part of the screen the paper should keep, so they get
     the room the compact cards freed up. These heights are what keeps the sheet
     to two pages on BOTH papers: Letter's printable height is 251mm against
     A4's 269mm, and the closing note and the sign-off strip below need 30mm in
     one piece. Re-measure the page count on both before growing them. */
  .calc-card.full{break-inside:auto}
  .dg-wrap{grid-template-columns:1fr 1fr;gap:4mm}
  .dg-wrap>div{break-inside:avoid}
  .dg-t{font-size:6.8pt !important;margin-bottom:1.5mm;border-left-color:#134a8e}
  .dg-box{border:0.5pt solid #b9bec7;border-radius:1mm;padding:2mm}
  /* fixed height and centred, so the drawings line up instead of each one
     being sized by its own aspect ratio */
  /* Sized to the sheet, not to taste. The drawing sheet carries two rows of
     small drawings, the overview, the closing note and the sign-off strip, and
     it has to hold all of it on Letter, whose printable height is 251mm against
     A4's 269mm. Budget: 2*small + overview <= 145mm. At 42 and 68 the total
     came to about 1mm over and the sign-off tipped onto a fourth sheet that was
     otherwise blank. Re-measure the page count on BOTH papers before growing
     these again. */
  .dg-box svg{height:40mm !important;width:auto;max-width:100%;margin:0 auto}
  /* The lift overview spans both columns. Sized by height like the others it
     is 96mm of drawing adrift in a 184mm box, so it gets its own height and
     the block is shrunk to the drawing rather than the drawing lost in the box.
     Its title rides with it, not out at the card's left edge. */
  .dg-wrap>div:last-child{width:fit-content;max-width:100%;margin:0 auto}
  .dg-wrap>div:last-child .dg-box svg{height:64mm !important}

  /* sign-off strip. Needs !important: style.css sets p{font-size:9.5pt !important},
     which an inline style cannot beat. */
  .print-only{
    font-size:6.8pt !important;line-height:1.5 !important;
    margin:2.5mm 0 0;padding-top:2mm;border-top:0.9pt solid #000;break-inside:avoid;
  }
  /* ...except the masthead line, which is a .print-only too */
  .print-sub{border-top:0;padding-top:0}

  /* --- last element must not push a blank page --- */
  main>section>.wrap>*:last-child{margin-bottom:0 !important;break-after:avoid}
}