/* Page layouts for the Master Arrays, master detail and draw pages.
   Material-3 shapes (rounded surfaces, pills, tonal fills) in the grid palette:
   lavender → indigo for main numbers, peach/orange for sub numbers. */

/* ---- Page frame ---- */
.dash-page.m3-page {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 24px 32px 56px;
}

@media (max-width: 720px) {
    .dash-page.m3-page { padding: 16px 16px 88px; }
}

.m3-overline {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4A5A94;
}

/* ---- Buttons ---- */
.m3-btn,
.m3-btn-tonal,
.m3-btn-text,
.m3-btn-outline {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    height: 40px;
    padding: 0 20px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.m3-btn { background: #2D3E73; color: #FFFFFF; }
.m3-btn:hover { background: #24325E; color: #FFFFFF; box-shadow: 0 2px 6px rgba(45, 62, 115, 0.3); }
.m3-btn-tonal { background: #DCE1EF; color: #1F2A52; }
.m3-btn-tonal:hover { background: #CDD3E8; color: #1F2A52; }
.m3-btn-text { background: transparent; color: #2D3E73; padding: 0 12px; }
.m3-btn-text:hover { background: rgba(45, 62, 115, 0.08); color: #2D3E73; }
.m3-btn-outline { background: #FFFFFF; color: #2D3E73; border: 1px solid #B3BBDA; }
.m3-btn-outline:hover { background: #F6F7FB; color: #2D3E73; }
.m3-btn-lg { height: 48px; padding: 0 26px; font-size: 15px; }

.m3-btn:disabled,
.m3-btn:disabled:hover {
    opacity: 0.45;
    cursor: not-allowed;
    background: #2D3E73;
    box-shadow: none;
}

.m3-btn svg,
.m3-btn-tonal svg,
.m3-btn-text svg,
.m3-btn-outline svg,
.m3-fab svg,
.m3-icon-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.m3-fab {
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 22px 0 18px;
    border-radius: 16px;
    border: 0;
    background: #2D3E73;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(45, 62, 115, 0.3), 0 1px 3px rgba(26, 26, 24, 0.15);
}

.m3-fab:hover { background: #24325E; }
.m3-fab svg { width: 22px; height: 22px; }

.m3-icon-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid #DCE1EF;
    background: #FFFFFF;
    color: #2D3E73;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

.m3-icon-btn:hover { background: #F6F7FB; color: #2D3E73; }
.m3-icon-btn.plain { border-color: transparent; background: transparent; color: #4A4A45; }
.m3-icon-btn.plain:hover { background: rgba(45, 62, 115, 0.08); }

/* ---- Chips ---- */
.m3-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.m3-chip {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 11px;
    border-radius: 8px;
    background: #DCE1EF;
    color: #1F2A52;
    white-space: nowrap;
}

.m3-chip.sub { background: #FBE2BE; color: #6B3A03; }
.m3-chip.outline { background: transparent; border: 1px solid #B3BBDA; color: #2D3E73; padding: 3px 10px; }

/* ---- Hero header (master + draw pages) ---- */
.m3-hero {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid #FFFFFF;
    box-shadow: 0 2px 12px rgba(45, 62, 115, 0.08);
    border-radius: 28px;
    padding: 20px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.m3-hero.padded { padding-bottom: 24px; }

.m3-hero-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.m3-hero-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 260px;
    min-width: 0;
}

.m3-hero-title h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1A1A18;
}

.m3-avatar {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 16px;
    background: #2D3E73;
    color: #FFFFFF;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 17px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m3-avatar.sm { width: 44px; height: 44px; border-radius: 14px; font-size: 15px; }

.m3-stats { display: flex; flex-wrap: wrap; gap: 10px; }

.m3-stat {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 100px;
}

.m3-stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6E6E68;
}

.m3-stat-value {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 20px;
    font-weight: 500;
    color: #1A1A18;
}

.m3-stat-value.sm { font-size: 14px; padding-top: 5px; }

/* ---- Primary tabs ---- */
.m3-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
}

.m3-tab {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #6E6E68;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 12px 20px 10px;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 12px 12px 0 0;
}

.m3-tab:hover { color: #2D3E73; background: rgba(45, 62, 115, 0.06); }

.m3-tab.active {
    color: #2D3E73;
    font-weight: 600;
    border-bottom-color: #2D3E73;
}

/* ---- Segmented button (period filter) ---- */
.m3-segmented {
    display: inline-flex;
    border: 1px solid #B3BBDA;
    border-radius: 999px;
    overflow: hidden;
    background: #FFFFFF;
}

.m3-segmented button {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-right: 1px solid #DCE1EF;
    background: transparent;
    color: #4A4A45;
    cursor: pointer;
    white-space: nowrap;
}

.m3-segmented button:last-child { border-right: 0; }
.m3-segmented button:hover { background: #F6F7FB; }
.m3-segmented button.on { background: #2D3E73; color: #FFFFFF; }

/* ---- Compact disclaimer ---- */
.dash-alert.compact {
    border-left-width: 1px;
    border-radius: 16px;
    padding: 12px 18px;
    align-items: center;
    background: #FDF0DD;
    border-color: #F0C893;
}

.dash-alert.compact .dash-alert-icon { width: 30px; height: 30px; }
.dash-alert.compact .dash-alert-icon svg { width: 17px; height: 17px; }
.dash-alert.compact .dash-alert-body { gap: 6px; flex-grow: 1; }
.dash-alert.compact .dash-alert-headline { font-size: 15px; }

.dash-alert-toggle {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #8A4B04;
    background: transparent;
    border: 0;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    align-self: center;
}

.dash-alert-toggle:hover { background: rgba(194, 113, 12, 0.1); }

/* ---- Balls (shared) ---- */
.ball {
    --t: 0;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 14px;
    font-weight: 600;
    color: #1A1A18;
    background: color-mix(in srgb, #2D3E73 calc(var(--t) * 100%), #D6DBEB);
    box-shadow: 0 1px 3px rgba(26, 26, 24, 0.15);
}

.ball.dark { color: #FFFFFF; }
.ball.sub { background: #F5A94A; color: #4A2802; }
.ball.match { background: #1F9D5B; color: #FFFFFF; box-shadow: 0 0 0 3px rgba(31, 157, 91, 0.25); }
.ball.sub.match { background: #22C3DD; color: #06323A; box-shadow: 0 0 0 3px rgba(34, 195, 221, 0.3); }
.ball.sm { width: 32px; height: 32px; font-size: 13px; }

.ball-divider {
    width: 2px;
    height: 24px;
    margin: 0 4px;
    border-radius: 1px;
    background: #DCE1EF;
}

.ball-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ---- Master Arrays page ---- */
.ma-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
}

.ma-header-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 360px;
}

.ma-header-text h1 {
    margin: 0;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ma-header-text p { margin: 0; font-size: 14px; color: #6E6E68; }

.ma-count {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    background: #DCE1EF;
    color: #1F2A52;
}

.m3-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid #DCE1EF;
    box-sizing: border-box;
    color: #4A4A45;
    flex: 0 1 300px;
}

.m3-search:focus-within { box-shadow: 0 0 0 2px #2D3E73; }

.m3-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }

.m3-search input {
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    width: 100%;
    color: #1A1A18;
}

.ma-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

@media (max-width: 420px) {
    .ma-grid { grid-template-columns: minmax(0, 1fr); }
}

.ma-card {
    background: #FFFFFF;
    border: 1px solid #E3E6F0;
    border-radius: 24px;
    box-shadow: 0 1px 2px rgba(26, 26, 24, 0.06), 0 4px 14px rgba(45, 62, 115, 0.06);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.ma-card:hover { box-shadow: 0 2px 4px rgba(26, 26, 24, 0.06), 0 10px 24px rgba(45, 62, 115, 0.12); }

.ma-card-head {
    background: linear-gradient(180deg, #EEF0F7 0%, #F6F7FB 100%);
    border-radius: 23px 23px 0 0;
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ma-card-top { display: flex; align-items: flex-start; gap: 12px; }

.ma-card-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-grow: 1;
    min-width: 0;
}

.ma-card-name h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ma-card-name a { color: #1A1A18; text-decoration: none; }
.ma-card-name a:hover { color: #2D3E73; }
.ma-card-name span { font-size: 13px; color: #6E6E68; }

.ma-range { display: flex; gap: 6px; height: 8px; }
.ma-range-main { border-radius: 999px; background: linear-gradient(90deg, #D6DBEB, #2D3E73); }
.ma-range-sub { border-radius: 999px; background: #F5A94A; }

.ma-card-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

.ma-label-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #6E6E68;
}

.ma-label-row b { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ma-label-row span { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

.ma-empty {
    border: 1.5px dashed #C3CAE4;
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: #FAFAFD;
    text-align: center;
}

.ma-empty b { font-size: 14px; font-weight: 500; color: #2D3E73; }
.ma-empty span { font-size: 12px; color: #6E6E68; }

.ma-card-foot {
    padding: 12px 16px 16px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid #EDEDE8;
}

.ma-card-foot .spacer { flex-grow: 1; }

.ma-create {
    font-family: inherit;
    min-height: 300px;
    border-radius: 24px;
    border: 2px dashed #C3CAE4;
    background: rgba(238, 240, 247, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #2D3E73;
    cursor: pointer;
}

.ma-create:hover { background: #EEF0F7; }

.ma-create-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #DCE1EF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ma-create-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ma-create b { font-size: 16px; font-weight: 600; }
.ma-create span { font-size: 13px; color: #6E6E68; }

/* Overflow menu on a card */
.m3-menu {
    position: absolute;
    top: 64px;
    right: 16px;
    z-index: 20;
    min-width: 180px;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 6px 0;
    box-shadow: 0 6px 20px rgba(26, 26, 24, 0.18);
    display: flex;
    flex-direction: column;
}

.m3-menu button {
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    height: 44px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: #1A1A18;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
}

.m3-menu button:hover { background: #F6F7FB; }
.m3-menu button.danger { color: #B3261E; }
.m3-menu button.danger:hover { background: #FBEDEC; }
.m3-menu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.m3-menu-backdrop { position: fixed; inset: 0; z-index: 10; }

/* ---- Dialog ---- */
.m3-scrim {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(26, 26, 24, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
}

.m3-dialog {
    width: 600px;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #FBFBFE;
    border-radius: 28px;
    box-shadow: 0 12px 40px rgba(26, 26, 24, 0.28);
    padding: 28px 28px 22px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.m3-dialog h2 { margin: 0; font-size: 24px; font-weight: 600; }
.m3-dialog-hint { margin: 4px 0 0; font-size: 14px; color: #6E6E68; }

.m3-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.m3-field label { font-size: 12px; font-weight: 500; color: #4A5A94; }

.m3-field input {
    height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid #B3BBDA;
    background: #FFFFFF;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 16px;
    color: #1A1A18;
    box-sizing: border-box;
    width: 100%;
}

.m3-field input:focus { outline: none; border: 2px solid #2D3E73; padding: 0 13px; }
.m3-field.text input { font-family: 'IBM Plex Sans', system-ui, sans-serif; }

.m3-presets { display: flex; flex-wrap: wrap; gap: 8px; }

.m3-preset {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #C9C9C2;
    background: transparent;
    color: #4A4A45;
    cursor: pointer;
}

.m3-preset.on { background: #DCE1EF; border-color: #DCE1EF; color: #1F2A52; }

.m3-panel {
    border-radius: 20px;
    background: #EEF0F7;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.m3-panel.sub { background: #FDF0DD; }
.m3-panel.sub .m3-field label { color: #8A4B04; }
.m3-panel.sub .m3-field input { border-color: #F0C893; }

.m3-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #1F2A52;
}

.m3-panel.sub .m3-panel-head { color: #6B3A03; }
.m3-panel-head .grow { flex-grow: 1; }

.m3-swatch { width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, #D6DBEB, #2D3E73); }
.m3-swatch.sub { background: #F5A94A; }

.m3-fields-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.m3-switch {
    width: 52px;
    height: 32px;
    border-radius: 999px;
    border: 0;
    padding: 4px;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    background: #C9C9C2;
    transition: background 0.15s ease;
}

.m3-switch span { width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(26, 26, 24, 0.25); }
.m3-switch.on { justify-content: flex-end; background: #C2710C; }

.m3-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid #E3E6F0;
    background: #FFFFFF;
    font-size: 14px;
}

.m3-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---- Master detail: add-draw row ---- */
.m3-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
}

.m3-form-row > .dash-field { flex: 1 1 200px; }
.m3-form-row > .dash-field.wide { flex: 3 1 340px; }
.m3-form-row > .dash-field.narrow { flex: 0 1 200px; }
.m3-form-row > .m3-btn { margin-top: 24px; height: 48px; }
.m3-form-row .dash-input,
.m3-form-row .dash-textarea { min-height: 48px; }

.m3-period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---- Draw page ---- */
.draw-hero-title { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; }
.draw-hero-title h1 { margin: 0; font-size: 28px; font-weight: 600; }

.draw-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.draw-summary span {
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid #DCE1EF;
    color: #1F2A52;
}

.draw-summary span.good { background: #E8F4EC; border-color: #BFDCC9; color: #17603C; }

/* Big drawn balls: indigo, darker for higher numbers; sub stays orange */
.draw-ball {
    --t: 0;
    color: #FFFFFF;
    background: radial-gradient(circle at 32% 28%,
        color-mix(in srgb, #2D3E73 calc(35% + var(--t) * 40%), #FFFFFF) 0%,
        color-mix(in srgb, #2D3E73 calc(55% + var(--t) * 45%), #D6DBEB) 60%,
        #1F2A52 100%);
    box-shadow: 0 6px 16px rgba(45, 62, 115, 0.25), inset 0 -4px 0 rgba(0, 0, 0, 0.12), inset 0 3px 0 rgba(255, 255, 255, 0.25);
}

.draw-ball-sub {
    color: #4A2802;
    background: radial-gradient(circle at 32% 28%, #FFC266 0%, #F5A94A 45%, #D97E00 100%);
    box-shadow: 0 6px 16px rgba(194, 113, 12, 0.3), inset 0 -4px 0 rgba(0, 0, 0, 0.1);
}

.draw-ball-divider { background: #C3CAE4; }

/* Number picker */
.picker-wrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.picker-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.picker-col.main { flex: 3 1 480px; }
.picker-col.sub { flex: 1 1 240px; }

.picker-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 500;
    color: #4A5A94;
}

.picker-col.sub .picker-head { color: #8A4B04; }
.picker-head .count { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.picker-head .count.full { color: #1F7A4D; }

.picker-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 6px;
    padding: 12px;
    border-radius: 20px;
    background: #F6F7FB;
}

.picker-col.sub .picker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); background: #FDF0DD; }

@media (max-width: 560px) {
    .picker-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

.picker-btn {
    --t: 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 14px;
    font-weight: 500;
    height: 44px;
    min-width: 0;
    border-radius: 12px;
    border: 1px solid #DCE1EF;
    background: #FFFFFF;
    color: #1A1A18;
    cursor: pointer;
    transition: background 0.1s ease, opacity 0.1s ease;
}

.picker-btn:hover { background: #EEF0F7; }
.picker-btn.drawn { border: 2px solid #1F9D5B; }
.picker-btn.on { border-color: transparent; background: color-mix(in srgb, #2D3E73 calc(var(--t) * 100%), #D6DBEB); }
.picker-btn.on.dark { color: #FFFFFF; }
.picker-btn.on.drawn { background: #1F9D5B; color: #FFFFFF; border-color: #1F9D5B; }
.picker-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.picker-btn:disabled:hover { background: #FFFFFF; }

.picker-col.sub .picker-btn { border-color: #F0C893; }
.picker-col.sub .picker-btn:hover { background: #FBE2BE; }
.picker-col.sub .picker-btn.drawn { border: 2px solid #22C3DD; }
.picker-col.sub .picker-btn.on { background: #F5A94A; color: #4A2802; border-color: transparent; }
.picker-col.sub .picker-btn.on.drawn { background: #22C3DD; color: #06323A; border-color: #22C3DD; }
.picker-col.sub .picker-btn:disabled:hover { background: #FFFFFF; }

.picker-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid #EDEDE8;
}

.picker-foot .summary { font-size: 13px; color: #6E6E68; flex-grow: 1; font-family: 'IBM Plex Mono', ui-monospace, monospace; }

.picker-type { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 16px; }

@media (max-width: 720px) {
    .picker-type { grid-template-columns: minmax(0, 1fr); }
}

/* Ticket rows */
.ticket-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 18px;
    background: #F6F7FB;
    border: 1px solid #E3E6F0;
}

.ticket-row .ball-row { flex-grow: 1; gap: 6px; }

.ticket-no {
    min-width: 44px;
    padding: 5px 10px;
    border-radius: 8px;
    text-align: center;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 500;
    color: #1F2A52;
    background: linear-gradient(180deg, #D7DCEE 0%, #C3CAE4 100%);
    border: 1px solid #B3BBDA;
}

.ticket-list { display: flex; flex-direction: column; gap: 10px; }

/* ---- Ranked numbers (hot / cold / overdue) ---- */
.rank-list { display: flex; flex-direction: column; gap: 10px; }
.rank-row { display: flex; align-items: center; gap: 12px; }
.rank-track { flex-grow: 1; height: 10px; border-radius: 999px; background: #F0F0EC; overflow: hidden; }
.rank-fill { height: 100%; border-radius: 999px; }
.rank-value { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; min-width: 40px; text-align: right; color: #4A4A45; }

/* Grid pages use the full window width so all 1–N columns fit without scrolling */
.dash-page.m3-page.wide { max-width: none; }

/* ---- Card headers: always one line, so cards side by side get equal header bands.
   Long descriptive text (subtitles, method names) truncates with an ellipsis; the full
   text is in its title attribute. Phones may wrap. ---- */
.dash-card-head { flex-wrap: nowrap; min-height: 32px; }

.dash-card-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-card-head-right { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; }

.dash-card-head-right > .dash-family,
.dash-card-head-right > .dash-card-sub {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-card-head-right .dash-explain-btn,
.dash-card-head-right .m3-btn-text { flex-shrink: 0; }

@media (max-width: 720px) {
    .dash-card-head,
    .dash-card-head-right { flex-wrap: wrap; }
    .dash-card-title { white-space: normal; }
}

/* ---- Highlight grid that slides open on the Analytics / Predictions tabs ---- */
.grid-slide {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-bottom: -20px; /* cancel the page gap while collapsed */
    transition: grid-template-rows 0.35s ease, opacity 0.25s ease, margin-bottom 0.35s ease;
}

.grid-slide.open {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-bottom: 0;
}

.grid-slide-inner { min-height: 0; overflow: hidden; }

.grid-toggle svg { transition: transform 0.25s ease; }
.grid-toggle.open svg { transform: rotate(180deg); }
.m3-period .grid-toggle { margin-left: auto; height: 36px; }

@media (prefers-reduced-motion: reduce) {
    .grid-slide,
    .grid-toggle svg { transition: none; }
}

/* ---- Analytics sections: a soft tinted surface groups each set of cards ---- */
.an-section {
    --an-accent: #2D3E73;
    --an-surface: rgba(226, 231, 245, 0.7);
    --an-line: #DCE1EF;
    background: var(--an-surface);
    border: 1px solid var(--an-line);
    border-radius: 28px;
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.an-section.an-played { --an-accent: #00796B; --an-surface: rgba(222, 240, 237, 0.75); --an-line: #CFE6E2; }
.an-section.an-shape  { --an-accent: #A35D08; --an-surface: rgba(252, 236, 214, 0.75); --an-line: #F0DDC2; }

.an-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 4px 6px 0;
}

.an-section-pill {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    color: #FFFFFF;
    background: var(--an-accent);
    white-space: nowrap;
}

.an-section-titles {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 260px;
    min-width: 0;
}

.an-section-titles h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1F2A52;
}

.an-section-titles span { font-size: 13px; color: #4A4A45; }

.an-section-meta {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px;
    padding: 4px 11px;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--an-accent);
    white-space: nowrap;
}

.an-section-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 720px) {
    .an-section { padding: 14px 10px 14px; border-radius: 22px; }
}

/* ---- Floating glass on the lavender→peach wash ----
   Surfaces are frosted and semi-transparent, with a long, deep indigo shadow, so they appear to
   hover above the page. Small surfaces (hero, dashboard cards, KPI tiles) also tilt back slightly.
   Data cards (grid, charts) stay flat: a 3D tilt would soften their text and skew chart hover. */
:root {
    --glass-bg: rgba(255, 255, 255, 0.62);
    --glass-edge: rgba(255, 255, 255, 0.9);
    --float-1: inset 0 1px 0 rgba(255, 255, 255, 0.9),
               0 10px 18px -8px rgba(31, 42, 82, 0.25),
               0 30px 50px -16px rgba(31, 42, 82, 0.45);
    --float-2: inset 0 1px 0 rgba(255, 255, 255, 0.95),
               0 14px 24px -8px rgba(31, 42, 82, 0.30),
               0 40px 64px -18px rgba(31, 42, 82, 0.55);
    --tilt: perspective(1200px) rotateX(1.5deg);
}

.dash-card:not(.dash-dashed),
.dash-kpi,
.ma-card,
.m3-hero {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-color: var(--glass-edge);
    box-shadow: var(--float-1);
}

.dash-card.dash-dashed { background: rgba(250, 250, 253, 0.6); }

/* The slight backwards tilt — only on the smaller, text-light surfaces */
.m3-hero,
.dash-kpi,
.ma-card { transform: var(--tilt); transform-origin: 50% 100%; }

/* Dashboard cards straighten up and rise towards you on hover */
.ma-card { transition: box-shadow 0.25s ease, transform 0.25s ease; }
.ma-card:hover { box-shadow: var(--float-2); transform: perspective(1200px) rotateX(0deg) translateY(-6px); }
.ma-card.menu-open { z-index: 30; }
.ma-card-head { background: linear-gradient(180deg, rgba(238, 240, 247, 0.85) 0%, rgba(246, 247, 251, 0.6) 100%); }
.ma-create { transition: background 0.2s ease, transform 0.25s ease; transform: var(--tilt); transform-origin: 50% 100%; }
.ma-create:hover { transform: perspective(1200px) rotateX(0deg) translateY(-6px); }

/* Card title band: frosted lavender with a bright top line */
.dash-card-head {
    background: rgba(220, 225, 239, 0.75);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Section panels stay light and flat, so the floating cards inside carry the depth */
.an-section { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }

/* Smaller elements float too */
.dash-alert.compact { box-shadow: 0 8px 18px -8px rgba(138, 75, 4, 0.35); }
.m3-segmented,
.m3-search,
.m3-stat { box-shadow: 0 10px 20px -8px rgba(31, 42, 82, 0.30); }
.m3-btn { box-shadow: 0 8px 16px -4px rgba(31, 42, 82, 0.50); }

@media (prefers-reduced-motion: reduce) {
    .ma-card,
    .ma-create { transition: none; }
}

@media (max-width: 720px) {
    /* Phones: keep the glass and shadows, drop the tilt */
    .m3-hero, .dash-kpi, .ma-card, .ma-create,
    .ma-card:hover, .ma-create:hover { transform: none; }
}

/* ---- 3D inner components ----
   The same depth language inside the cards. Raised + glossy: number balls and chips.
   Recessed: things that are "missing" or are a channel (never-drawn tiles, bar tracks).
   Charts get the matching treatment in dt-charts.js (lit bars, tube-shaded doughnuts).
   Colours come from the existing rules (often set with the background shorthand or inline),
   so the shine layers are added as background-image with !important on top of them. */
:root {
    --gloss-ball: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 46%),
                  radial-gradient(circle at 50% 115%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 60%);
    --gloss-chip: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.07) 100%);
    --gloss-bar: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 100%);
    --raise-ball: inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 3px 6px -2px rgba(31, 42, 82, 0.4);
    --raise-chip: inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px rgba(31, 42, 82, 0.18);
}

/* Balls: dashboard cards, ticket rows, ranked lists, shape analysis, positional slots */
.ball,
.shape-ball,
.dash-slot-top {
    background-image: var(--gloss-ball) !important;
    box-shadow: var(--raise-ball);
}

.ball.match { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(31, 157, 91, 0.25), 0 3px 6px -2px rgba(31, 157, 91, 0.5); }
.ball.sub.match { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 0 0 3px rgba(34, 195, 221, 0.3), 0 3px 6px -2px rgba(34, 195, 221, 0.5); }

/* Chips and badges: grid hits, range chips, prediction numbers, ticket chips, pills */
.hg-chip,
.m3-chip:not(.outline),
.dash-pred-badge,
.dash-pred-badge-sub,
.tk-chip,
.ticket-hits,
.an-section-pill,
.shape-bucket-count {
    background-image: var(--gloss-chip) !important;
    box-shadow: var(--raise-chip);
}

.hg-chip.hg-chip-guessed { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(31, 157, 91, 0.25), 0 2px 4px rgba(31, 157, 91, 0.35); }
.hg-chip.hg-chip-sub-guessed { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 0 0 2px rgba(34, 195, 221, 0.3), 0 2px 4px rgba(34, 195, 221, 0.35); }

/* Recessed: never-drawn numbers sit pressed into the card */
.dash-tile {
    background: linear-gradient(180deg, #E4E8F4 0%, #EEF0F7 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 3px 6px rgba(31, 42, 82, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.9), 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dash-tile-sm {
    background: linear-gradient(180deg, #E4E8F4 0%, #EEF0F7 100%);
    box-shadow: inset 0 2px 3px rgba(31, 42, 82, 0.16), 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Bars in ranked lists: recessed track, lit rounded fill */
.rank-track {
    background: #E8EAF2;
    box-shadow: inset 0 2px 3px rgba(31, 42, 82, 0.15);
}

.rank-fill {
    background-image: var(--gloss-bar) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(31, 42, 82, 0.3);
}

/* Range bars on the dashboard cards and in the dialog preview */
.ma-range-main,
.ma-range-sub {
    background-image: var(--gloss-bar), linear-gradient(90deg, #D6DBEB, #2D3E73);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(31, 42, 82, 0.25);
}

.ma-range-sub { background-image: var(--gloss-bar); }

/* Highlight-grid totals: glossy bars */
.hg-bar { background-image: var(--gloss-bar) !important; }

/* Date / row pills in the grids */
.hg-date,
.hg-row-pill,
.ticket-no {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(31, 42, 82, 0.18);
}

/* Legend squares */
.dash-swatch,
.m3-swatch {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(31, 42, 82, 0.3);
}

/* Number picker: raised keys that press down */
.picker-btn {
    box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 0 #DCE1EF, 0 3px 6px -3px rgba(31, 42, 82, 0.3);
    transition: background 0.1s ease, opacity 0.1s ease, transform 0.08s ease, box-shadow 0.08s ease;
}

.picker-col.sub .picker-btn { box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 0 #F0C893, 0 3px 6px -3px rgba(138, 75, 4, 0.3); }

.picker-btn.on {
    background-image: var(--gloss-chip);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px rgba(31, 42, 82, 0.3);
}

.picker-btn:not(:disabled):active {
    transform: translateY(2px);
    box-shadow: inset 0 2px 3px rgba(31, 42, 82, 0.2);
}

@media (prefers-reduced-motion: reduce) {
    .picker-btn { transition: none; }
}

/* ---- Profile: side-by-side cards share one height, and their buttons line up at the bottom ---- */
.profile-grid { align-items: stretch; }
.profile-grid > .dash-card > .dash-card-body { flex-grow: 1; }
.profile-grid .profile-form { flex-grow: 1; }
.profile-grid .profile-form > div:last-child { margin-top: auto; }

/* ---- Prediction combinations: fixed-width badges, so every column lines up row to row ---- */
.dash-pred-combo { white-space: nowrap; }

.dash-pred-badge,
.dash-pred-badge-sub {
    box-sizing: border-box;
    width: 31px;
    padding: 4px 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.dash-pred-sep {
    display: inline-block;
    width: 14px;
    margin-right: 3px;
    text-align: center;
    color: var(--dash-faint);
}

/* Card headers: the title keeps its full width first; descriptive text on the right shortens instead */
.dash-card-head > .dash-card-title { flex: 0 1 auto; max-width: 75%; }
.dash-card-head > .dash-card-head-right { flex: 1 1 0; justify-content: flex-end; }