/* Portal layout: one ink card (the pass itself) over a 7 + 5 paper grid. */
.portal { max-width: 1080px; margin: 0 auto; padding-block: 0 var(--sp-7); padding-inline: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.portal-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) 0 var(--sp-2); }
.min0 { min-width: 0; }

.hero { padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.hero-name { font-size: var(--fs-h1); letter-spacing: .04em; margin-top: 6px; }
.hero-plan { margin-top: 4px; font-size: var(--fs-small); color: var(--inkcard-sub); }
.hero-state { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-size: var(--fs-small); color: var(--inkcard-text); white-space: nowrap; }
.figures { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-5); }
.figure { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-left: var(--sp-4); border-left: 1px solid var(--inkcard-line); }
.figure:first-child { padding-left: 0; border-left: 0; }
.f-label { font-size: var(--fs-caption); color: var(--inkcard-sub); letter-spacing: .08em; }
.f-value { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
.hero-num { font-size: var(--fs-num-hero); line-height: 1; color: var(--inkcard-text); }
.hero-num.serif { font-family: var(--font-serif); font-size: 28px; }
.f-unit { font-family: var(--font-serif); font-size: var(--fs-small); color: var(--inkcard-sub); }
.f-of { font-size: var(--fs-small); color: var(--inkcard-sub); font-family: var(--font-mono); }
.f-note { font-size: var(--fs-caption); color: var(--inkcard-sub); }
.hero .meter { background: var(--inkcard-line); }
.hero .slots .tile { background: var(--inkcard-line); box-shadow: inset 0 0 0 1px #3A362E; }
.hero .slots .tile.on { background: var(--inkcard-ok); box-shadow: inset 0 0 0 1px var(--inkcard-ok); }

.grid-main { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-4); align-items: start; }
.col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-2); }
.client { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 10px 10px 10px var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-chip); min-width: 0; transition: border-color 200ms var(--ease-ink); }
.client:hover { border-color: var(--ink-light); }
.c-name { font-size: var(--fs-small); color: var(--text-data); font-weight: var(--fw-data); }
.c-note { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.kv.compact { gap: 4px var(--sp-4); }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px dashed var(--line); }
.danger-zone .t { font-family: var(--font-serif); font-weight: 600; color: var(--text-title); }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.steps li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.steps .t { font-size: var(--fs-small); color: var(--text-data); font-weight: var(--fw-data); }
.steps .caption .ico { width: 12px; height: 12px; vertical-align: -2px; }
.step-no { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--seal); border-radius: 3px; color: var(--seal-text); font-size: 12px; font-weight: 500; }
.tips { margin: 0; padding-left: 18px; font-size: var(--fs-small); color: var(--text-sub); display: grid; gap: 6px; }
.list-row .t.alarm { color: var(--alarm-text); }

.portal-foot { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-caption); color: var(--text-muted); }

@media (max-width: 900px) {
  .grid-main { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero { padding: var(--sp-4); gap: var(--sp-4); }
  .hero-name { font-size: 22px; }
  .figures { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .figure:first-child { grid-column: span 2; }
  .figure:nth-child(2) { padding-left: 0; border-left: 0; }
  .hero-num { font-size: 32px; }
  .client-grid { grid-template-columns: 1fr; }
  .danger-zone { flex-direction: column; align-items: stretch; }
  .portal-foot { flex-direction: column; }
}