/* MIP Foundation Builder — interface styles
   Author: Manuel Sánchez – Mechanical Engineer, API 570/510/580 Certified
   Palette built around sky blue, with the steel and oxide tones of a process plant. */

:root{
  --sky-100:#e8f4fb; --sky-200:#c9e7f7; --sky-300:#8fd3f1; --sky-400:#4fb8e3;
  --sky-500:#1f97cc; --sky-600:#137aa8; --sky-700:#0d5c80;
  --steel-900:#0c1824; --steel-800:#132434; --steel-700:#24425c;
  --ink:#0c1824; --ink-soft:#3d5566; --line:#d3e2ec; --paper:#ffffff; --paper-2:#f6fafd;
  --ok:#1a7f5a; --warn:#b8761a; --risk:#b23c2e; --neutral:#5b7183;
  --radius:10px; --shadow:0 1px 2px rgba(12,24,36,.06),0 8px 24px rgba(12,24,36,.06);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper-2);
  font-size:16px; line-height:1.55; -webkit-text-size-adjust:100%;
}
a{color:var(--sky-600)}
h1,h2,h3{line-height:1.2; margin:0 0 .5em}
h1{font-size:clamp(1.7rem,4.5vw,2.6rem); letter-spacing:-.02em}
h2{font-size:clamp(1.2rem,3vw,1.5rem)}
h3{font-size:1.05rem}
p{margin:0 0 1em}
small{color:var(--ink-soft)}

/* ---------- error box: always present, never silent ---------- */
#errorBox{
  display:none; position:fixed; left:12px; right:12px; bottom:12px; z-index:9999;
  background:#fff3f1; border:1px solid #e6b4ab; border-left:5px solid var(--risk);
  color:#5c1f16; padding:12px 14px; border-radius:var(--radius); box-shadow:var(--shadow);
  font-size:.92rem; max-height:45vh; overflow:auto;
}
#errorBox.show{display:block}
#errorBox h4{margin:0 0 4px; font-size:.95rem; color:var(--risk)}
#errorBox pre{margin:6px 0 0; font-family:var(--mono); font-size:.78rem; white-space:pre-wrap; color:#7a3a2e}
#errorBox button{float:right; background:none; border:0; font-size:1.1rem; cursor:pointer; color:#8c4638}

/* ---------- shell ---------- */
.topbar{
  position:sticky; top:0; z-index:50; display:flex; gap:12px; align-items:center;
  padding:10px 16px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .brand{font-weight:700; letter-spacing:-.01em; color:var(--steel-700); white-space:nowrap}
.topbar .brand span{color:var(--sky-600)}
.topbar .spacer{flex:1}
.chip{
  font-size:.78rem; padding:4px 9px; border-radius:999px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink-soft); white-space:nowrap;
}
.chip.live{border-color:var(--sky-300); background:var(--sky-100); color:var(--sky-700); font-variant-numeric:tabular-nums}
.chip.warn{border-color:#e8cfa5; background:#fdf6e9; color:var(--warn)}
select,button,input,textarea{font:inherit}
select.lang{border:1px solid var(--line); border-radius:8px; padding:5px 8px; background:var(--paper)}

main{max-width:1080px; margin:0 auto; padding:20px 16px 80px}

/* ---------- cover ---------- */
.cover{
  position:relative; overflow:hidden; border-radius:16px; color:#eaf6fd;
  background:
    radial-gradient(1200px 400px at 15% -10%, rgba(79,184,227,.35), transparent 60%),
    linear-gradient(160deg, var(--steel-900) 0%, var(--steel-700) 55%, var(--sky-700) 130%);
  padding:clamp(24px,5vw,56px); box-shadow:var(--shadow);
}
.cover::after{ /* schematic pipe-and-vessel line art */
  content:""; position:absolute; inset:0; opacity:.20; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(143,211,241,.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(143,211,241,.28) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px;
  mask-image:linear-gradient(to bottom right, black, transparent 75%);
}
.cover .eyebrow{
  display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sky-300); border:1px solid rgba(143,211,241,.4);
  padding:5px 10px; border-radius:999px; margin-bottom:18px;
}
.cover h1{color:#fff; max-width:16ch}
.cover .lead{max-width:56ch; color:#c9e2f0; font-size:1.03rem}
.cover .chain{
  display:flex; flex-wrap:wrap; gap:6px; margin:22px 0 26px;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--sky-200);
}
.cover .chain span{background:rgba(143,211,241,.12); border:1px solid rgba(143,211,241,.25); padding:4px 8px; border-radius:6px}
.author{
  display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap;
  border-top:1px solid rgba(143,211,241,.25); padding-top:20px; margin-top:6px;
}
.author .initials{
  width:52px; height:52px; flex:0 0 52px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--sky-400),var(--sky-700)); color:#fff; font-weight:700; letter-spacing:.02em;
}
.author .who{flex:1; min-width:240px}
.author .who strong{color:#fff; font-size:1.05rem}
.author .who div{color:#bcd9ea; font-size:.9rem}
.author .certs{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.author .certs em{
  font-style:normal; font-size:.72rem; font-family:var(--mono); color:var(--sky-200);
  border:1px solid rgba(143,211,241,.35); padding:3px 7px; border-radius:6px;
}
.li-cta{
  display:inline-flex; align-items:center; gap:9px; margin-top:14px; text-decoration:none;
  background:#fff; color:var(--steel-700); font-weight:600; padding:10px 16px; border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.li-cta:hover{background:var(--sky-100)}
.li-cta .in{background:#0a66c2; color:#fff; width:22px; height:22px; border-radius:5px; display:grid; place-items:center; font-size:.7rem; font-weight:800}

/* ---------- cards, forms, tables ---------- */
.grid{display:grid; gap:14px}
@media(min-width:760px){ .grid.cols-2{grid-template-columns:1fr 1fr} .grid.cols-3{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.card h3{display:flex; align-items:center; gap:8px}
.card .num{font-family:var(--mono); font-size:.7rem; color:var(--sky-600); border:1px solid var(--sky-200); background:var(--sky-100); padding:2px 6px; border-radius:5px}

label{display:block; font-size:.85rem; color:var(--ink-soft); margin:10px 0 4px; font-weight:600}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],select,textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sky-300); outline-offset:1px; border-color:var(--sky-400)}
.hint{font-size:.78rem; color:var(--ink-soft); margin-top:3px}
.field-error{font-size:.78rem; color:var(--risk); margin-top:3px}
.row{display:flex; gap:10px; flex-wrap:wrap}
.row>*{flex:1; min-width:180px}

button.btn{
  background:var(--sky-600); color:#fff; border:0; border-radius:9px; padding:11px 18px;
  font-weight:600; cursor:pointer;
}
button.btn:hover{background:var(--sky-700)}
button.btn.ghost{background:transparent; color:var(--sky-700); border:1px solid var(--sky-300)}
button.btn.ghost:hover{background:var(--sky-100)}
button.btn:disabled{opacity:.55; cursor:not-allowed}

table{width:100%; border-collapse:collapse; font-size:.9rem}
th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); background:var(--paper-2)}
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper)}

