/* Patient portal (v0.3) and the shared app-shell basics also used by the Clinic OS. */
html { background: var(--skn-bg); }
body.skn-app { margin: 0; font: 500 var(--skn-text-base)/var(--skn-leading-normal) var(--skn-font-body); color: var(--skn-ink); background: var(--skn-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.skn-app a { color: var(--skn-sage-700); }
.skn-app h1, .skn-app h2, .skn-app h3 { font-family: var(--skn-font-display); font-weight: var(--skn-weight-display); letter-spacing: var(--skn-tracking-display); color: var(--skn-ink); line-height: 1.15; }
.skn-skip { position: absolute; left: -999px; top: 8px; z-index: 999; background: #fff; padding: 8px 12px; border-radius: 8px; }
.skn-skip:focus { left: 8px; }
.skn-app :focus-visible { outline: 3px solid var(--skn-focus); outline-offset: 2px; }
.skn-tabbar[hidden], .skn-pside[hidden] { display: none !important; }

/* ---------- shell ---------- */
.skn-pside { position: fixed; z-index: 30; inset: 0 auto 0 0; width: 264px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 22px 14px 16px; background: var(--skn-surface); border-right: 1px solid var(--skn-border); }
.skn-pside__brand { display: block; padding: 0 10px 14px; color: var(--skn-sage-500); }
.skn-pside__brand .skn-logo { width: 148px; height: auto; display: block; }
.skn-pside__nav { display: grid; gap: 2px; }
.skn-pnav__link { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: var(--skn-radius-md); text-decoration: none; color: var(--skn-text-muted) !important; font-weight: 650; }
.skn-pnav__link .skn-icon { color: var(--skn-text-soft); }
.skn-pnav__link:hover { background: var(--skn-cream-50); color: var(--skn-ink) !important; }
.skn-pside .skn-pnav__link[aria-current="page"] { background: var(--skn-sage-900); color: #fff !important; }
.skn-pside .skn-pnav__link[aria-current="page"] .skn-icon { color: var(--skn-sage-300); }
.skn-pside__cta { position: relative; overflow: hidden; margin-top: auto; padding: 18px; border-radius: var(--skn-radius-lg); background: var(--skn-sage-900); color: rgba(255, 255, 255, 0.78); font-size: var(--skn-text-sm); }
.skn-pside__cta p { margin: 0 0 12px; position: relative; }
.skn-pside__cta-title { color: #fff; font-size: var(--skn-text-lg); font-weight: 750; letter-spacing: -0.02em; margin-bottom: 4px !important; }
.skn-pside__leaf { position: absolute; right: -18px; top: -10px; width: 92px; height: auto; color: rgba(169, 191, 148, 0.16); }
.skn-btn--light { background: #fff; color: var(--skn-sage-900) !important; }
.skn-btn--light:hover { background: var(--skn-sage-100); }
.skn-btn--glass { background: rgba(255, 255, 255, 0.1); color: #fff !important; border-color: rgba(255, 255, 255, 0.16); }
.skn-btn--glass:hover { background: rgba(255, 255, 255, 0.18); }

.skn-pbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(16px, 4vw, 40px); background: rgba(244, 246, 242, 0.86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.skn-pbar__brand { color: var(--skn-sage-500); text-decoration: none; }
.skn-pbar__brand .skn-logo { height: 40px; width: auto; display: block; }
a.skn-pbar__book { color: #fff !important; }
.skn-portal__main { box-sizing: border-box; max-width: 52rem; margin: 0 auto; padding: 8px clamp(16px, 4vw, 40px) 120px; outline: none; min-width: 0; }
@media (min-width: 1024px) {
	body.skn-signed-in .skn-pmain { margin-left: 264px; }
	body.skn-signed-in .skn-pbar__brand { visibility: hidden; }
	.skn-portal__main { padding-bottom: 64px; }
}
@media (max-width: 1023px) {
	.skn-pside { display: none !important; }
	body.skn-signed-in .skn-pbar__book { display: none; }
}

/* ---------- headings ---------- */
.skn-phead { margin: 8px 0 22px; }
.skn-ptitle { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.4rem); margin: 0; }
.skn-pintro { color: var(--skn-text-muted); max-width: 40rem; margin: 6px 0 0; }
.skn-psub { font-size: var(--skn-text-lg); margin: 28px 0 12px; }
.skn-psection__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.skn-psection__head a { font-weight: 700; font-size: var(--skn-text-sm); text-decoration: none; }
.skn-stack { display: grid; gap: 12px; }
.skn-plain { list-style: none; padding: 0; margin: 0; font-size: var(--skn-text-sm); }
.skn-hr { border: 0; border-top: 1px solid var(--skn-border); margin: 28px 0; }
.skn-linkbtn { background: none; border: 0; padding: 8px 0; color: var(--skn-sage-700); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-weight: 650; }
.skn-pnumber { margin-top: 24px; text-align: center; }

.skn-flash { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--skn-radius-md); margin: 0 0 16px; font-weight: 600; }
.skn-flash--success { background: var(--skn-success-bg); color: var(--skn-success); }
.skn-flash--error { background: var(--skn-error-bg); color: var(--skn-error); }

/* ---------- home: hero card + quick actions ---------- */
.skn-hero-card { position: relative; overflow: hidden; isolation: isolate; padding: 22px; border-radius: var(--skn-radius-xl); background: radial-gradient(120% 140% at 100% 0%, #2e4625 0%, var(--skn-sage-900) 55%); color: rgba(255, 255, 255, 0.78); box-shadow: 0 24px 50px -24px rgba(27, 42, 28, 0.7); }
.skn-hero-card p { margin: 0; }
.skn-hero-card__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.skn-hero-card__label { font-size: var(--skn-text-sm); font-weight: 650; color: var(--skn-sage-200); }
.skn-hero-card__status { padding: 4px 10px; border-radius: var(--skn-radius-pill); background: rgba(255, 255, 255, 0.1); color: #fff; font-size: var(--skn-text-xs); font-weight: 700; }
.skn-hero-card__when { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0 6px; }
.skn-hero-card__date { color: #fff; font-size: clamp(1.7rem, 1.3rem + 2vw, 2.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.skn-hero-card__time { color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.skn-hero-card__what { color: rgba(255, 255, 255, 0.86); font-weight: 650; }
.skn-hero-card__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 16px; font-size: var(--skn-text-sm); }
.skn-hero-card__who { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 650; }
.skn-hero-card__who .skn-avatar { background: var(--skn-sage-300); color: var(--skn-sage-900); }
.skn-hero-card__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--skn-radius-pill); background: rgba(255, 255, 255, 0.08); color: #fff; font-weight: 600; }
.skn-hero-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.skn-hero-card__leaf { position: absolute; z-index: -1; right: -30px; bottom: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(169, 191, 148, 0.22), transparent 68%); }
.skn-hero-card--empty .skn-hero-card__date { margin: 10px 0 8px; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); }

.skn-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; }
@media (min-width: 640px) { .skn-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.skn-quick__item { display: flex; flex-direction: column; gap: 2px; padding: 16px; background: var(--skn-surface); border: 1px solid var(--skn-border); border-radius: var(--skn-radius-lg); text-decoration: none; color: var(--skn-ink) !important; box-shadow: var(--skn-shadow-sm); transition: transform var(--skn-duration) var(--skn-ease), box-shadow var(--skn-duration) var(--skn-ease); -webkit-tap-highlight-color: transparent; }
.skn-quick__item:hover { box-shadow: var(--skn-shadow-md); transform: translateY(-1px); }
.skn-quick__item:active { transform: scale(0.98); }
.skn-quick__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 10px; border-radius: 14px; background: var(--skn-sage-100); color: var(--skn-sage-700); }
.skn-quick__item:nth-child(2) .skn-quick__icon { background: var(--skn-clay-100); color: var(--skn-clay-700); }
.skn-quick__item:nth-child(3) .skn-quick__icon { background: var(--skn-error-bg); color: var(--skn-error); }
.skn-quick__item:nth-child(4) .skn-quick__icon { background: var(--skn-info-bg); color: var(--skn-info); }
.skn-quick__label { font-weight: 750; letter-spacing: -0.01em; }
.skn-quick__sub { color: var(--skn-text-muted); font-size: var(--skn-text-xs); font-weight: 600; }
.skn-quick__item.is-todo .skn-quick__sub { color: var(--skn-clay-700); }

.skn-nudge { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; margin-top: 16px; padding: 16px; border-radius: var(--skn-radius-lg); background: var(--skn-clay-100); }
.skn-nudge p { margin: 0; font-size: var(--skn-text-sm); color: var(--skn-ink); }
.skn-nudge__title { font-weight: 750; }
.skn-nudge__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--skn-clay-700); }
.skn-nudge .skn-btn { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
@media (min-width: 640px) { .skn-nudge { grid-template-columns: auto minmax(0, 1fr) auto; } .skn-nudge .skn-btn { grid-column: auto; margin-top: 0; } }

/* ---------- appointment cards ---------- */
.skn-appt { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 14px; background: var(--skn-surface); border: 1px solid var(--skn-border); border-radius: var(--skn-radius-lg); box-shadow: var(--skn-shadow-sm); }
.skn-appt__date { align-self: start; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 0; border-radius: 16px; background: var(--skn-sage-50); color: var(--skn-sage-900); }
.skn-appt__dow, .skn-appt__mon { font-size: 11px; font-weight: 700; color: var(--skn-sage-600); }
.skn-appt__day { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.skn-appt--cancelled .skn-appt__date, .skn-appt--no_show .skn-appt__date, .skn-appt--expired .skn-appt__date { background: var(--skn-cream-100); color: var(--skn-text-muted); }
.skn-appt__body { min-width: 0; display: grid; gap: 6px; }
.skn-appt__body p { margin: 0; }
.skn-appt__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.skn-appt__what { font-weight: 750; letter-spacing: -0.01em; }
.skn-appt__when { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--skn-text-muted); font-size: var(--skn-text-sm); font-weight: 600; }
.skn-appt__when > span { display: inline-flex; align-items: center; gap: 4px; }
.skn-appt__who { display: flex; align-items: center; gap: 8px; font-size: var(--skn-text-sm); font-weight: 650; }
.skn-appt__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.skn-appt__ref { font-size: 11px; color: var(--skn-text-soft); font-weight: 600; }
a.skn-btn--primary { color: #fff !important; }

.skn-panel { background: #fff; border: 1px solid var(--skn-sage-200); border-radius: var(--skn-radius-lg); padding: 20px; margin-bottom: 20px; display: grid; gap: 12px; box-shadow: var(--skn-shadow-md); }
.skn-panel .skn-psub { margin-top: 0; }
.skn-panel__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }

/* ---------- invoices ---------- */
.skn-invoice { display: grid; gap: 12px; }
.skn-invoice__head { display: flex; justify-content: space-between; align-items: flex-start; }
.skn-invoice__head p { margin: 0; }
.skn-invoice__num { font-weight: 750; }
.skn-mini-table { width: 100%; border-collapse: collapse; font-size: var(--skn-text-sm); }
.skn-mini-table td { padding: 8px 0; border-bottom: 1px solid #eef1ea; }
.skn-mini-table td.num { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; }
.skn-mini-table tr.is-total td { font-weight: 750; }

/* ---------- forms ---------- */
.skn-signin { max-width: 30rem; }
.skn-pform { display: grid; gap: 16px; max-width: 40rem; }
.skn-pform__new { display: grid; gap: 12px; padding: 16px; background: var(--skn-sage-50); border-radius: var(--skn-radius-md); }
.skn-toggle-row label { display: flex; flex-direction: column; gap: 2px; }
.skn-noscript { padding: 2rem; text-align: center; }
.skn-tiles { display: none; }