/* ============================================================
   Post-op page — shared styles
   Used by postop-*.html pages
   Re-uses disease-page.css base; adds postop-specific patterns:
   timeline, position cards, do/dont grid, drop schedule
   ============================================================ */

/* TIMELINE — vertical day/week recovery */
.po-timeline { margin-top: var(--s-7); border-left: 1px solid var(--border); padding-left: var(--s-6); display: grid; gap: var(--s-7); }
.po-tl-item { position: relative; }
.po-tl-item::before { content: ""; position: absolute; left: calc(var(--s-6) * -1 - 5px); top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg-0); border: 2px solid var(--cyan); box-shadow: 0 0 12px rgba(0,229,255,.4); }
.po-tl-when { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--cyan); text-transform: uppercase; }
.po-tl-title { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--fg-0); margin: 6px 0 10px; letter-spacing: -.01em; }
.po-tl-body { font-size: 15px; color: var(--fg-2); line-height: 1.65; max-width: 65ch; }
.po-tl-body p + p { margin-top: 10px; }
.po-tl-body ul { margin: 12px 0 0; padding-left: 18px; }
.po-tl-body ul li { margin: 6px 0; }

/* DO / DON'T GRID */
.po-dd { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-top: var(--s-6); }
.po-dd-col { padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.po-dd-do { border-color: rgba(34, 197, 94, .3); }
.po-dd-dont { border-color: rgba(255, 77, 94, .3); }
.po-dd-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s-4); }
.po-dd-do .po-dd-head { color: #22c55e; }
.po-dd-dont .po-dd-head { color: var(--signal-danger, #FF4D5E); }
.po-dd-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.po-dd ul { list-style: none; padding: 0; margin: 0; }
.po-dd li { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--fg-1); line-height: 1.5; display: grid; grid-template-columns: 16px 1fr; gap: 12px; align-items: start; }
.po-dd li:last-child { border-bottom: 0; }
.po-dd li::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; }
.po-dd-do li::before { background: rgba(34, 197, 94, .15); border: 2px solid #22c55e; }
.po-dd-dont li::before { background: rgba(255, 77, 94, .15); border: 2px solid var(--signal-danger, #FF4D5E); }
@media (max-width: 760px) { .po-dd { grid-template-columns: 1fr; } }

/* POSITION CARDS — for gas / silicone positioning */
.po-pos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-6); }
.po-pos-card { padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); text-align: center; }
.po-pos-svg { width: 100%; height: 120px; display: block; margin: 0 auto var(--s-3); color: var(--cyan); }
.po-pos-name { font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--fg-0); margin: 4px 0; }
.po-pos-when { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--fg-3); text-transform: uppercase; }
.po-pos-time { font-family: var(--font-display); font-size: 22px; color: var(--cyan); margin-top: 8px; }
.po-pos-note { font-size: 13px; color: var(--fg-2); margin-top: 12px; line-height: 1.5; }
@media (max-width: 760px) { .po-pos-grid { grid-template-columns: 1fr; } }

/* CRITICAL CALLOUT — like flight warning */
.po-critical { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); padding: var(--s-6); background: linear-gradient(135deg, rgba(255,77,94,.14), rgba(255,77,94,.04)); border: 1px solid rgba(255,77,94,.4); border-radius: var(--radius-lg); margin-top: var(--s-6); align-items: center; }
.po-critical-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,77,94,.18); display: flex; align-items: center; justify-content: center; color: var(--signal-danger, #FF4D5E); font-size: 36px; font-weight: 600; flex-shrink: 0; }
.po-critical h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--fg-0); margin: 0 0 8px; }
.po-critical p { font-size: 15px; color: var(--fg-1); margin: 0; max-width: 70ch; line-height: 1.6; }

/* DROP SCHEDULE TABLE */
.po-drops { margin-top: var(--s-6); border-top: 1px solid var(--border); }
.po-drop-row { display: grid; grid-template-columns: 120px 1fr 200px 160px; gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--border); align-items: center; }
.po-drop-color { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--fg-2); }
.po-drop-swatch { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,.15); }
.po-drop-name { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--fg-0); }
.po-drop-purpose { font-size: 13px; color: var(--fg-2); margin-top: 2px; }
.po-drop-freq { font-family: var(--font-mono); font-size: 12px; color: var(--cyan); letter-spacing: .06em; }
.po-drop-when { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: .08em; }
@media (max-width: 900px) { .po-drop-row { grid-template-columns: 1fr; gap: 6px; } .po-drop-freq, .po-drop-when { justify-self: start; } }

