/* HalfNav dashboard. Loads after auth.css and reuses its tokens, cards, fields and buttons. */

/* Top bar: who is signed in, and the way out */
.topbar .right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who { max-width: 280px; padding: 0 16px; height: 46px; display: inline-flex; align-items: center; border-radius: 100px; background: var(--grey); font-size: 15px; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.link { font: inherit; font-size: 15px; background: none; cursor: pointer; }
@media (max-width: 640px) { .who { display: none; } }

/* Page */
.dash { position: relative; max-width: 1200px; margin: 0 auto; padding: 52px 30px 64px; animation: authIn 0.4s var(--ease) both; }
.dash-head h1 { margin-top: 18px; font-size: clamp(30px, 3.6vw, 46px); font-weight: 600; line-height: 1.1; }
.dash-head h1 em { font-style: normal; color: var(--pink); }
.dash-head .lede { max-width: 620px; margin-top: 12px; font-size: 17px; }
.dash-grid { margin-top: 32px; display: grid; gap: 16px; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: start; }
.dash-grid > * { min-width: 0; }
.dash .card { box-shadow: 0 24px 44px -30px rgba(18, 17, 17, 0.28); }
@media (max-width: 900px) { .dash { padding: 30px 16px 36px; } .dash-grid { grid-template-columns: 1fr; margin-top: 24px; } }
@media (prefers-reduced-motion: reduce) { .dash { animation: none; } }

/* Order card */
.order .fine { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--faint); text-align: center; }
.done { text-align: center; padding: 18px 4px 6px; }
.done .tick { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--mint); display: grid; place-items: center; }
.done .tick svg { width: 28px; height: 28px; }
.done p { margin: 12px auto 24px; max-width: 400px; color: var(--body); }
.done p b { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
[hidden] { display: none !important; }

/* Plan card */
.card-dark { background: var(--ink); color: #fff; }
.card-dark .tag { background: rgba(255, 255, 255, 0.1); color: #fff; }
.price { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price s { font-size: 24px; color: rgba(255, 255, 255, 0.45); }
.price b { font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.price span { color: rgba(255, 255, 255, 0.7); }
.list-price { margin: 8px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, 0.6); }
.includes { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; font-size: 15.5px; }
.includes li { display: flex; gap: 12px; align-items: flex-start; }
.includes li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }
.reset-note { margin: 20px 0 0; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.07); font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.75); }
.steps { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; counter-reset: step; }
.steps li { counter-increment: step; display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 16px; font-size: 15px; color: var(--ink); }
.steps li::before { content: counter(step); flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 600; font-size: 14px; }
.steps li:nth-child(1) { background: var(--pink-soft); } .steps li:nth-child(2) { background: var(--yellow); } .steps li:nth-child(3) { background: var(--mint); }

/* Orders list */
.orders { margin-top: 16px; }
.orders h2 { font-size: 22px; }
.orders .empty { margin: 12px 0 0; color: var(--body); }
.order-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.order-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px 16px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--grey); font-size: 15px; }
.order-list .ref { font-weight: 600; font-variant-numeric: tabular-nums; }
.order-list .what { min-width: 0; }
.order-list .what span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-list .what .sub { font-size: 13.5px; color: var(--body); }
.order-list time { font-size: 14px; color: var(--body); white-space: nowrap; }
.pill { padding: 4px 12px; border-radius: 100px; background: var(--yellow); font-size: 13.5px; white-space: nowrap; }
.pill.ok { background: var(--mint); } .pill.off { background: var(--grey-2); }
@media (max-width: 560px) { .order-list li { grid-template-columns: auto minmax(0, 1fr); } .order-list .what { grid-column: 1 / -1; order: 3; } .order-list time { order: 4; } .order-list .pill { justify-self: end; } }