/*
 * /discord (discord-link.blade.php), the page body only. The header and footer
 * belong to the site layout. Self-contained: the tokens are copied from
 * home.css and prefixed, so this page looks right whether or not the layout
 * also loads home.css, and cannot move anything that does.
 *
 * Blurple appears on the Discord mark and the primary button and nowhere else
 * (CLAUDE.md, "Discord: one ladder, in two places"): a whole card in somebody
 * else's brand colour reads as an advert rather than part of the ladder.
 */

@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/figtree-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/figtree-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/figtree-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2'); }

.dl {
    --dl-bg: #F4F1EC;
    --dl-surface: #FFFDF9;
    --dl-surface-inset: #F8F8F8;
    --dl-surface-2: #F2EEE7;
    --dl-border: #E6E0D6;
    --dl-border-strong: #D4D4D4;
    --dl-text: #1E2430;
    --dl-muted: #555C68;
    --dl-faint: #6B6F73;
    --dl-gold: #8A6100;
    --dl-gold-fill: #E8A91E;
    --dl-ok: #116B37;
    --dl-ok-soft: rgba(17, 107, 55, .08);
    --dl-ok-edge: rgba(17, 107, 55, .30);
    --dl-notice-bg: #FFF6E5;
    --dl-notice-text: #7A4B00;
    --dl-danger: #B42323;
    --dl-focus: #2566C9;
    --dl-blurple: #5865F2;
    --dl-blurple-hover: #4752C4;
    --dl-mark-bg: rgba(88, 101, 242, .12);
    --dl-mark: #5865F2;
    --dl-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .06);
}
html.dark .dl {
    --dl-bg: #0A0D13;
    --dl-surface: #121722;
    --dl-surface-inset: #0E131C;
    --dl-surface-2: #1A2130;
    --dl-border: #232B3B;
    --dl-border-strong: #2C3547;
    --dl-text: #F3F5F9;
    --dl-muted: #A3ACBD;
    --dl-faint: #8A94A7;
    --dl-gold: #F5C451;
    --dl-gold-fill: #F5C451;
    --dl-ok: #4ADE80;
    --dl-ok-soft: rgba(74, 222, 128, .10);
    --dl-ok-edge: rgba(74, 222, 128, .30);
    --dl-notice-bg: rgba(245, 180, 60, .10);
    --dl-notice-text: #F5C77A;
    --dl-danger: #F87171;
    --dl-focus: #8FB8FF;
    --dl-mark-bg: rgba(88, 101, 242, .16);
    --dl-mark: #8C95FF;
    --dl-shadow: none;
}

.dl { flex: 1; width: 100%; background: var(--dl-bg); color: var(--dl-text); font-family: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; }
.dl *, .dl *::before, .dl *::after { box-sizing: border-box; }
.dl :focus-visible { outline: 2px solid var(--dl-focus); outline-offset: 2px; }
.dl__in { max-width: 560px; margin: 0 auto; padding: 32px 16px 56px; display: grid; gap: 14px; }
@media (min-width: 640px) { .dl__in { padding-top: 48px; } }

.dl-card { background: var(--dl-surface); border: 1px solid var(--dl-border); border-radius: 18px; padding: 20px; box-shadow: var(--dl-shadow); }
@media (min-width: 640px) { .dl-card { padding: 26px; } }

.dl-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.dl-mark { width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; background: var(--dl-mark-bg); color: var(--dl-mark); display: flex; align-items: center; justify-content: center; }
.dl-mark svg { width: 26px; height: 20px; }
.dl-title { margin: 0; font-family: 'Bricolage Grotesque', 'Figtree', ui-sans-serif, sans-serif; font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; color: var(--dl-text); }
.dl-sub { margin: 2px 0 0; font-size: 15px; color: var(--dl-muted); }

.dl-h2 { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dl-faint); }
.dl-text { margin: 0; font-size: 15px; color: var(--dl-muted); }
.dl-text strong { color: var(--dl-text); font-weight: 700; }

.dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dl-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--dl-muted); }
.dl-list strong { color: var(--dl-text); font-weight: 700; }
.dl-ico { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; background: var(--dl-surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; }
.dl-list li > span:last-child { padding-top: 5px; }

.dl-status { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 12px 14px; font-size: 14.5px; font-weight: 600; margin-bottom: 16px; border: 1px solid; }
.dl-status--ok { background: var(--dl-ok-soft); border-color: var(--dl-ok-edge); color: var(--dl-ok); }
.dl-status--wait { background: var(--dl-notice-bg); border-color: transparent; color: var(--dl-notice-text); }
.dl-status strong { font-weight: 800; }

.dl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.dl-btn { min-height: 48px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 13px; border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; background: transparent; transition: background-color .15s, border-color .15s, color .15s; }
.dl-btn--primary { background: var(--dl-blurple); color: #FFFFFF !important; }
.dl-btn--primary:hover { background: var(--dl-blurple-hover); }
.dl-btn--full { width: 100%; }
@media (min-width: 640px) { .dl-btn--full { width: auto; } }
.dl-btn--outline { border-color: var(--dl-border-strong); color: var(--dl-text) !important; }
.dl-btn--outline:hover { background: var(--dl-surface-2); }
.dl-btn--danger { border-color: var(--dl-border-strong); color: var(--dl-danger) !important; }
.dl-btn--danger:hover { border-color: var(--dl-danger); }
.dl-note { margin: 12px 0 0; font-size: 13px; color: var(--dl-faint); }
.dl-whoami strong { color: var(--dl-text); }
.dl-link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--dl-text); text-decoration: underline; cursor: pointer; }
.dl-foot { margin: 4px 0 0; text-align: center; font-size: 14px; color: var(--dl-muted); }
.dl-foot a { color: var(--dl-text); font-weight: 700; }

.dl-disconnect { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--dl-border); display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.dl-disconnect p { margin: 0; font-size: 13px; color: var(--dl-faint); max-width: 34ch; }
.dl-disconnect form { margin: 0; }

.dl-today { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.dl-today__num { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--dl-text); }
.dl-today__num span { font-size: 15px; font-weight: 600; color: var(--dl-faint); }
.dl-today__left { font-size: 14px; font-weight: 600; color: var(--dl-muted); }
.dl-bar { height: 8px; border-radius: 4px; background: var(--dl-surface-2); overflow: hidden; }
.dl-bar span { display: block; height: 100%; border-radius: 4px; background: var(--dl-gold-fill); }