.tag{display:inline-block; font-size:.72rem; padding:2px 7px; border-radius:5px; font-weight:600; white-space:nowrap}
.tag.applicable{background:#fdeceb; color:var(--risk)}
.tag.possible{background:#fdf6e9; color:var(--warn)}
.tag.not_applicable{background:#eef3f6; color:var(--neutral)}
.tag.high{background:#fdeceb; color:var(--risk)}
.tag.medium{background:#fdf6e9; color:var(--warn)}
.tag.low{background:#eaf6f1; color:var(--ok)}
.tag.critical{background:#fdeceb; color:var(--risk)}
.tag.standard{background:#e8f4fb; color:var(--sky-700)}
.tag.informational{background:#eef3f6; color:var(--neutral)}
.tag.qc{background:#eef3f6; color:var(--neutral); font-family:var(--mono); font-weight:500}

.steps{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px}
.steps button{
  border:1px solid var(--line); background:var(--paper); border-radius:8px; padding:7px 12px;
  font-size:.85rem; cursor:pointer; color:var(--ink-soft);
}
.steps button[aria-current=step]{background:var(--sky-600); border-color:var(--sky-600); color:#fff; font-weight:600}
.steps button:disabled{opacity:.45; cursor:not-allowed}

.notice{border-left:4px solid var(--sky-400); background:var(--sky-100); padding:10px 12px; border-radius:6px; font-size:.88rem; margin:10px 0}
.notice.warn{border-color:var(--warn); background:#fdf6e9}
.notice.risk{border-color:var(--risk); background:#fdeceb}
.basis{font-size:.83rem; color:var(--ink-soft); border-left:2px solid var(--sky-200); padding-left:10px; margin-top:6px}

.footer{margin-top:40px; padding-top:18px; border-top:1px solid var(--line); font-size:.83rem; color:var(--ink-soft)}

/* ---------- print / PDF ---------- */
@media print{
  @page{ size:A4; margin:16mm 14mm; }
  body{background:#fff; font-size:11pt}
  .topbar,.steps,#errorBox,button,.li-cta,.no-print{display:none !important}
  main{max-width:none; padding:0}
  .card{box-shadow:none; border:1px solid #ccc; break-inside:avoid}
  .table-wrap{border:0; overflow:visible}
  table{font-size:9.5pt}
  tr,.notice,.basis{break-inside:avoid}
  h2{break-after:avoid}
  .print-header{display:block !important}
  .print-footer{display:block !important; position:fixed; bottom:0; left:0; right:0; font-size:8pt; color:#555; border-top:1px solid #ccc; padding-top:4px}
}
.print-header,.print-footer{display:none}
.print-header{border-bottom:2px solid var(--sky-600); padding-bottom:8px; margin-bottom:14px}
.print-header .t{font-size:14pt; font-weight:700; color:var(--steel-700)}
.print-header .m{font-size:9pt; color:#444; margin-top:4px}

/* ---------- generated service form ---------- */
details.fieldgroup{border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); margin:10px 0; overflow:hidden}
details.fieldgroup>summary{
  cursor:pointer; padding:11px 14px; font-weight:600; color:var(--steel-700);
  background:var(--paper-2); display:flex; align-items:center; gap:10px; list-style:none;
}
details.fieldgroup>summary::-webkit-details-marker{display:none}
details.fieldgroup>summary::before{content:"▸"; color:var(--sky-600); transition:transform .15s}
details.fieldgroup[open]>summary::before{transform:rotate(90deg)}
details.fieldgroup>summary .chip{margin-left:auto}
details.fieldgroup>.grid{padding:12px 14px 16px}
.field[hidden]{display:none}
#fieldFilter{max-width:340px}