/* STEP CARDS — numbered grid for "how to apply drops" etc */
.po-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); margin-top: var(--s-6); counter-reset: po-step; }
.po-step { padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); position: relative; counter-increment: po-step; }
.po-step::before { content: counter(po-step, decimal-leading-zero); position: absolute; top: 16px; right: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--cyan); }
.po-step h4 { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--fg-0); margin: 0 0 10px; padding-right: 40px; }
.po-step p { font-size: 14px; color: var(--fg-2); line-height: 1.55; margin: 0; }

/* SIGNAL ROWS — alarm signs page */
.po-signals { margin-top: var(--s-7); border-top: 1px solid var(--border); }
.po-signal { display: grid; grid-template-columns: 80px 1fr 200px; gap: var(--s-5); padding: var(--s-6) 0; border-bottom: 1px solid var(--border); align-items: center; }
.po-signal-sev { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; padding: 6px 10px; border-radius: 4px; text-align: center; align-self: start; margin-top: 4px; }
.po-signal-sev-critical { background: rgba(255,77,94,.15); color: var(--signal-danger, #FF4D5E); border: 1px solid rgba(255,77,94,.4); }
.po-signal-sev-high { background: rgba(255,184,0,.12); color: var(--signal-warn, #FFB800); border: 1px solid rgba(255,184,0,.35); }
.po-signal-sev-medium { background: rgba(0,229,255,.1); color: var(--cyan); border: 1px solid rgba(0,229,255,.35); }
.po-signal h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--fg-0); margin: 0 0 6px; }
.po-signal p { font-size: 14px; color: var(--fg-2); line-height: 1.55; margin: 0; max-width: 60ch; }
.po-signal-action { display: flex; flex-direction: column; gap: 6px; align-items: end; text-align: right; }
.po-signal-action-time { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--fg-2); text-transform: uppercase; }
.po-signal-action a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--fg-0); color: var(--bg-0); text-decoration: none; font-size: 12px; font-family: var(--font-mono); letter-spacing: .08em; font-weight: 500; transition: background .2s, color .2s; }
.po-signal-action a:hover { background: var(--cyan); }
.po-signal-critical .po-signal-action a { background: var(--signal-danger, #FF4D5E); color: #fff; }
.po-signal-critical .po-signal-action a:hover { background: #ff7a8a; }
@media (max-width: 760px) { .po-signal { grid-template-columns: 1fr; } .po-signal-action { align-items: start; text-align: left; } }

/* PATIENT PORTAL ENTRY (P-06) */
.po-portal { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--s-8); margin-top: var(--s-7); align-items: center; }
.po-portal-card { padding: var(--s-7); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.po-portal-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--fg-3); text-transform: uppercase; margin-bottom: 10px; }
.po-portal-input { display: flex; gap: 12px; margin-top: var(--s-3); }
.po-portal-input input { flex: 1; padding: 14px 18px; background: var(--bg-1); border: 1px solid var(--border-strong); border-radius: 12px; color: var(--fg-0); font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.po-portal-input input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,229,255,.18); }
.po-portal-input button { padding: 14px 22px; background: var(--fg-0); color: var(--bg-0); border: 0; border-radius: 12px; font-family: var(--font-display); font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: background .2s; }
.po-portal-input button:hover { background: var(--cyan); }
.po-portal-help { margin-top: var(--s-3); font-size: 13px; color: var(--fg-3); }
.po-portal-help a { color: var(--cyan); text-decoration: none; }
.po-portal-preview { aspect-ratio: 9/16; max-height: 480px; border-radius: 28px; background: linear-gradient(160deg, #0a0c10 0%, #131820 100%); border: 1px solid var(--border-strong); padding: 24px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.po-portal-preview::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(0,229,255,.08), transparent 60%); pointer-events: none; }
.po-portal-preview-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--fg-3); text-transform: uppercase; }
.po-portal-preview-name { font-family: var(--font-display); font-size: 18px; color: var(--fg-0); font-weight: 500; }
.po-portal-preview-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: rgba(255,255,255,.04); border-radius: 8px; border: 1px solid var(--border); font-size: 12px; }
.po-portal-preview-row .mono { color: var(--cyan); }
.po-portal-preview-row .label { color: var(--fg-2); }
@media (max-width: 900px) { .po-portal { grid-template-columns: 1fr; } .po-portal-preview { max-width: 320px; } }

/* PATIENT QUICK-LINKS (footer of each postop page) */
.po-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-6); }
.po-related a { display: block; padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; transition: border-color .2s, transform .2s; }
.po-related a:hover { border-color: var(--cyan); transform: translateY(-2px); }
.po-related-code { font-family: var(--font-mono); font-size: 11px; color: var(--cyan); letter-spacing: .12em; }
.po-related-name { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--fg-0); margin-top: 8px; }
.po-related-desc { font-size: 13px; color: var(--fg-2); margin-top: 6px; line-height: 1.5; }
@media (max-width: 760px) { .po-related { grid-template-columns: 1fr; } }