/* koira.ai/templates: the document generators (components/templates/DocEngine.tsx).
   Built on tools.css; only what the documents add is here. Same colours, radii and type. */
/* Line items: the description gets its own full-width row; quantity, unit, price and remove sit under it. */
.tp-li .tl-lih{display:none}
.tp-li .tp-lir{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1.2fr) 40px;padding-bottom:10px;border-bottom:1px solid rgba(16,16,18,.08)}
.tp-li .tp-lir.tp-np{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px}
.tp-li .tp-lir>.tl-num:first-child{grid-column:1/-1}
.tp-li .tp-lir .tl-q{display:inline}
.tp-u{height:46px}
.tp-u select{font-size:14.5px;padding:0 30px 0 10px}
.tp-u svg{right:10px}
.tp-hint{font-size:13.5px;color:var(--dim);line-height:1.4;margin-top:-10px}
.tp-opt{display:flex;flex-direction:column;gap:14px}
.tp-hide{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tp-logo-in{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tp-logo-in img{display:block;max-height:48px;width:auto;max-width:160px;border-radius:8px;box-shadow:0 0 0 1px rgba(16,16,18,.08)}
.tp-file{display:inline-flex;align-items:center}
.tp-rows{display:flex;flex-direction:column;gap:10px}
.tp-row{border-radius:18px;box-shadow:inset 0 0 0 1px rgba(16,16,18,.1);padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.tp-rh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tp-rh b{font-weight:600;font-size:14.5px}
.tp-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.tp-cell.tp-wide{grid-column:1/-1}
.tp-cell label,.tp-cell .tl-lb{font-size:13.5px}
.tp-cell .tl-num,.tp-cell .tl-sel{height:44px}
.tp-cell .tl-num input{font-size:15.5px}
.tp-calc{height:44px;display:flex;align-items:center;padding:0 12px;border-radius:12px;background:var(--off);font-weight:600;font-size:15.5px;overflow-wrap:anywhere}
/* The document */
.tp-logo{display:block;max-height:64px;width:auto;max-width:220px;margin-bottom:10px}
.tp-facts{margin:8px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 24px}
.tp-facts div{min-width:0}
.tp-facts dt{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.tp-facts dd{margin:2px 0 0;font-size:15px}
.tp-tbl+.tp-tbl{margin-top:8px}
.tp-cap{font-family:var(--oh);font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:22px}
.tp-tbl .tl-tw{margin-top:12px}
.tl-doc table.tp-t th,.tl-doc table.tp-t td{text-align:left;white-space:normal}
.tl-doc table.tp-t .tp-r{text-align:right;white-space:nowrap}
.tl-doc table.tp-t tfoot td{border-top:1px solid rgba(16,16,18,.14)}
.tl-doc table.tp-wide{font-size:14px}
.tl-doc table.tp-wide th,.tl-doc table.tp-wide td{padding:10px 10px}
.tp-legal{margin-top:22px;font-size:13px;color:var(--dim)}
/* Hubs */
.tp-sub{margin-top:12px;max-width:680px}
.tp-tlist{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tp-tlist a{display:block;background:var(--off);border-radius:16px;padding:14px 18px;font-weight:600;font-size:15.5px;color:#2c2c2c;transition:background .2s}
.tp-tlist a:hover{background:var(--gl)}
.tp-tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:26px}
.tp-tgrid>div{background:var(--off);border-radius:22px;padding:20px 22px;display:flex;flex-direction:column;gap:6px;min-width:0}
.tp-tgrid b{font-family:var(--oh);font-size:19px;font-weight:600;letter-spacing:-.025em}
.tp-tgrid>div>span{font-size:14.5px;line-height:1.6;color:var(--dim)}
.tp-tgrid a{color:var(--g1);font-weight:600}
@media (max-width:900px){
  .tp-tlist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tp-tgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:600px){
  .tp-li .tp-lir{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px}
  .tp-li .tp-lir>.tl-num:nth-child(4){grid-column:1/3}
  .tp-tgrid{grid-template-columns:minmax(0,1fr)}
  .tp-cells{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media print{
  @page{margin:.45in}
  body:has(.tl-doc) .tp-trades{display:none!important}
  .tl-doc{font-size:12.5px}
  .tl-doc .tl-dbn{font-size:21px}
  .tl-doc .tl-dk h2{font-size:24px}
  .tl-doc .tl-dh{padding-bottom:8px}
  .tl-doc .tl-dto{padding-top:8px}
  .tl-doc .tl-tw{margin:6px 0 8px}
  .tl-doc .tl-tb{font-size:12.5px}
  .tl-doc .tl-tb{line-height:1.25}
  .tl-doc .tl-tb th,.tl-doc .tl-tb td{padding:3px 8px}
  .tl-doc .tl-dk dl{margin-top:4px;gap:1px}
  .tl-doc .tl-dto b{font-size:14.5px}
  .tl-doc .tl-dnote+.tl-dnote{margin-top:8px}
  .tl-doc tfoot{display:table-row-group}
  .tl-doc .tp-tbl{break-inside:avoid}
  .tl-doc .tl-dsum div{font-size:13px}
  .tl-doc .tl-dsum .tot{font-size:15px}
  .tl-doc .tl-dnote{margin-top:12px}
  .tl-doc .tl-dpre,.tl-doc .tl-dmeta{font-size:12.5px}
  .tl-doc .tl-dsign{margin-top:14px;break-inside:avoid}
  .tl-doc .tl-dsign span{height:26px}
  .tl-doc .tp-cap{font-size:14px;margin-top:8px}
  .tl-doc .tp-tbl .tl-dmeta{margin-top:0}
  .tl-doc .tp-logo{max-height:52px}
  .tl-doc tr{break-inside:avoid}
}