/* LBIC Calculator Presentation v0.1.0 — presentation-only overlay for the Trade Cost Planner on page 121
   (/landed-cost-calculator-canada/, [lbic_trade_cost_planner]). Every rule is scoped under .lbic-tcp
   (the wrapper root). No markup, text, field, nonce, value or submission change. !important is used only
   where the R2 wrapper/export panel sets inline style="" values or the layout pilot uses higher specificity.
   Rollback = delete this file + lbic-calculator-presentation.php. */

/* 1. Outer frame — Workspace-compatible: centred 1180 total width, gutters 32 / 24 / 16 */
.lbic-tcp{box-sizing:border-box!important;width:100%!important;max-width:1180px!important;margin:0 auto!important;padding:32px 32px 56px!important;color:var(--ink,#253B53);font-family:var(--font-body,Manrope,system-ui,sans-serif)}
@media (max-width:900px){.lbic-tcp{padding:24px 24px 44px!important}}
@media (max-width:560px){.lbic-tcp{padding:16px 16px 32px!important}}
.lbic-tcp *,.lbic-tcp *::before,.lbic-tcp *::after{box-sizing:border-box}

/* 2. Mode tabs */
.lbic-tcp>[role="tablist"]{display:flex!important;gap:6px;margin:0 0 -1px!important;position:relative;z-index:1}
.lbic-tcp>[role="tablist"]>a[role="tab"]{flex:0 1 auto;min-width:0;display:flex!important;flex-direction:column;justify-content:center;gap:2px;margin:0!important;padding:12px 20px!important;border:1px solid var(--line,#C3D5E2)!important;border-bottom:0!important;border-radius:12px 12px 0 0!important;background:var(--tint,#EFF7FB)!important;color:var(--primary,#012A58)!important;text-decoration:none!important;font-weight:600}
.lbic-tcp>[role="tablist"]>a[role="tab"][aria-selected="true"]{background:var(--primary,#012A58)!important;border-color:var(--primary,#012A58)!important;color:#fff!important}
.lbic-tcp>[role="tablist"]>a[role="tab"]>span:first-child{font-size:16px!important;font-weight:700}
.lbic-tcp>[role="tablist"]>a[role="tab"]>span+span{font-size:12.5px!important;font-weight:500;opacity:.9}
.lbic-tcp>[role="tablist"]>a[role="tab"]:focus-visible{outline:3px solid var(--secondary,#7EC1F9);outline-offset:2px}
@media (max-width:560px){.lbic-tcp>[role="tablist"]>a[role="tab"]{flex:1 1 0;padding:10px 12px!important}}

/* 3. Panel card + engine roots (both modes) */
.lbic-tcp>[role="tablist"]+div{width:100%;max-width:824px;background:var(--paper,#fff)!important;border:1px solid var(--line,#C3D5E2)!important;border-radius:0 14px 14px 14px!important;padding:32px!important;box-shadow:var(--shadow,0 1px 2px rgba(1,42,88,.05),0 10px 28px -14px rgba(1,42,88,.22))}
@media (max-width:900px){.lbic-tcp>[role="tablist"]+div{padding:24px!important}}
@media (max-width:560px){.lbic-tcp>[role="tablist"]+div{padding:20px 16px!important;border-radius:0 0 14px 14px!important}}
.lbic-tcp main.lbic-lcs,.lbic-tcp main.lbic-ecp{display:block;margin:0!important;padding:0!important;min-width:0;background:none!important}
.lbic-tcp main.lbic-lcs .lbic-frame{max-width:none!important;margin:0!important;padding:0!important}
/* readable inner width: the panel card is capped at 824px (760px content + 32px padding each side) and sits
   left-aligned on the 1180 frame line, like the header logo and Workspace content. */

/* 4. Typography — navy serif headings, consistent body */
.lbic-tcp :is(h1,h2,h3){font-family:var(--font-head,Newsreader,Georgia,serif)!important;color:var(--heading,#012A58)!important;line-height:1.25!important;letter-spacing:-.005em}
.lbic-tcp main :is(h1){font-size:1.75rem!important;font-weight:700!important;margin:0 0 .5rem!important}
@media (min-width:640px){.lbic-tcp main :is(h1){font-size:2rem!important}}
.lbic-tcp .lbic-lcs .lbic-page-header{padding:0!important;margin:0 0 1.25rem}
.lbic-tcp :is(.intro-text,main.lbic-ecp>h1+p){color:var(--mute,#4E6274)!important;font-size:1rem!important;line-height:1.6;margin:0 0 1.25rem!important}
.lbic-tcp :is(.lbic-lcs .expenses-heading,.lbic-ecp form h2){font-size:1.25rem!important;font-weight:700!important;margin:1.75rem 0 .75rem!important}
.lbic-tcp :is(.result-heading,.lbic-ecp [role="status"]>h2){font-size:1.375rem!important;font-weight:700!important;margin:0 0 .5rem!important}
.lbic-tcp p,.lbic-tcp li,.lbic-tcp label,.lbic-tcp th{overflow-wrap:break-word}

/* 5. Notices and errors */
.lbic-tcp :is(.lbic-ecp>p[role="note"],.lbic-ecp [role="status"] p[role="note"]){background:var(--tint,#EFF7FB)!important;border:1px solid var(--line,#C3D5E2)!important;border-left:5px solid var(--primary,#012A58)!important;border-radius:0 10px 10px 0!important;padding:14px 18px!important;color:var(--ink,#253B53)!important;font-size:.9375rem!important;line-height:1.55;margin:0 0 1.25rem!important}
.lbic-tcp :is(.form-alert,.error-summary,.lbic-ecp>[role="alert"]){background:var(--danger-bg,#FDE8E8)!important;border:1px solid var(--danger,#B0000A)!important;border-left:5px solid var(--danger,#B0000A)!important;border-radius:0 10px 10px 0!important;padding:14px 18px!important;color:var(--ink,#253B53)!important;margin:0 0 1.25rem!important}
.lbic-tcp :is(.error-summary,.lbic-ecp>[role="alert"]) a{color:var(--danger,#B0000A)!important;font-weight:600}
.lbic-tcp :is(.error-summary,.lbic-ecp>[role="alert"]) ul{margin:.25rem 0 0!important;padding-left:1.25rem!important}
.lbic-tcp .scope-guidance{background:#FFF7E6!important;border:1px solid #E4B95B!important;border-left:5px solid #E4B95B!important;border-radius:0 10px 10px 0!important;padding:14px 18px!important;margin:0 0 1.25rem!important}

/* 6. Form controls (both modes) */
.lbic-tcp form label:not(.choice-row):not(.inclusion-row):not(:has(input[type="checkbox"])){display:block!important;font-size:.9375rem!important;font-weight:600!important;color:var(--ink,#253B53)!important;margin:0 0 .4rem!important;line-height:1.4}
.lbic-tcp form :is(input[type="text"],select){display:block;width:100%!important;max-width:100%!important;min-height:46px;padding:10px 12px!important;border:1px solid var(--lbic-border-strong,#7A93A8)!important;border-radius:8px!important;background:#fff!important;color:var(--ink,#253B53);font-family:inherit;font-size:16px!important;line-height:1.4;font-variant-numeric:tabular-nums}
.lbic-tcp form input#ecp_quantity{max-width:220px!important}
.lbic-tcp form :is(input,select)[aria-invalid="true"]{border-color:var(--danger,#B0000A)!important;box-shadow:0 0 0 1px var(--danger,#B0000A)}
.lbic-tcp form :is(input,select,button):focus-visible{outline:3px solid var(--secondary,#7EC1F9)!important;outline-offset:2px}
.lbic-tcp .lbic-ecp form>p{margin:0 0 1rem!important}
.lbic-tcp .lbic-ecp form>p>label:has(input[type="checkbox"]),.lbic-tcp .inclusion-row{display:flex!important;align-items:flex-start;gap:.6rem;margin:.5rem 0 0!important;font-size:.9375rem!important;font-weight:500!important;color:var(--mute,#4E6274)!important}
.lbic-tcp form input[type="checkbox"],.lbic-tcp form input[type="radio"]{width:18px;height:18px;flex:none;margin:.15rem 0 0;accent-color:var(--primary,#012A58)}
.lbic-tcp .lbic-ecp form>p>span,.lbic-tcp .field-error{display:block;margin-top:.35rem;font-size:.875rem!important}
.lbic-tcp .choice-group{border:1px solid var(--line,#C3D5E2)!important;border-radius:10px!important;padding:12px 16px!important;margin:0 0 1.25rem!important;min-width:0}
.lbic-tcp .choice-group legend{font-weight:700;color:var(--ink,#253B53);padding:0 .25rem}
.lbic-tcp .choice-row{display:flex!important;align-items:flex-start;gap:.6rem;padding:.5rem .25rem!important;line-height:1.45}

/* 7. Primary action — one button style in both modes */
.lbic-tcp :is(.estimate-action button[name="lbic_lcs"],.lbic-ecp form button[name="lbic_ecp"]){display:inline-flex!important;align-items:center;justify-content:center;min-height:48px;padding:13px 26px!important;border:2px solid var(--primary,#012A58)!important;border-radius:999px!important;background:var(--primary,#012A58)!important;color:#fff!important;font-family:var(--font-body,inherit)!important;font-size:16px!important;font-weight:700!important;line-height:1.2;cursor:pointer;white-space:normal;text-align:center;max-width:100%}
.lbic-tcp :is(.estimate-action button[name="lbic_lcs"],.lbic-ecp form button[name="lbic_ecp"]):hover{background:var(--primary-hover,#011F42)!important;border-color:var(--primary-hover,#011F42)!important}
.lbic-tcp .estimate-action,.lbic-tcp .lbic-ecp form>p:last-child{margin-top:1.5rem!important}
@media (max-width:480px){.lbic-tcp :is(.estimate-action button[name="lbic_lcs"],.lbic-ecp form button[name="lbic_ecp"]){width:100%}}

/* 8. Result cards, tables and totals (both modes) */
.lbic-tcp :is(.result-panel,.lbic-ecp>[role="status"]){background:#F7FBF8!important;border:1px solid var(--line,#C3D5E2)!important;border-top:4px solid var(--primary,#012A58)!important;border-radius:12px!important;padding:22px 24px!important;margin:0 0 1.75rem!important}
@media (max-width:560px){.lbic-tcp :is(.result-panel,.lbic-ecp>[role="status"]){padding:16px 14px!important}}
.lbic-tcp :is(.result-panel,.lbic-ecp>[role="status"]) table{display:table!important;width:100%!important;border-collapse:collapse!important;table-layout:auto!important;margin:.75rem 0 0!important}
.lbic-tcp :is(.result-panel,.lbic-ecp>[role="status"]) tbody{display:table-row-group!important}
.lbic-tcp :is(.result-panel,.lbic-ecp>[role="status"]) tr{display:table-row!important}
.lbic-tcp :is(.result-panel,.lbic-ecp>[role="status"]) :is(th,td){display:table-cell!important;padding:10px 4px!important;border:0!important;border-bottom:1px solid var(--line,#C3D5E2)!important;vertical-align:top!important;width:auto!important}
.lbic-tcp :is(.result-panel,.lbic-ecp>[role="status"]) th{text-align:left!important;font-weight:400!important;color:var(--ink,#253B53)}
.lbic-tcp :is(.result-panel,.lbic-ecp>[role="status"]) td{text-align:right!important;white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important;font-variant-numeric:tabular-nums;font-weight:600!important;padding-left:16px!important}
.lbic-tcp :is(.result-panel,.lbic-ecp>[role="status"]) tr:last-child th{font-weight:700!important}
/* totals */
.lbic-tcp .result-panel .totals{margin:1rem 0 .75rem!important}
.lbic-tcp .result-panel .total-line,.lbic-tcp .lbic-ecp>[role="status"]>table+p{display:flex!important;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1rem;padding:.6rem 0!important;margin:0!important;font-weight:700!important}
.lbic-tcp .result-panel .total-line.subtotal{border-top:2px solid var(--primary,#012A58)!important;padding-top:.8rem!important}
.lbic-tcp .result-panel .final-total,.lbic-tcp .lbic-ecp>[role="status"]>table+p{background:var(--tint,#EFF7FB)!important;border:0!important;border-top:2px solid var(--primary,#012A58)!important;border-radius:0 0 10px 10px!important;padding:.85rem 1rem!important;margin-top:.5rem!important;font-size:1rem!important;color:var(--ink,#253B53)}
.lbic-tcp .total-value,.lbic-tcp .lbic-ecp>[role="status"]>table+p>span{float:none!important;margin-left:auto;white-space:nowrap!important;overflow-wrap:normal!important;font-variant-numeric:tabular-nums;text-align:right}
.lbic-tcp .final-total .total-value,.lbic-tcp .lbic-ecp>[role="status"]>table+p>span{font-family:var(--font-head,Newsreader,Georgia,serif);font-size:1.5rem!important;font-weight:700;color:var(--primary,#012A58)!important;line-height:1.3}
.lbic-tcp :is(.per-unit,.lbic-ecp>[role="status"]>p:nth-of-type(3)){margin:.75rem 0!important;color:var(--ink,#253B53)!important}
.lbic-tcp :is(.per-unit,.lbic-ecp>[role="status"]>p:nth-of-type(3)) strong{white-space:nowrap}
.lbic-tcp :is(.tax-context,.workspace-next,.lbic-ecp>[role="status"]>p:last-child){font-size:.9375rem!important;color:var(--mute,#4E6274)!important}
.lbic-tcp :is(.workspace-next,.lbic-ecp>[role="status"]>p:last-child){border-top:1px solid var(--line,#C3D5E2);padding-top:.85rem!important;margin:1rem 0 0!important}
.lbic-tcp :is(.workspace-next,.lbic-ecp>[role="status"]>p:last-child) a{font-weight:700}
/* the import table caption carries class screen-reader-text, which the shell does not define, so it shows as
   visible text today. Give it the same off-screen treatment the R2 export caption already uses inline
   (position:absolute;left:-9999px): it stays in the DOM and accessibility tree; no text is removed. */
.lbic-tcp caption.screen-reader-text{position:absolute!important;left:-9999px!important}

/* 9. Narrow screens: label row above a right-aligned, non-breaking amount — no clipping, no hidden overflow */
@media (max-width:560px){
 .lbic-tcp :is(.result-panel,.lbic-ecp>[role="status"]) table,.lbic-tcp :is(.result-panel,.lbic-ecp>[role="status"]) tbody{display:block!important}
 .lbic-tcp :is(.result-panel,.lbic-ecp>[role="status"]) tr{display:flex!important;flex-wrap:wrap;align-items:baseline;gap:.15rem .75rem;padding:.6rem 0!important;border-bottom:1px solid var(--line,#C3D5E2)}
 .lbic-tcp :is(.result-panel,.lbic-ecp>[role="status"]) :is(th,td){display:block!important;border:0!important;padding:0!important}
 .lbic-tcp :is(.result-panel,.lbic-ecp>[role="status"]) th{flex:1 1 12rem;min-width:0}
 .lbic-tcp :is(.result-panel,.lbic-ecp>[role="status"]) td{flex:0 0 auto;margin-left:auto;padding-left:0!important}
 .lbic-tcp .final-total .total-value,.lbic-tcp .lbic-ecp>[role="status"]>table+p>span{font-size:1.3rem!important}
}