/** Tightness Calculator styles - layout for the IGEM/UP/1B Ed 4 calculator page, built on style.css */

.tc-page{background:#f8fafc;padding-top:110px;/* Why: clears the fixed header */}

.tc-intro{padding:30px 0 10px;}
.tc-intro h2{font-size:2.2rem;color:#2E5BBA;margin-bottom:12px;line-height:1.2;}
.tc-intro p{color:#555;max-width:820px;font-size:1.05rem;}

.tc-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:30px;padding-top:20px;padding-bottom:40px;align-items:start;}
.tc-inputs{display:flex;flex-direction:column;gap:20px;}
.tc-results{position:sticky;top:120px;display:flex;flex-direction:column;gap:16px;}

.tc-card{min-width:0;/* Why: fieldsets default to min-content width, which let the pipe table push the page wider than phones */background:#fff;border:0;border-radius:15px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.08);}
.tc-card legend{font-weight:700;color:#2E5BBA;font-size:1.15rem;padding:0;margin-bottom:12px;float:left;width:100%;/* Why: float keeps the legend inside the card padding instead of on the fieldset edge */}
.tc-card legend + *{clear:both;/* Why: without clearance the overflow:auto pipe table sits beside the float, out of view */}
.tc-card label{display:block;font-weight:600;font-size:.9rem;margin:12px 0 6px;color:#333;}
.tc-card legend + label{margin-top:0;}
.tc-card select,.tc-card input[type=number],.tc-card input[type=text],.tc-card input[type=email],.tc-card input[type=tel]{width:100%;padding:10px 12px;border:2px solid #e2e8f0;border-radius:10px;font-size:1rem;background:#fff;color:#333;}
.tc-card select:focus,.tc-card input:focus{outline:none;border-color:#2E5BBA;box-shadow:0 0 0 3px rgba(46,91,186,.15);}
.tc-hint{font-size:.85rem;color:#666;margin-top:10px;}
.tc-check{display:flex !important;align-items:center;gap:8px;font-weight:500 !important;}
.tc-check input{width:18px;height:18px;accent-color:#2E5BBA;}

.tc-table-wrap{overflow-x:auto;position:relative;/* Why: contains the absolutely positioned visually-hidden header so it cannot widen the page */}
.tc-runs{width:100%;border-collapse:collapse;min-width:480px;table-layout:fixed;/* Why: stops long size labels stretching the table */}
.tc-runs th:nth-child(1){width:30%;} .tc-runs th:nth-child(2){width:28%;} .tc-runs th:nth-child(3){width:18%;} .tc-runs th:nth-child(4){width:16%;} .tc-runs th:nth-child(5){width:8%;}
.tc-runs th{text-align:left;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:#666;padding:0 6px 8px;}
.tc-runs td{padding:4px 6px;}
.tc-runs .run-volume{white-space:nowrap;color:#2E5BBA;font-weight:600;font-variant-numeric:tabular-nums;}
.run-remove{background:none;border:0;color:#999;font-size:1.1rem;cursor:pointer;padding:6px;border-radius:6px;}
.run-remove:hover{color:#c0392b;background:#fdecea;}

.tc-btn-secondary{margin-top:12px;background:transparent;color:#2E5BBA;border:2px solid #2E5BBA;border-radius:25px;padding:8px 20px;font-weight:700;cursor:pointer;transition:all .2s ease;align-self:flex-start;}
.tc-btn-secondary:hover{background:#2E5BBA;color:#fff;}
.tc-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.tc-actions .tc-btn-secondary{margin-top:0;}
.tc-actions .tc-hint{flex-basis:100%;margin-top:0;min-height:1.2em;}
.tc-btn-primary{background:linear-gradient(45deg,#FF6B35,#ff8c42);color:#fff;border:0;border-radius:25px;padding:10px 22px;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;}
.tc-btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(255,107,53,.3);}
.tc-actions button:disabled{opacity:.6;cursor:wait;}

.tc-subhead{clear:both;font-size:1rem;color:#1E3A8A;margin:22px 0 2px;padding-top:16px;border-top:1px solid #e2e8f0;}
.tc-hint-top{margin-top:0;}
.tc-logo{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.tc-logo img{max-width:140px;max-height:60px;object-fit:contain;border:1px solid #e2e8f0;border-radius:8px;padding:4px;background:#fff;}
.tc-logo input[type=file]{font-size:.9rem;max-width:100%;}
.tc-btn-link{background:none;border:0;color:#b91c1c;font-weight:600;cursor:pointer;padding:6px 0;text-decoration:underline;}

.tc-label{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:#666;font-weight:700;}
.tc-big{display:block;font-size:2.2rem;font-weight:700;color:#1E3A8A;font-variant-numeric:tabular-nums;line-height:1.2;margin-top:4px;}
.tc-big-sm{font-size:1.6rem;}
.tc-sub{display:block;color:#666;font-size:.9rem;}
.tc-result-main{background:linear-gradient(135deg,#2E5BBA 0%,#1E3A8A 100%);color:#fff;}
.tc-result-main .tc-label,.tc-result-main .tc-sub,.tc-result-main dt{color:rgba(255,255,255,.8);}
.tc-result-main .tc-big{color:#fff;}
.tc-breakdown{margin-top:14px;border-top:1px solid rgba(255,255,255,.2);padding-top:10px;}
.tc-breakdown div{display:flex;justify-content:space-between;font-size:.9rem;padding:2px 0;}
.tc-breakdown dd{font-variant-numeric:tabular-nums;}
#mpd-card.warn{background:#fff4e5;}
#mpd-card.warn .tc-big{color:#b45309;font-size:1.6rem;}

.verdict{border-radius:15px;padding:18px 20px;border-left:6px solid;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.08);}
.verdict p{margin-top:6px;font-size:.95rem;color:#444;}
.verdict-pass{border-color:#16a34a;}  .verdict-pass strong{color:#15803d;}
.verdict-next{border-color:#FF6B35;}  .verdict-next strong{color:#c2410c;}
.verdict-fail{border-color:#dc2626;}  .verdict-fail strong{color:#b91c1c;}
.verdict-scope{border-color:#b45309;} .verdict-scope strong{color:#b45309;}

.tc-reference{padding-bottom:60px;}
.tc-reference h2{color:#2E5BBA;font-size:1.8rem;margin-bottom:16px;}
.tc-reference h3{color:#2E5BBA;margin:30px 0 10px;}
.tc-reference ol,.tc-reference ul{padding-left:22px;color:#444;}
.tc-reference li{margin-bottom:6px;}
.tc-reference > p{margin-top:14px;color:#444;}
#mpd-reference{width:100%;border-collapse:collapse;background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.08);min-width:420px;}
#mpd-reference th{background:#2E5BBA;color:#fff;text-align:left;padding:12px 16px;}
#mpd-reference td{padding:10px 16px;border-top:1px solid #e2e8f0;}
#mpd-reference tr.active td:not([rowspan]){background:rgba(255,107,53,.15);font-weight:700;}
.tc-disclaimer{margin-top:30px !important;padding:16px;border-radius:10px;background:rgba(46,91,186,.08);font-size:.9rem;}
.tc-disclaimer a{color:#2E5BBA;}


@media(max-width:900px){
  .tc-grid{grid-template-columns:minmax(0,1fr);}
  .tc-results{position:static;}
}
/* Mobile summary bar: keeps IV and MPD in view while the inputs are scrolled */
.tc-mobile-bar{display:none;}

@media(max-width:900px){
  .tc-mobile-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:900;gap:12px;align-items:center;justify-content:space-between;
    background:#1E3A8A;color:#fff;padding:10px 16px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(0,0,0,.2);}
  .tc-mobile-bar div{display:flex;flex-direction:column;line-height:1.2;}
  .tc-mobile-bar small{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;opacity:.8;}
  .tc-mobile-bar strong{font-size:1.1rem;font-variant-numeric:tabular-nums;}
  .tc-mobile-bar a{background:#FF6B35;color:#fff;text-decoration:none;font-weight:700;padding:10px 14px;border-radius:25px;font-size:.9rem;white-space:nowrap;}
  .tc-page{padding-bottom:80px;/* Why: room for the fixed summary bar */}
  .tc-results{scroll-margin-top:90px;}
}

@media(max-width:768px){
  .tc-page{padding-top:84px;}
  header{padding:.6rem 0;}
  #site-logo{width:52px;height:52px;/* Why: 75px logo ate an eighth of a phone screen on a tool page */}
  .nav-links{top:64px;}
  .tc-intro{padding-top:20px;}
  .tc-intro h2{font-size:1.5rem;}
  .tc-intro p{font-size:.95rem;}
  .container{padding:0 16px;}
  .tc-grid{gap:16px;}
  .tc-inputs{gap:16px;}
  .tc-card{padding:18px;}
  .tc-big{font-size:1.9rem;}

  /* Pipe runs become stacked cards: material/size on top, length/volume below, remove on the right */
  .tc-runs{min-width:0;display:block;}
  .tc-runs thead{display:none;}
  .tc-runs tbody{display:block;}
  .tc-runs tr{display:grid;grid-template-columns:1fr 1fr 36px;grid-template-areas:"mat size rm" "len vol rm";gap:8px 10px;padding:12px 0;border-bottom:1px solid #e2e8f0;}
  .tc-runs tr:first-child{padding-top:0;}
  .tc-runs td{padding:0;}
  .tc-runs td::before{content:attr(data-label);display:block;font-size:.75rem;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
  .tc-runs td:nth-child(1){grid-area:mat;}
  .tc-runs td:nth-child(2){grid-area:size;}
  .tc-runs td:nth-child(3){grid-area:len;}
  .tc-runs td:nth-child(4){grid-area:vol;align-self:end;padding-bottom:10px;}
  .tc-runs td:nth-child(5){grid-area:rm;align-self:center;}
  .tc-runs td:nth-child(5)::before{content:none;}
  .run-remove{width:36px;height:44px;/* Why: 44px minimum touch target */}
  .tc-btn-secondary{padding:10px 20px;}

  .tc-reference h2{font-size:1.4rem;}
  #mpd-reference{min-width:0;font-size:.9rem;}
  #mpd-reference th,#mpd-reference td{padding:8px 10px;}
}