/* PROTOTYPE — the dashboard gallery window (dash-a.js). Authored at 1120×680, scaled by --k. dd-* = dashboard. */
.mo-dash-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; }
.mo-dash-tabs::-webkit-scrollbar { display: none; }
.mo-dash-tabs button { all: unset; cursor: pointer; flex: none; padding: 8px 14px; border-radius: var(--pa-r-pill); border: var(--pa-bw) solid var(--pa-line); color: var(--pa-ink-2); font-size: var(--pa-fs); transition: background var(--pa-dur-1), color var(--pa-dur-1), border-color var(--pa-dur-1); }
.mo-dash-tabs button:hover { color: var(--pa-ink); border-color: var(--pa-line-strong); }
.mo-dash-tabs button.on { background: var(--pa-accent); border-color: var(--pa-accent); color: var(--pa-on-accent); }
.mo-dash-stage { position: relative; }
.mo-dash-win { position: absolute; left: 0; top: 0; width: 1120px; height: 680px; transform: scale(var(--k, 1)); transform-origin: 0 0; overflow: hidden; border-radius: 14px; background: #1b2022; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85), 0 0 0 1px var(--pa-line); display: grid; grid-template-rows: 30px 32px 1fr; font-family: var(--pa-font-ui); color: #cfd8da; }
.mo-dash-cap { margin: 14px 0 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.mo-dash-cap b { color: var(--pa-ink); font-weight: 650; font-size: 17px; }
.mo-dash-cap span { color: var(--pa-ink-3); font-size: var(--pa-fs-md); }
.mo-dash .mo-fine { margin: 6px 0 0; }

.dd-title { display: flex; align-items: center; gap: 7px; padding: 0 12px; background: #15191b; font-size: 11px; color: #74888b; }
.dd-title i { width: 10px; height: 10px; border-radius: 50%; background: #3a4244; }
.dd-title i:nth-child(1) { background: #ff6058; } .dd-title i:nth-child(2) { background: #ffbd2e; } .dd-title i:nth-child(3) { background: #28c940; }
.dd-title span { margin-left: auto; margin-right: auto; }
.dd-wtabs { display: flex; align-items: end; gap: 2px; padding: 0 10px 0 52px; background: #15191b; border-bottom: 1px solid #2a3133; overflow: hidden; }
.dd-wtabs span { cursor: pointer; flex: none; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 14px; border-radius: 8px 8px 0 0; font-size: 11.5px; color: #74888b; }
.dd-wtabs span.on { background: #1b2022; color: #e6eeef; }
.dd-shell { display: grid; grid-template-columns: 42px 1fr; min-height: 0; }
.dd-rib { display: grid; align-content: start; gap: 14px; padding: 14px 0; justify-items: center; background: #15191b; border-right: 1px solid #2a3133; }
.dd-rib i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #4b5759; }
.dd-body { position: relative; overflow: hidden; padding: 18px 20px; animation: dd-in .45s var(--pa-ease); }
@keyframes dd-in { from { opacity: 0; transform: translateY(8px); } }

/* shared pieces */
.dd-k { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font: 600 10.5px var(--pa-font-mono); letter-spacing: .08em; text-transform: uppercase; color: #8fa1a3; }
.dd-k i { font-style: normal; letter-spacing: 0; text-transform: none; color: #5d6c6e; font-weight: 500; }
.dd-card { padding: 12px; border-radius: 10px; background: rgba(28, 34, 36, .82); border: 1px solid #2c3436; backdrop-filter: blur(4px); }
.dd-col { display: grid; gap: 10px; align-content: start; }
.dd-li { margin: 0; display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 11.5px; color: #b8c5c7; }
.dd-li b { color: #e6eeef; }
.dd-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; font: 500 10px var(--pa-font-mono); color: #b8c5c7; background: #2a3234; white-space: nowrap; }
.dd-chip.up, .dd-chip.done { color: #7cd37c; background: rgba(124, 211, 124, .13); }
.dd-chip.warn, .dd-chip.late { color: #fbbb83; background: rgba(251, 187, 131, .14); }
.dd-chip.run { color: #59e7e3; background: rgba(89, 231, 227, .13); }
.dd-chip.on { color: #fff; background: #2896a4; }
.dd-bar { display: block; flex: 1; height: 5px; border-radius: 999px; background: #2a3234; overflow: hidden; }
.dd-bar b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2896a4, #59e7e3); }
.dd-proj { margin: 0; display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 11.5px; color: #b8c5c7; }
.dd-proj span { width: 96px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-proj > b { width: 32px; text-align: right; font: 10.5px var(--pa-font-mono); color: #8fa1a3; }
.dd-spark { display: block; width: 100%; height: 34px; margin-top: 6px; }
.dd-spark polyline { fill: none; stroke: #59e7e3; stroke-width: 1.8; vector-effect: non-scaling-stroke; }

/* command center */
.dd-cmd { position: absolute; inset: 0; display: grid; grid-template-columns: 230px 1fr 230px; gap: 16px; padding: 16px; align-items: start; }
.dd-cmd-sky { position: absolute; inset: 0; background-size: cover; background-position: 50% 58%; }
.dd-cmd-sky::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 55%, transparent 30%, rgba(8, 12, 22, .55) 100%), linear-gradient(rgba(8, 12, 22, .25), rgba(8, 12, 22, .25)); }
.dd-orb { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; background-size: cover; background-position: center;
  box-shadow: inset -6px -6px 14px rgba(0, 0, 0, .65), inset 3px 3px 8px rgba(255, 255, 255, .18), 0 0 18px rgba(120, 160, 255, .25); }
.dd-cmd > :not(.dd-cmd-sky):not(.dd-cmd-h) { position: relative; }
.dd-cmd-h { position: absolute; left: 0; right: 0; top: 14px; text-align: center; display: grid; gap: 2px; z-index: 1; }
.dd-cmd-h b { font: 700 22px var(--pa-font-mono); letter-spacing: .22em; color: #eaf6f6; }
.dd-cmd-h span { font: 11px var(--pa-font-mono); color: #8fa1a3; }
.dd-cmd-mid { position: relative; margin-top: 54px; height: 560px; }
.dd-focus { width: 300px; margin: 0 auto; }
.dd-todo { margin: 0; display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 11.5px; color: #cfd8da; }
.dd-todo i { width: 11px; height: 11px; flex: none; border-radius: 3px; border: 1.5px solid #5d6c6e; }
.dd-todo span { flex: 1; }
.dd-planet { position: absolute; transform: translate(-50%, -50%); padding: 8px 12px; border-radius: 10px; background: rgba(20, 28, 30, .78); border: 1px solid #34413f; display: grid; gap: 1px; min-width: 110px; }
.dd-planet small { font: 10px var(--pa-font-mono); color: #59e7e3; }
.dd-planet b { font-size: 12.5px; color: #eaf6f6; letter-spacing: .04em; }
.dd-planet span { font-size: 10.5px; color: #8fa1a3; }
.dd-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dd-btns span { padding: 8px 4px; border-radius: 8px; background: #232a2c; text-align: center; font-size: 10.5px; color: #cfd8da; }
.dd-rock { margin: 0; padding: 5px 0; font-size: 11.5px; color: #cfd8da; border-top: 1px solid #2c3436; }
.dd-rock:first-of-type { border-top: 0; }
.dd-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; font-size: 10px; color: #b8c5c7; }
.dd-cal i { font-style: normal; color: #5d6c6e; font-size: 9px; }
.dd-cal span { padding: 3px 0; border-radius: 5px; }
.dd-cal span:first-of-type { grid-column-start: 4; }
.dd-cal span.on { background: #2896a4; color: #fff; }
.dd-cal span.dot { box-shadow: inset 0 -2px 0 #59e7e3; }

/* student */
.dd-student { position: absolute; inset: 0; display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 150px 1fr; gap: 16px; padding: 0 16px 16px 0; }
.dd-banner { grid-column: 1 / -1; position: relative; background-size: cover; background-position: 50% 62%; }
.dd-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(27, 32, 34, .85)); }
.dd-banner img { position: absolute; left: 20px; bottom: 18px; z-index: 1; width: 34px; height: 34px; border-radius: 6px; object-fit: cover; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.dd-banner b { position: absolute; z-index: 1; left: 20px; bottom: -14px; font: 700 22px var(--pa-font-mono); color: #eaf6f6; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.dd-student .dd-col { padding-left: 16px; padding-top: 10px; }
.dd-clock { display: grid; justify-items: center; gap: 4px; }
.dd-clock > b { font: 600 15px var(--pa-font-mono); color: #eaf6f6; }
.dd-clock > span { font-size: 10.5px; color: #8fa1a3; margin-bottom: 6px; }
.dd-clock .dd-proj { width: 100%; }
.dd-clock .dd-proj span { width: 44px; }
.dd-dial { position: relative; width: 64px; height: 64px; border-radius: 50%; border: 2px solid #4b5759; }
.dd-dial i { position: absolute; left: 50%; top: 50%; width: 2px; background: #eaf6f6; transform-origin: 50% 0; }
.dd-dial i:first-child { height: 20px; transform: rotate(200deg); } .dd-dial i:last-child { height: 26px; transform: rotate(300deg); background: #59e7e3; }
.dd-student-main { padding-top: 10px; min-width: 0; }
.dd-courses { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.dd-course { padding: 8px; border-radius: 10px; background: #20272a; border: 1px solid #2c3436; display: grid; gap: 4px; }
.dd-course > b { font-size: 12px; color: #eaf6f6; margin: 4px 0 2px; }
.dd-course .dd-li { font-size: 10.5px; padding: 1px 0; }
.dd-thumb { height: 70px; border-radius: 7px; background-size: cover; background-position: center; }
.dd-goal { margin-top: 16px; padding: 12px; border-radius: 10px; background: #20272a; border: 1px solid #2c3436; }
.dd-goal .dd-proj span { width: 110px; }

/* analytics */
.dd-an-h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dd-av { width: 40px; height: 40px; border-radius: 50%; background: url("/prototype/brand/pom-mark.svg") center / 70% no-repeat, #232a2c; }
.dd-an-h small { font: 10px var(--pa-font-mono); letter-spacing: .12em; color: #59e7e3; }
.dd-an-h b { display: block; font-size: 20px; color: #eaf6f6; font-family: var(--pa-font-mono); }
.dd-an-h b i { font: normal 12px var(--pa-font-ui); color: #8fa1a3; }
.dd-snap { margin-left: auto; font: 10.5px var(--pa-font-mono); color: #7cd37c; }
.dd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dd-kpi { padding: 12px; border-radius: 10px; background: #20272a; border: 1px solid #2c3436; }
.dd-kpi > b { display: inline-block; margin-right: 8px; font-size: 24px; font-weight: 700; color: #eaf6f6; }
.dd-gap { margin-top: 16px; }
.dd-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dd-ch { padding: 12px; border-radius: 10px; background: #20272a; border: 1px solid #2c3436; }
.dd-ch p { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.dd-ch p .dd-chip { margin-left: auto; }
.dd-ch strong { font-size: 22px; color: #eaf6f6; margin-right: 6px; }
.dd-ch small { font: 10px var(--pa-font-mono); color: #8fa1a3; }
.dd-ch .dd-spark { height: 26px; }
.dd-ch-ic { width: 18px; height: 18px; border-radius: 5px; }
.ch-yt { background: #e5484d; } .ch-tt { background: #111; box-shadow: inset 2px 0 #25f4ee, inset -2px 0 #fe2c55; } .ch-fb { background: #3b7bd6; }
.ch-th { background: #2a3234; border: 1.5px solid #cfd8da; } .ch-web { background: #2896a4; } .ch-sk { background: #f1b44c; }

/* bases (content hub, projects, learning) */
.dd-base-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 12px; color: #cfd8da; }
.dd-base-bar span { font: 10.5px var(--pa-font-mono); color: #8fa1a3; }
.dd-base-bar i { margin-left: auto; font-style: normal; font-size: 11px; color: #59e7e3; }
.dd-cards-row { display: flex; gap: 10px; margin-bottom: 14px; }
.dd-pc { width: 132px; flex: none; padding: 6px; border-radius: 9px; background: #20272a; border: 1px solid #2c3436; }
.dd-pc-cover { height: 96px; border-radius: 6px; background: #2a3234 center / cover; margin-bottom: 6px; }
.dd-pc-cover.empty { background: repeating-linear-gradient(45deg, #232a2c 0 6px, #262e30 6px 12px); }
.dd-pc b { display: block; font-size: 10.5px; color: #eaf6f6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; }
.dd-pc p { margin: 0; font-size: 10px; color: #b8c5c7; display: flex; justify-content: space-between; }
.dd-pc p span { color: #5d6c6e; }
.dd-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.dd-tbl th { text-align: left; padding: 6px 8px; font: 500 10.5px var(--pa-font-mono); color: #8fa1a3; border-bottom: 1px solid #2c3436; }
.dd-tbl td { padding: 6px 8px; border-bottom: 1px solid #232a2c; color: #b8c5c7; white-space: nowrap; }
.dd-tbl td .dd-chip { margin-right: 4px; }
.dd-tbl td.lnk { color: #59e7e3; text-decoration: underline; text-decoration-color: rgba(89, 231, 227, .35); }
.dd-tbl td .dd-bar { display: inline-block; width: 70px; vertical-align: middle; margin-right: 6px; }
.dd-tbl td b { font: 10.5px var(--pa-font-mono); color: #8fa1a3; }
.dd-tbl tr.grp td { padding-top: 12px; font: 600 10.5px var(--pa-font-mono); color: #eaf6f6; letter-spacing: .04em; border-bottom: 0; }

/* kanban */
.dd-kb-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.dd-kb-h b { font-size: 16px; color: #eaf6f6; }
.dd-kb-h span { font: 10.5px var(--pa-font-mono); color: #8fa1a3; }
.dd-kb-f { display: flex; gap: 6px; margin-bottom: 14px; }
.dd-kb-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dd-lane { padding: 10px; border-radius: 10px; background: #1f2628; border: 1px solid #2a3234; display: grid; gap: 8px; align-content: start; }
.dd-lane-h { margin: 0 0 2px; display: flex; justify-content: space-between; font-size: 12px; color: #eaf6f6; }
.dd-lane-h i { font-style: normal; font: 10.5px var(--pa-font-mono); color: #8fa1a3; }
.dd-task { padding: 9px; border-radius: 8px; background: #262e30; border-left: 3px solid #4b5759; display: grid; gap: 5px; justify-items: start; }
.dd-task.run { border-left-color: #59e7e3; } .dd-task.late { border-left-color: #fbbb83; } .dd-task.done { border-left-color: #7cd37c; opacity: .75; }
.dd-task.done b { text-decoration: line-through; }
.dd-task small { font: 9.5px var(--pa-font-mono); color: #8fa1a3; }
.dd-task b { font-size: 11.5px; font-weight: 500; color: #e6eeef; line-height: 1.35; }
.dd-task p { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #b8c5c7; }
.dd-who { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font: 600 8.5px var(--pa-font-mono); color: #fff; background: #2896a4; }
.dd-add { margin: 0; text-align: center; font-size: 11px; color: #5d6c6e; padding: 4px; border: 1px dashed #34413f; border-radius: 7px; }

/* excalidraw */
.dd-body[data-dash="draw"] { background: #fbfbf8; }
.dd-draw { color: #1f2a2c; font-family: "Patrick Hand", "Comic Sans MS", cursive; }
.dd-draw-t { margin: 0; text-align: center; font-size: 34px; letter-spacing: .04em; }
.dd-draw-s { margin: 0 0 6px; text-align: center; font-size: 15px; color: #1c6f7a; }
.dd-draw-svg { display: block; width: 100%; height: 480px; }
.dd-draw-svg text { font: 15px "Patrick Hand", "Comic Sans MS", cursive; fill: #1f2a2c; text-anchor: middle; }
.dd-draw-svg text.b { font-size: 19px; }
.dd-draw-svg text.code { font: 12px var(--pa-font-mono); fill: #59e7e3; text-anchor: start; }
.dd-draw-svg text.sm { font-size: 12px; }
.dd-draw-svg .ln { fill: none; stroke: #3b4a4d; stroke-width: 1.6; }

@media (prefers-reduced-motion: reduce) { .dd-body { animation: none; } }