/* StructuralClaw free tools — account strip + saved-calcs UI + print package.
   Shared by the four tool pages (linked as ../account.css). Screen styles for
   the strip/modal/panel that account.js builds, then the @media print rules
   that turn the page into a clean calc package. */

/* ── account strip (below the banner) ─────────────────────────────────── */
.sc-strip{background:#f1f4f8;border-bottom:1px solid var(--line,#e0e7ee);
  padding:.45rem 1.4rem;font-size:.85rem;position:relative}
.sc-strip-in{max-width:1180px;margin:0 auto;display:flex;gap:.55rem;
  align-items:center;flex-wrap:wrap}
.sc-brand{font-weight:700;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--steel,#334155)}
.sc-note{color:var(--muted,#5c6b78)}
.sc-note b{color:var(--ink,#0e1720)}
.sc-msg{color:var(--good,#0d9488);font-size:.82rem}
.sc-msg.sc-err{color:var(--bad,#c0392b)}

.sc-btn{margin:0;width:auto;padding:.3rem .8rem;border:1px solid var(--line,#e0e7ee);
  border-radius:6px;background:#fff;color:var(--steel,#334155);font:inherit;
  font-size:.82rem;font-weight:600;cursor:pointer}
.sc-btn:hover{filter:brightness(.97)}
.sc-btn.sc-primary{background:var(--lrfd,#4f46e5);border-color:var(--lrfd,#4f46e5);color:#fff}
.sc-btn.sc-ghost{background:transparent}
.sc-btn.sc-danger{color:var(--bad,#c0392b);border-color:#e6bdb7}

/* ── My calcs panel ───────────────────────────────────────────────────── */
.sc-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%);
  z-index:40;margin-top:.3rem;width:min(480px,92vw);background:#fff;
  border:1px solid var(--line,#e0e7ee);border-radius:10px;
  box-shadow:0 8px 28px rgba(14,23,32,.14);padding:.6rem .75rem}
.sc-panel-head{font-size:.78rem;color:var(--muted,#5c6b78);
  border-bottom:1px solid var(--line,#e0e7ee);padding-bottom:.4rem;margin-bottom:.3rem}
.sc-panel-empty{padding:.6rem 0;color:var(--muted,#5c6b78);font-size:.84rem}
.sc-panel-row{display:flex;gap:.5rem;align-items:center;padding:.35rem 0;
  border-bottom:1px solid #f0f3f7}
.sc-panel-row:last-child{border-bottom:none}
.sc-panel-meta{flex:1;min-width:0}
.sc-panel-name{font-weight:600;font-size:.85rem;color:var(--ink,#0e1720);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-panel-date{font-size:.74rem;color:var(--muted,#5c6b78)}

/* ── modals (save dialog, contact form) ───────────────────────────────── */
.sc-overlay{position:fixed;inset:0;background:rgba(14,23,32,.45);z-index:60;
  display:grid;place-items:center;padding:1rem}
.sc-modal{background:#fff;border-radius:12px;padding:1.1rem 1.25rem;
  width:min(420px,94vw);max-height:90vh;overflow:auto}
.sc-modal-title{margin:0 0 .3rem;font-size:1.05rem;color:var(--ink,#0e1720)}
.sc-modal-note{margin:.1rem 0 .6rem;font-size:.82rem;color:var(--muted,#5c6b78)}
.sc-modal-err{margin:.4rem 0 0;font-size:.82rem;color:var(--bad,#c0392b);min-height:1em}
.sc-label{display:block;margin:.55rem 0 .15rem;font-size:.78rem;color:var(--muted,#5c6b78)}
.sc-input{width:100%;padding:.45rem .6rem;border:1px solid var(--line,#e0e7ee);
  border-radius:6px;font:inherit;font-size:.9rem;box-sizing:border-box}
.sc-check{display:block;margin:.6rem 0 0;font-size:.82rem;color:var(--muted,#5c6b78)}
.sc-check input{width:auto;margin-right:.35rem}
.sc-row{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.9rem}

/* ── print package ────────────────────────────────────────────────────── */
/* Hidden on screen; account.js fills them just before printing. */
.sc-print-header,.sc-print-footer{display:none}

@media print{
  /* what goes: nav banner, buttons, status line, email gate, the input
     column (its values are re-stated in the generated inputs table),
     the account UI, the page footer links */
  header,.banner,.status,#status,button,.sc-strip,.sc-overlay,.sc-panel,
  footer,.gate{display:none !important}
  .card:has(.gate){display:none !important}
  .cols{display:block !important}
  .cols>div:first-child{display:none !important}

  body{background:#fff;color:#000;font-size:11pt}
  main{max-width:none;padding:0}

  /* generated calc-package header + footer */
  .sc-print-header{display:block;margin:0 0 .6rem}
  .sc-print-header h1{font-size:16pt;margin:0 0 .1rem}
  .sc-print-header h2{font-size:11pt;margin:.7rem 0 .25rem;
    border-bottom:1px solid #999;padding-bottom:2pt}
  .sc-print-sub{margin:0;font-size:9pt;color:#444}
  .sc-print-inputs{width:auto;min-width:60%;border-collapse:collapse;font-size:9pt}
  .sc-print-inputs td{border-bottom:1px solid #ddd;padding:2pt 12pt 2pt 0}
  .sc-print-inputs .sc-print-k{color:#444}
  .sc-print-inputs .sc-print-v{font-variant-numeric:tabular-nums}
  .sc-print-footer{display:block;margin-top:.8rem;border-top:1px solid #999;
    padding-top:4pt;font-size:8pt;color:#444}
  .sc-print-footer p{margin:0}

  /* results keep their identity; dark diagram panels print as drawn */
  .card,.diagrams{break-inside:avoid;border:1px solid #ccc;box-shadow:none}
  .diagrams,.kpi{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a{color:inherit;text-decoration:none}
}

/* ── ink-light printing (owner 2026-09-10): the dark app-style panels print
   as white boxes with dark text; SVG figures flip to paper colors. ── */
@media print{
  .kpi{background:#fff !important;color:#000 !important;border:1px solid #999}
  .kpi .k,.kpi .u{color:#444 !important}
  .kpi .v{color:#000 !important}
  .diagrams{background:#fff !important;border:1px solid #999}
  .diagrams h2{color:#000 !important;border-bottom-color:#999}
  .diagrams .cap{color:#444 !important}
  svg{background:#fff !important}
  svg text{fill:#000 !important}
  svg [stroke="#e6edf3"]{stroke:#333}
  svg [stroke="#93a4b4"]{stroke:#555}
  svg [stroke="#5c6b78"]{stroke:#888}
  .warn{background:#fff;border-color:#999}
}