:root { color-scheme: light dark; --bg:#f3f6fd; --fg:#0f172a; --surface:rgb(255 255 255 / .72); --border:rgb(15 23 42 / .14); --input-bg:rgb(255 255 255 / .55); --danger:#dc2626; --success:#16a34a; --warning:#d97706; --info:#2563eb; --primary:#2563eb; --accent-b:#7c3aed; --primary-contrast:#fff; --focus:#2563eb; --link:var(--primary); --glow-a:37 99 235; --glow-b:124 58 237; --glow-alpha:.24; --surface-tint:rgb(37 99 235 / .08); } @media (prefers-color-scheme: dark) { :root { --bg:#070b18; --fg:#f8fafc; --surface:rgb(255 255 255 / .08); --border:rgb(255 255 255 / .14); --input-bg:rgb(2 6 23 / .55); --danger:#f87171; --success:#4ade80; --warning:#facc15; --info:#60a5fa; --primary:#3b82f6; --accent-b:#a855f7; --primary-contrast:#fff; --focus:#60a5fa; --link:var(--primary); --glow-a:37 99 235; --glow-b:168 85 247; --glow-alpha:.30; --surface-tint:rgb(96 165 250 / .12); } } :root[data-mode="light"] { color-scheme:light; } :root[data-mode="dark"] { color-scheme:dark; --bg:#070b18; --fg:#f8fafc; --surface:rgb(255 255 255 / .08); --border:rgb(255 255 255 / .14); --input-bg:rgb(2 6 23 / .55); --danger:#f87171; --success:#4ade80; --warning:#facc15; --info:#60a5fa; --primary:#3b82f6; --accent-b:#a855f7; --primary-contrast:#fff; --focus:#60a5fa; --link:var(--primary); --glow-a:37 99 235; --glow-b:168 85 247; --glow-alpha:.30; --surface-tint:rgb(96 165 250 / .12); } /* Kleurthema's — wisselen via data-theme op (navy is de standaard) */ :root[data-theme="teal"] { --bg:#eaf7f5; --border:rgb(13 148 136 / .20); --primary:#0f766e; --accent-b:#0284c7; --focus:#0f766e; --glow-a:13 148 136; --glow-b:2 132 199; --surface-tint:rgb(15 118 110 / .10); } :root[data-theme="emerald"] { --bg:#ecf8f1; --border:rgb(5 150 105 / .20); --primary:#059669; --accent-b:#10b981; --focus:#059669; --glow-a:5 150 105; --glow-b:16 185 129; --surface-tint:rgb(5 150 105 / .10); } :root[data-theme="indigo"] { --bg:#f1f0fa; --border:rgb(79 70 229 / .20); --primary:#4f46e5; --accent-b:#7c3aed; --focus:#4f46e5; --glow-a:79 70 229; --glow-b:124 58 237; --surface-tint:rgb(79 70 229 / .10); } @media (prefers-color-scheme: dark) { :root[data-theme="teal"] { --bg:#071b1a; --fg:#e6f6f3; --surface:rgb(13 148 136 / .10); --border:rgb(94 234 212 / .20); --input-bg:rgb(2 22 21 / .6); --primary:#2dd4bf; --accent-b:#38bdf8; --focus:#5eead4; --glow-a:13 148 136; --glow-b:56 189 248; --surface-tint:rgb(45 212 191 / .12); } :root[data-theme="emerald"] { --bg:#071a12; --fg:#e6f5ec; --surface:rgb(16 185 129 / .10); --border:rgb(110 231 183 / .20); --input-bg:rgb(2 22 18 / .6); --primary:#34d399; --accent-b:#2dd4bf; --focus:#6ee7b7; --glow-a:16 185 129; --glow-b:45 212 191; --surface-tint:rgb(52 211 153 / .12); } :root[data-theme="indigo"] { --bg:#0d1029; --fg:#eceefb; --surface:rgb(99 102 241 / .12); --border:rgb(165 180 252 / .22); --input-bg:rgb(15 18 45 / .6); --primary:#818cf8; --accent-b:#a78bfa; --focus:#a5b4fc; --glow-a:99 102 241; --glow-b:167 139 250; --surface-tint:rgb(129 140 248 / .14); } } :root[data-mode="dark"][data-theme="teal"] { --bg:#071b1a; --fg:#e6f6f3; --surface:rgb(13 148 136 / .10); --border:rgb(94 234 212 / .20); --input-bg:rgb(2 22 21 / .6); --primary:#2dd4bf; --accent-b:#38bdf8; --focus:#5eead4; --glow-a:13 148 136; --glow-b:56 189 248; --surface-tint:rgb(45 212 191 / .12); } :root[data-mode="dark"][data-theme="emerald"] { --bg:#071a12; --fg:#e6f5ec; --surface:rgb(16 185 129 / .10); --border:rgb(110 231 183 / .20); --input-bg:rgb(2 22 18 / .6); --primary:#34d399; --accent-b:#2dd4bf; --focus:#6ee7b7; --glow-a:16 185 129; --glow-b:45 212 191; --surface-tint:rgb(52 211 153 / .12); } :root[data-mode="dark"][data-theme="indigo"] { --bg:#0d1029; --fg:#eceefb; --surface:rgb(99 102 241 / .12); --border:rgb(165 180 252 / .22); --input-bg:rgb(15 18 45 / .6); --primary:#818cf8; --accent-b:#a78bfa; --focus:#a5b4fc; --glow-a:99 102 241; --glow-b:167 139 250; --surface-tint:rgb(129 140 248 / .14); } * { box-sizing:border-box; } body { margin:0; min-height:100vh; font:16px/1.5 system-ui,sans-serif; background-color:var(--bg); color:var(--fg); background-image:radial-gradient(1200px 620px at 8% -6%, rgb(var(--glow-a) / var(--glow-alpha)), transparent 60%), radial-gradient(1000px 520px at 96% -10%, rgb(var(--glow-b) / var(--glow-alpha)), transparent 55%); background-repeat:no-repeat; background-attachment:fixed; } a { color:inherit; } [hidden] { display:none !important; } .site-header { display:flex; gap:2rem; align-items:center; justify-content:space-between; padding:.9rem 1.5rem; background:var(--surface); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .site-header nav { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; } .brand { font-weight:700; text-decoration:none; color:var(--primary); } .home-link { display:inline-flex; align-items:center; gap:.3rem; padding:.35rem .65rem; border:1px solid var(--border); border-radius:.55rem; background:var(--surface-tint); box-shadow:0 1px 0 rgb(var(--glow-a) / .18); } .home-link:hover, .home-link:focus-visible { border-color:var(--primary); } .user-context { display:inline-flex; gap:.5rem; align-items:center; } .role-label { opacity:.7; font-size:.9em; } .page { max-width:70rem; margin:auto; padding:2rem 1.5rem; } .auth-page { max-width:38rem; } .card { background:var(--surface); border:1px solid var(--border); border-radius:.9rem; padding:1.5rem; box-shadow:var(--shadow); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } label { display:block; margin:1rem 0 .35rem; } input { display:block; width:100%; padding:.65rem; border:1px solid var(--border); border-radius:.5rem; background:var(--input-bg); color:var(--fg); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } button { padding:.6rem 1rem; cursor:pointer; } button:disabled { cursor:wait; opacity:.65; } :focus-visible { outline:3px solid var(--focus); outline-offset:2px; } .message { margin-top:1rem; padding:.75rem; border:1px solid currentColor; border-radius:.3rem; } .message-error { color:var(--danger); } .message-success { color:var(--success); } .message-warning { color:var(--warning); } .message-info { color:var(--info); } @media (max-width:40rem) { .site-header { align-items:flex-start; flex-direction:column; gap:.75rem; } } /* Fase 3: gedeelde paginaschil en componenten. */ :root { --muted:#475569; --radius:.9rem; --shadow:0 18px 45px rgb(15 23 42 / .10); } @media (prefers-color-scheme: dark) { :root { --muted:#94a3b8; --shadow:0 24px 70px rgb(0 0 0 / .45); } } :root[data-mode="dark"] { --muted:#94a3b8; --shadow:0 24px 70px rgb(0 0 0 / .45); } .site-header { border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; } .site-header nav a { position:relative; padding:.45rem .15rem; text-decoration:none; } .site-header nav a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:999px; background:linear-gradient(90deg,var(--primary),var(--accent-b)); transform:scaleX(0); transition:transform .18s ease; } .site-header nav a:hover, .site-header nav a.active, .site-header nav a[aria-current="page"] { color:var(--primary); } .site-header nav a:hover::after, .site-header nav a.active::after, .site-header nav a[aria-current="page"]::after { transform:scaleX(1); } .brand span { font-size:.72em; opacity:.65; } .hero { padding:2.5rem; max-width:50rem; border-radius:1.5rem; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .hero h1, .page-header h1 { margin:.15rem 0 .5rem; line-height:1.15; } .eyebrow { display:inline-block; margin:0 0 .6rem; padding:.3rem .7rem; border-radius:999px; background:rgb(var(--glow-a) / .12); border:1px solid rgb(var(--glow-a) / .30); color:var(--primary); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .page-header { margin-bottom:1.5rem; } .page-header-intro { font-size:1.1rem; } .card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; } .card { border-radius:var(--radius); box-shadow:var(--shadow); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .card h2 { margin-top:0; } .actions { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem; } .button, button { display:inline-block; border:1px solid transparent; border-radius:.6rem; background-image:linear-gradient(135deg,var(--primary),var(--accent-b)); background-color:var(--primary); color:var(--primary-contrast); padding:.6rem 1.1rem; text-decoration:none; font:inherit; box-shadow:0 8px 20px rgb(0 0 0 / .18); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; } .button:hover, button:hover:not(:disabled) { filter:brightness(1.08); box-shadow:0 10px 26px rgb(var(--glow-a) / .35); transform:translateY(-1px); } .button-secondary { background:transparent; color:var(--primary); border:1px solid var(--border); box-shadow:none; } .button-secondary:hover { background:var(--surface-tint); filter:none; box-shadow:none; transform:none; } .narrow-page { max-width:46rem; } .status-page { text-align:center; margin-top:2rem; } .status-code { margin:0; font-size:3rem; font-weight:800; opacity:.45; } .details-list { margin:0; } .details-list div { display:grid; grid-template-columns:minmax(8rem, 1fr) 2fr; gap:1rem; padding:.75rem 0; border-top:1px solid var(--border); } .details-list div:first-child { border-top:0; } .details-list dt { font-weight:700; } .details-list dd { margin:0; overflow-wrap:anywhere; } .loading-overlay { position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:rgb(0 0 0 / .25); } .loading-overlay[hidden] { display:none; } .loading-card { display:flex; gap:.75rem; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.25rem; box-shadow:var(--shadow); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .spinner { width:1.1rem; height:1.1rem; border:.18rem solid var(--border); border-top-color:var(--fg); border-radius:50%; animation:spin .75s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } @media (max-width:40rem) { .details-list div { grid-template-columns:1fr; gap:.2rem; } .hero { padding-top:1rem; } } /* Gebruikersbeheer */ .section-gap { margin-top:1rem; } .section-heading { display:flex; align-items:center; gap:.65rem; } .count-badge { display:inline-grid; place-items:center; min-width:1.5rem; height:1.5rem; padding:0 .4rem; border-radius:999px; background-color:var(--primary); background-image:linear-gradient(135deg,var(--primary),var(--accent-b)); color:var(--primary-contrast); font-size:.78rem; font-weight:800; } .muted { color:var(--muted); } .table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; } th,td { padding:.7rem .6rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--border); } th { font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; } .row-actions { white-space:nowrap; } .row-actions button { margin:.1rem; } select { padding:.45rem; border:1px solid var(--border); border-radius:.4rem; background:var(--input-bg); color:var(--fg); } .theme-switch { display:inline-flex; align-items:center; margin-left:auto; margin-top:0; margin-bottom:0; } .theme-switch select { font-size:.85rem; padding:.3rem .45rem; } .compact-details { margin-top:1rem; } .auth-alternative { margin-top:1.25rem; } /* Learning */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .learning-page { max-width:88rem; } .learning-toolbar { display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem; } .learning-toolbar h2 { margin-top:0; } .segmented-control { display:inline-flex; border:1px solid var(--border); border-radius:.45rem; overflow:hidden; } .segmented-control button { border:0; border-radius:0; background:transparent; color:var(--fg); } .segmented-control button[aria-pressed="true"] { background-color:var(--primary); background-image:linear-gradient(135deg,var(--primary),var(--accent-b)); color:var(--primary-contrast); font-weight:700; } .control-choice { margin:0; padding:0; border:0; }.control-choice legend { margin-bottom:.35rem; font-weight:700; } .analyzer-health-grid { grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); } .analyzer-health-card { width:100%; text-align:left; background:var(--surface); color:var(--fg); } .analyzer-health-card strong,.analyzer-health-card small { display:block; }.analyzer-health-card small { margin-top:.25rem; color:var(--muted); } .analyzer-health-card[aria-pressed="true"] { outline:2px solid var(--primary); outline-offset:2px; background:var(--surface-tint); } .analyzer-control-page { max-width:96rem; } .analyzer-control-page td,.analyzer-control-page th { overflow-wrap:anywhere; } #analyzer-control-filters { display:grid; grid-template-columns:minmax(12rem,.7fr) minmax(18rem,1.3fr) auto; gap:1rem; align-items:end; } #analyzer-control-filters .control-choice { grid-column:1 / -1; } #analyzer-control-filters label { margin:0; } @media (min-width:80rem) { .analyzer-control-page .table-wrap { overflow-x:visible; } } @media (max-width:48rem) { #analyzer-control-filters { grid-template-columns:1fr; } } .learning-summary { display:grid; grid-template-columns:repeat(4,minmax(8rem,1fr)); gap:1rem; margin:0; } .learning-summary div { min-width:0; } .learning-summary dt { color:var(--muted); font-size:.82rem; } .learning-summary dd { margin:.15rem 0 0; font-size:1.15rem; font-weight:750; } .learning-form-grid { display:grid; grid-template-columns:repeat(3,minmax(12rem,1fr)); gap:1rem; } .learning-results { display:grid; gap:1rem; } .learning-analyzer { padding:1rem; } .learning-analyzer h3 { margin:.15rem .5rem .75rem; } .learning-analyzer table { min-width:76rem; } .learning-analyzer td, .learning-analyzer th { white-space:nowrap; } .learning-analyzer small { color:var(--muted); } .score-label { margin:0; min-width:5.5rem; } .score-input { margin:0; min-width:5.5rem; padding:.4rem; } .metric { font-weight:750; } .metric-positive { color:var(--success); } .metric-warning { color:var(--warning); } .metric-negative { color:var(--danger); } .metric-neutral { color:var(--muted); } @media (max-width:50rem) { .learning-toolbar { flex-direction:column; } .learning-summary { width:100%; grid-template-columns:repeat(2,1fr); } .learning-form-grid { grid-template-columns:1fr; } .learning-analyzer .table-wrap { overflow:visible; } .learning-analyzer table, .learning-analyzer tbody { display:block; min-width:0; } .learning-analyzer thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } .learning-analyzer tr { display:grid; grid-template-columns:1fr 1fr; gap:.35rem 1rem; padding:1rem 0; border-bottom:1px solid var(--border); } .learning-analyzer tr:last-child { border-bottom:0; } .learning-analyzer th[scope="row"] { grid-column:1/-1; border:0; padding:.2rem 0; font-size:1.05rem; } .learning-analyzer td { display:flex; justify-content:space-between; gap:.75rem; border:0; padding:.2rem 0; white-space:normal; } .learning-analyzer td::before { color:var(--muted); font-size:.78rem; } .learning-analyzer td:nth-child(2)::before { content:"Metingen"; } .learning-analyzer td:nth-child(3)::before { content:"Stijging"; } .learning-analyzer td:nth-child(4)::before { content:"Daling"; } .learning-analyzer td:nth-child(5)::before { content:"Gemiddeld"; } .learning-analyzer td:nth-child(6)::before { content:"Mediaan"; } .learning-analyzer td:nth-child(7)::before { content:"Verwachting"; } .learning-analyzer td:nth-child(8)::before { content:"Goed / fout"; } .learning-analyzer td:nth-child(9)::before { content:"Succes"; } .learning-analyzer td:nth-child(10)::before { content:"Score"; } } @media (max-width:32rem) { .learning-summary, .learning-analyzer tr { grid-template-columns:1fr; } } /* Proeftuin — automatische scoremotor */ .proeftuin-page { max-width:88rem; } .proeftuin-toolbar { display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem; } .proeftuin-toolbar h2, .scoremotor-rule h2 { margin-top:0; } .proeftuin-summary { display:grid; grid-template-columns:repeat(4,minmax(8rem,1fr)); gap:1rem; margin:0; } .proeftuin-summary dt { color:var(--muted); font-size:.82rem; } .proeftuin-summary dd { margin:.15rem 0 0; font-size:1.15rem; font-weight:750; } .scoremotor-rule { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; } .scoremotor-rule p { margin-bottom:0; } .scoremotor-rule > span { white-space:nowrap; } .scoremotor-results { display:grid; gap:1rem; } .experiment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; } .experiment-card { display:grid; gap:1rem; } .experiment-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; } .experiment-card h3 { margin:.2rem 0 0; } .experiment-leader { border-color:var(--success); } .experiment-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; margin:0; } .experiment-metrics dt { color:var(--muted); font-size:.78rem; } .experiment-metrics dd { margin:.15rem 0 0; font-weight:750; } .experiment-choice, .experiment-position { margin:0; } .scoremotor-analyzer { padding:1rem; } .scoremotor-analyzer h3 { margin:.15rem .5rem .75rem; } .scoremotor-analyzer table { min-width:66rem; } .score-value { font-size:1.05rem; } .excluded-analyzer { display:flex; justify-content:space-between; gap:1rem; border-style:dashed; } .excluded-analyzer span { color:var(--muted); } .tasks-page { max-width:88rem; } .task-summary { margin-bottom:1.5rem; } .task-results { display:grid; gap:1rem; } .task-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; } .task-card h3 { margin:.2rem 0 0; } .task-card code { overflow-wrap:anywhere; } .stream-summary { margin-bottom:1.5rem; } .stream-legend { display:flex; flex-wrap:wrap; gap:.7rem 1.2rem; margin:.5rem 0 1rem; color:var(--muted); } .stream-legend span,.stream-state { display:inline-flex; align-items:center; gap:.45rem; } .status-dot { width:.7rem; height:.7rem; border-radius:50%; display:inline-block; background:#929292; flex:0 0 auto; } .status-dot.green { background:var(--success); }.status-dot.yellow { background:var(--warning); } .status-dot.red { background:var(--danger); }.status-dot.gray { background:#929292; } .stream-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)); gap:1rem; } .stream-card { border-left:5px solid #929292; }.stream-card.stream-green { border-left-color:var(--success); } .stream-card.stream-yellow { border-left-color:var(--warning); }.stream-card.stream-red { border-left-color:var(--danger); } .stream-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; } .stream-card h3 { margin:.2rem 0 0; }.stream-state { font-weight:700; text-align:right; } .stream-time { color:var(--muted); font-size:.9rem; } .stream-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; margin:1rem 0; } .stream-metrics div { background:rgba(127,127,127,.08); border-radius:.4rem; padding:.65rem; } .stream-metrics dt { color:var(--muted); font-size:.78rem; }.stream-metrics dd { margin:.2rem 0 0; font-weight:700; overflow-wrap:anywhere; } .stream-details-button { margin-top:.2rem; }.stream-details { margin-top:.8rem; }.stream-details ul { margin-bottom:0; padding-left:1.4rem; } @media (max-width:520px){.stream-grid{grid-template-columns:1fr}.stream-metrics{grid-template-columns:1fr}} .history-open { padding:.35rem .6rem; } .scoremotor-history { scroll-margin-top:6rem; } .history-heading { justify-content:space-between; } .history-heading h2 { margin:.15rem 0; } .history-current { display:grid; grid-template-columns:repeat(4,minmax(8rem,1fr)); gap:1rem; padding:1rem 0; margin:1rem 0; border-block:1px solid var(--border); } .history-current dt { color:var(--muted); font-size:.82rem; } .history-current dd { margin:.15rem 0 0; font-size:1.15rem; font-weight:750; } .history-table { min-width:58rem; } .history-content .message { margin-bottom:0; } @media (max-width:50rem) { .experiment-grid { grid-template-columns:1fr; } .experiment-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .proeftuin-toolbar, .scoremotor-rule { flex-direction:column; } .proeftuin-summary { width:100%; grid-template-columns:repeat(2,1fr); } .scoremotor-analyzer .table-wrap { overflow:visible; } .scoremotor-analyzer table, .scoremotor-analyzer tbody { display:block; min-width:0; } .scoremotor-analyzer thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } .scoremotor-analyzer tr { display:grid; grid-template-columns:1fr 1fr; gap:.35rem 1rem; padding:1rem 0; border-bottom:1px solid var(--border); } .scoremotor-analyzer tr:last-child { border-bottom:0; } .scoremotor-analyzer th[scope="row"] { grid-column:1/-1; border:0; padding:.2rem 0; font-size:1.05rem; } .scoremotor-analyzer td { display:flex; justify-content:space-between; gap:.75rem; border:0; padding:.2rem 0; } .scoremotor-analyzer td::before { color:var(--muted); font-size:.78rem; } .scoremotor-analyzer td:nth-child(2)::before { content:"Verwachting"; } .scoremotor-analyzer td:nth-child(3)::before { content:"Metingen"; } .scoremotor-analyzer td:nth-child(4)::before { content:"Goed"; } .scoremotor-analyzer td:nth-child(5)::before { content:"Fout"; } .scoremotor-analyzer td:nth-child(6)::before { content:"Trefkans"; } .scoremotor-analyzer td:nth-child(7)::before { content:"Score"; } .scoremotor-analyzer td:nth-child(8)::before { content:"Laatste verwerking"; } .scoremotor-analyzer td:nth-child(9)::before { content:"Ontwikkeling"; } .excluded-analyzer { flex-direction:column; } .history-current { grid-template-columns:repeat(2,1fr); } } @media (max-width:32rem) { .proeftuin-summary, .scoremotor-analyzer tr, .history-current, .experiment-metrics { grid-template-columns:1fr; } } /* Wat is er anders? */ .change-details > summary { list-style:none; cursor:pointer; display:inline-block; padding:.6rem 1.1rem; border-radius:.6rem; color:var(--primary); border:1px solid var(--border); box-shadow:none; } .change-details > summary::-webkit-details-marker { display:none; } .change-details > summary:hover { background:var(--surface-tint); } .change-details[open] > summary { background:var(--surface-tint); } .change-details .table-wrap { margin-top:1.1rem; } .change-details table { min-width:46rem; } .change-details caption { text-align:left; margin-bottom:.5rem; } .change-details th[scope="row"] { width:11rem; font-size:.9rem; text-transform:none; letter-spacing:0; } /* Scans-overzicht */ .scans-page { max-width: 88rem; } .scan-retry-explanation { margin-bottom: 1rem; } .scan-retry-explanation p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; } .scan-summary { margin-bottom: 1.5rem; } .scan-retry-summary { margin: .9rem 0 0; padding-top: .9rem; border-top: 1px solid var(--border); font-weight: 700; } .scan-results { display: grid; gap: .75rem; } .scan-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-left: 5px solid #929292; } .scan-row.scan-ok { border-left-color: var(--success); } .scan-row.scan-fail { border-left-color: var(--danger); } .scan-row.scan-retry { border-left-color: var(--warning); } .scan-row.scan-open { border-left-color: var(--warning); } .scan-row-main { display: grid; gap: .35rem; min-width: 0; flex: 1; } .scan-row-type h3 { margin: .15rem 0 0; } .scan-row-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: var(--muted); font-size: .92rem; } .scan-row-status { font-weight: 750; white-space: nowrap; flex: 0 0 auto; } .scan-row-clickable { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .scan-row-clickable:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(24, 38, 28, .12); } .scan-row-clickable:focus-visible { outline: 3px solid color-mix(in srgb, var(--success) 45%, transparent); outline-offset: 2px; } .scan-row-actions { display: grid; justify-items: end; gap: .35rem; flex: 0 0 auto; } .scan-row-open { color: var(--primary); font-size: .84rem; font-weight: 750; white-space: nowrap; } .scan-detail-dialog { width: min(96rem, calc(100vw - 1.5rem)); max-width: none; max-height: calc(100vh - 2rem); padding: 0; border: 1px solid var(--border); border-radius: 1rem; background: var(--bg); color: var(--text); box-shadow: 0 24px 80px rgba(0, 0, 0, .28); } .scan-detail-dialog::backdrop { background: rgba(10, 18, 13, .62); backdrop-filter: blur(2px); } .scan-detail-shell { max-height: calc(100vh - 2rem); padding: clamp(1rem, 2vw, 1.75rem); overflow-y: auto; background: var(--bg); } .scan-detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .scan-detail-header h2 { margin: .2rem 0 .35rem; } .scan-detail-header p { margin-bottom: 0; } .scan-detail-close { width: 2.5rem; height: 2.5rem; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); font-size: 1.65rem; line-height: 1; cursor: pointer; } .scan-detail-note { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: .7rem; background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--fg); } .scan-detail-content { display: grid; width: 100%; gap: 1rem; margin-top: 1.25rem; } .scan-detail-record { padding: 1rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--surface-raised, var(--surface)); } .scan-detail-record h3 { margin: 0 0 .8rem; } .scan-detail-record dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1rem; margin: 0; } .scan-detail-run dl { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); } .scan-detail-run .scan-detail-field:has(dd .scan-detail-json) { grid-column: 1 / -1; } .scan-detail-field { min-width: 0; } .scan-detail-field dt { color: var(--muted); font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; } .scan-detail-field dd { margin: .18rem 0 0; overflow-wrap: anywhere; } .scan-detail-datetime { font-variant-numeric: tabular-nums; white-space: nowrap; } .scan-detail-json { max-height: 18rem; margin: .25rem 0 0; padding: .7rem; overflow: auto; border-radius: .55rem; background: var(--bg); font-size: .78rem; white-space: pre-wrap; } .scan-analyzer-status-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: .65rem; } .scan-analyzer-status-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .scan-analyzer-status-table th { padding: .55rem .7rem; background: color-mix(in srgb, var(--bg) 90%, var(--primary) 10%); color: var(--muted); font-size: .75rem; letter-spacing: .04em; text-align: left; text-transform: uppercase; } .scan-analyzer-status-table td { width: 50%; padding: .48rem .7rem; border-top: 1px solid var(--border); } .scan-analyzer-status-table td:first-child { font-weight: 700; } .scan-analyzer-detail-panel { width: 100%; } .scan-analyzer-detail-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; } .scan-analyzer-detail-heading strong { color: var(--primary); font-size: 1rem; } .scan-analyzer-detail-heading span { color: var(--muted); font-size: .8rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; } .scan-status-badge { display: inline-flex; align-items: center; min-height: 1.55rem; padding: .18rem .55rem; border: 1px solid transparent; border-radius: 999px; font-size: .78rem; font-weight: 800; line-height: 1.15; white-space: nowrap; } .scan-status-badge.status-positive { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); border-color: color-mix(in srgb, var(--success) 35%, transparent); } .scan-status-badge.status-negative { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); } .scan-status-badge.status-very-high { color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); border-color: color-mix(in srgb, var(--danger) 42%, transparent); } .scan-status-badge.status-high { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); border-color: color-mix(in srgb, var(--warning) 35%, transparent); } .scan-status-badge.status-normal { color: var(--info); background: color-mix(in srgb, var(--info) 13%, transparent); border-color: color-mix(in srgb, var(--info) 32%, transparent); } .scan-status-badge.status-low { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); border-color: color-mix(in srgb, var(--primary) 30%, transparent); } .scan-status-badge.status-insufficient { color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); border-color: color-mix(in srgb, var(--warning) 26%, transparent); } .scan-status-badge.status-na, .scan-status-badge.status-neutral { color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, transparent); border-color: color-mix(in srgb, var(--muted) 25%, transparent); } .scan-structured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .6rem 1rem; margin: .2rem 0 0; } .scan-structured-grid > div { min-width: 0; padding: .45rem .55rem; border-left: 2px solid var(--border); } .scan-structured-grid dt { color: var(--muted); font-size: .74rem; font-weight: 750; text-transform: uppercase; } .scan-structured-grid dd { margin: .18rem 0 0; } .scan-structured-values { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 0; padding: 0; list-style: none; } .scan-structured-values li { padding: .18rem .45rem; border-radius: .4rem; background: var(--surface-tint); } .scan-structured-stack { display: grid; gap: .55rem; } .scan-structured-stack > section { padding: .6rem; border: 1px solid var(--border); border-radius: .5rem; } .scan-technical-details { margin-top: .35rem; } .scan-technical-details summary { color: var(--muted); cursor: pointer; font-size: .82rem; font-weight: 700; } .scan-detail-results-section { min-width: 0; } .scan-detail-results-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; } .scan-detail-results-heading h3 { margin: 0; } .scan-detail-results-heading h3 span { color: var(--muted); font-size: .9rem; font-weight: 650; } .scan-detail-sort { display: flex; align-items: center; gap: .55rem; margin: 0; color: var(--muted); font-size: .86rem; font-weight: 700; } .scan-detail-sort select { min-width: 12rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--input-bg); color: var(--fg); } .scan-detail-table-wrap { width: 100%; max-height: 62vh; overflow: auto; overflow-anchor: none; scroll-padding-top: 2.5rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); } .scan-detail-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; line-height: 1.35; } .scan-detail-table th { position: sticky; top: 0; z-index: 2; padding: .7rem .65rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 92%, var(--primary) 8%); color: var(--muted); font-size: .76rem; letter-spacing: .035em; text-align: left; text-transform: uppercase; white-space: nowrap; } .scan-detail-table td { padding: .62rem .65rem; border-bottom: 1px solid var(--border); vertical-align: top; } .scan-detail-table-row { cursor: pointer; } .scan-detail-table tbody > .scan-detail-table-row:first-child { scroll-margin-top: 2.5rem; } .scan-detail-table-row:hover td, .scan-detail-table-row[aria-expanded="true"] td { background: var(--surface-tint); } .scan-detail-table-row:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; } .scan-detail-table tbody tr:last-child td { border-bottom: 0; } .scan-detail-news-table { min-width: 76rem; table-layout: fixed; } .scan-detail-news-table .scan-col-ticker { width: 7rem; } .scan-detail-news-table .scan-col-published_at { width: 10.5rem; } .scan-detail-news-table .scan-col-source { width: 8.5rem; } .scan-detail-news-table .scan-col-title { width: 18rem; } .scan-detail-news-table .scan-col-summary { width: auto; } .scan-detail-news-table .scan-col-url { width: 9rem; } .scan-table-ticker { display: inline-flex; padding: .18rem .45rem; border-radius: .4rem; background: var(--surface-tint); color: var(--primary); font-weight: 800; white-space: nowrap; } .scan-table-source { display: inline-block; max-width: 100%; overflow: hidden; color: var(--fg); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .scan-table-time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .scan-table-clamp { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; } .scan-table-clamp-title { font-weight: 700; -webkit-line-clamp: 2; } .scan-table-clamp-summary { color: var(--muted); -webkit-line-clamp: 2; } .scan-detail-expanded-row td { padding: 1rem 1.25rem 1.2rem; background: color-mix(in srgb, var(--surface-tint) 55%, var(--bg)); } .scan-detail-expanded-heading { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; } .scan-detail-expanded-heading span { color: var(--muted); font-size: .82rem; } .scan-detail-expanded-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem 1.25rem; margin: 0; } .scan-detail-expanded-grid .scan-detail-field:has(.scan-detail-json), .scan-detail-expanded-grid .scan-detail-field:has(dd a) { grid-column: 1 / -1; } @media (max-width: 40rem) { .scan-row { flex-direction: column; align-items: flex-start; } .scan-row-status { align-self: flex-start; } .scan-row-actions { justify-items: start; } .scan-detail-record dl { grid-template-columns: 1fr; } .scan-detail-dialog { width: calc(100vw - .75rem); max-height: calc(100vh - .75rem); } .scan-detail-shell { max-height: calc(100vh - .75rem); padding: .9rem; } .scan-detail-results-heading { align-items: stretch; flex-direction: column; } .scan-detail-sort { align-items: stretch; flex-direction: column; } .scan-detail-expanded-grid { grid-template-columns: 1fr; } } /* Analyzer-analyse */ .analyzer-analysis-toolbar { display:flex; justify-content:space-between; gap:2rem; align-items:center; } .analyzer-analysis-toolbar > div:first-child { display:flex; align-items:center; gap:1rem; } .analysis-ranking { display:grid; gap:1rem; } .analysis-rank-card { border-left:3px solid var(--primary); } .analysis-rank-card h3 { margin:.35rem 0 1.5rem; font-size:1.35rem; } .analysis-rank-number { color:var(--primary); font-weight:800; } .analysis-reliability { font-size:2rem; line-height:1; font-weight:800; margin:.35rem 0 .75rem; } @media (max-width:50rem) { .analyzer-analysis-toolbar { align-items:stretch; flex-direction:column; } .analyzer-analysis-toolbar > div:first-child { align-items:flex-start; flex-direction:column; } } .analysis-rank-card.performance-red { border-left-color: var(--danger); } .analysis-rank-card.performance-orange { border-left-color: var(--warning); } .analysis-rank-card.performance-green { border-left-color: var(--success); } .performance-red-text { color: var(--danger); } .performance-orange-text { color: var(--warning); } .performance-green-text { color: var(--success); } .analysis-settings-form { display:flex; gap:.75rem; align-items:end; flex-wrap:wrap; } .analysis-settings-form label { display:flex; flex-direction:column; gap:.35rem; font-weight:700; } .analysis-settings-form input { width:9rem; } /* Hoofdnavigatie en tegelpagina's */ .header-left { display:flex; align-items:center; gap:1.25rem; flex:0 0 auto; } .release-link { color:var(--muted); font-size:.92rem; font-weight:700; text-decoration:none; padding:.35rem .65rem; border-left:1px solid var(--border); } .release-link:hover, .release-link.active, .release-link[aria-current="page"] { color:var(--primary); } .hub-grid { align-items:stretch; } .hub-tile { display:block; color:inherit; text-decoration:none; transition:transform .15s ease, border-color .15s ease, background-color .15s ease; } .hub-tile:hover { transform:translateY(-2px); border-color:var(--primary); background-color:var(--surface-tint); } .hub-tile h2 { margin-bottom:.35rem; } .hub-tile p { color:var(--muted); } .hub-tile span { color:var(--primary); font-weight:700; } .home-group > .section-heading { margin-bottom:.75rem; } .home-group > .section-heading h2 { margin:0; } .home-group[data-home-access] { padding-top:1.25rem; border-top:1px solid var(--border); } .home-public-layout { display:grid; gap:1rem; } .home-primary-tile { padding:1.75rem; border-color:rgb(var(--glow-a) / .45); background:var(--surface-tint); } .home-primary-tile h2 { font-size:1.55rem; } .home-primary-tile .eyebrow { margin-bottom:.45rem; } .home-secondary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; } .home-info-link { display:flex; align-items:center; gap:.75rem 1.25rem; padding:.8rem 1rem; border:1px solid var(--border); border-radius:var(--radius); color:inherit; text-decoration:none; background:var(--surface); } .home-info-link h2 { margin:0; font-size:1rem; } .home-info-link p { margin:0; color:var(--muted); flex:1; } .home-info-link span { color:var(--primary); font-weight:700; white-space:nowrap; } .home-info-link:hover, .home-info-link:focus-visible { border-color:var(--primary); } @media (max-width:48rem) { .home-secondary-grid { grid-template-columns:1fr; } } @media (max-width:34rem) { .home-info-link { align-items:flex-start; flex-direction:column; } } @media (max-width:40rem) { .header-left { width:100%; justify-content:space-between; } } /* Home splash */ .home-splash { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; min-height:100vh; min-height:100dvh; overflow:hidden; isolation:isolate; color:#f5f8ff; background:radial-gradient(circle at 50% 42%,rgba(41,151,255,.12),transparent 34%),linear-gradient(145deg,#071024,#030611 72%); cursor:pointer; opacity:1; transition:opacity .18s ease; } .home-splash.is-leaving { opacity:0; pointer-events:none; } .home-splash[hidden] { display:none!important; } .home-splash-ambient { position:absolute; inset:0; background:radial-gradient(circle at 72% 62%,rgba(49,214,186,.07),transparent 28%); pointer-events:none; } .home-splash-chart { position:absolute; inset:14% 6% 10%; width:88%; height:76%; opacity:.82; } .home-splash-grid line { stroke:rgba(143,161,189,.11); stroke-width:1; vector-effect:non-scaling-stroke; } .home-splash-chart-reveal { clip-path:url(#homeSplashChartReveal); } .home-splash-reveal-window { width:0; animation:home-splash-reveal-chart 3.8s cubic-bezier(.4,0,.15,1) .35s forwards; } .home-splash-area { fill:url(#homeSplashAreaGradient); opacity:.45; } .home-splash-price-line { fill:none; stroke:url(#homeSplashLineGradient); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 8px rgba(41,151,255,.65)); } .home-splash-end-dot { fill:#31d6ba; filter:drop-shadow(0 0 8px #31d6ba); } .home-splash-identity { position:relative; z-index:2; display:grid; justify-items:center; text-align:center; transform:translateY(-1vh); } .home-splash-logo { width:clamp(9rem,18vw,14rem); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:rgba(7,14,29,.72); box-shadow:0 0 0 1px rgba(143,161,189,.16),0 28px 80px rgba(0,0,0,.45),0 0 70px rgba(41,151,255,.11); opacity:0; transform:scale(.92); animation:home-splash-identity-in 1.1s cubic-bezier(.2,.8,.2,1) 1.4s forwards; backdrop-filter:blur(10px); } .home-splash-logo img { display:block; width:88%; height:88%; object-fit:contain; } .home-splash-identity h1 { margin:1.35rem 0 .35rem; font-size:clamp(2rem,5vw,4rem); line-height:1; letter-spacing:-.045em; opacity:0; transform:translateY(12px); animation:home-splash-text-in .8s ease 2.25s forwards; text-shadow:0 4px 28px rgba(0,0,0,.55); } .home-splash-identity h1 span { color:#2997ff; } .home-splash-tagline { margin:.55rem 0 0; color:#8fa1bd; font-size:clamp(.75rem,1.4vw,.95rem); font-weight:750; letter-spacing:.22em; text-transform:uppercase; opacity:0; animation:home-splash-text-in .8s ease 2.75s forwards; } @keyframes home-splash-reveal-chart { to { width:1215px; } } @keyframes home-splash-identity-in { to { opacity:1; transform:scale(1); } } @keyframes home-splash-text-in { to { opacity:1; transform:translateY(0); } } @media (prefers-reduced-motion:reduce) { .home-splash { transition:none; } .home-splash-reveal-window { animation:none; width:1215px; } .home-splash-logo,.home-splash-identity h1,.home-splash-tagline { animation:none; opacity:1; transform:none; } } @media (max-width:40rem) { .home-splash-chart { inset:18% -22% 12%; width:144%; } .home-splash-tagline { letter-spacing:.14em; } } .parent-back { display:inline-flex; align-items:center; gap:.35rem; margin:0 0 1.15rem; color:var(--primary); font-weight:700; text-decoration:none; } .parent-back:hover { text-decoration:underline; } /* Strategietest — historische vergelijking */ .strategy-test-page { max-width:78rem; } .strategy-explanation h2 { margin-top:0; } .strategy-explanation p { margin-bottom:0; } .strategy-result-panel { padding:1.5rem; } .strategy-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; } .strategy-toolbar > div { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; } .strategy-segmented { display:inline-flex; } .strategy-choice-panel { margin:1rem 0 0; padding:1rem; border:1px solid rgb(var(--glow-a) / .55); border-radius:.75rem; background:var(--surface-tint); } .strategy-choice-panel .eyebrow { margin-bottom:.45rem; } .strategy-choice-card { display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap; } .strategy-choice-card strong { font-size:1.05rem; } .strategy-choice-card span { color:var(--muted); } .strategy-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; margin-top:1rem; } .strategy-result-card { padding:1rem; border-top:3px solid var(--border); min-width:0; } .strategy-result-card.strategy-positive { border-top-color:var(--success); } .strategy-result-card.strategy-negative { border-top-color:var(--danger); } .strategy-result-card.strategy-neutral { border-top-color:var(--muted); } .strategy-result-card.strategy-unavailable { border-top-color:var(--border); } .strategy-result-card.strategy-leader { outline:1px solid var(--success); } .strategy-card-kicker { margin:0 0 .2rem; color:var(--primary); font-size:.7rem; font-weight:800; letter-spacing:.08em; } .strategy-result-card h3 { margin:.15rem 0 .65rem; } .strategy-end-value { font-size:1.45rem; font-weight:850; margin-bottom:.15rem; } .strategy-return { display:block; margin-bottom:.75rem; } .strategy-positive-text { color:var(--success); }.strategy-negative-text { color:var(--danger); }.strategy-neutral-text { color:var(--muted); } .strategy-result-card p:last-child { margin-bottom:0; font-size:.9rem; } .strategy-conclusion { display:grid; gap:.2rem; margin-top:1rem; padding:.9rem 1rem; border-left:3px solid var(--primary); border-radius:.4rem; background:var(--surface-tint); } .strategy-conclusion span { color:var(--primary); font-size:.7rem; font-weight:800; letter-spacing:.08em; } .strategy-details-action { display:flex; justify-content:center; margin-top:1rem; } .strategy-position-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; } .strategy-position-card { border:1px solid var(--border); border-radius:.75rem; padding:1rem; } .strategy-position-card h3 { margin:.1rem 0 .75rem; } .strategy-position-card dl { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; } .strategy-position-card dt { color:var(--muted); font-size:.78rem; }.strategy-position-card dd { margin:.1rem 0 0; font-weight:700; } .strategy-detail-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; } .strategy-detail-periods { display:grid; gap:1.25rem; } .strategy-period-block > header { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.65rem; } .strategy-period-block > header h3 { margin:0; } .strategy-period-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; } .strategy-period-track { padding:1rem; } .strategy-period-track h3 { margin:.1rem 0 .75rem; } .strategy-period-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; margin:0; } .strategy-period-metrics div { padding:.5rem; border-radius:.4rem; background:rgba(127,127,127,.07); } .strategy-period-metrics dt { color:var(--muted); font-size:.75rem; }.strategy-period-metrics dd { margin:.1rem 0 0; font-weight:700; overflow-wrap:anywhere; } @media (max-width:64rem){.strategy-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.strategy-position-grid{grid-template-columns:1fr 1fr;}} @media (max-width:44rem){.strategy-toolbar,.strategy-detail-toolbar{align-items:flex-start;flex-direction:column}.strategy-summary-grid,.strategy-position-grid,.strategy-period-grid{grid-template-columns:1fr}.strategy-position-card dl,.strategy-period-metrics{grid-template-columns:1fr}} .strategy-selection-grid { display:grid; gap:1rem; } .strategy-selection-horizon { display:grid; gap:.65rem; } .strategy-selection-horizon + .strategy-selection-horizon { padding-top:1rem; border-top:1px solid var(--border); } .strategy-selection-horizon-title { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; } .strategy-selection-horizon-title h3 { margin:0; } .strategy-selection-strategy-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; } .strategy-selection-card { border:1px solid var(--border); border-radius:.75rem; padding:1rem; background:var(--surface); } .strategy-selection-card h3 { margin:.15rem 0 .75rem; } .strategy-selection-card dl { margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; } .strategy-selection-card dt { color:var(--muted); font-size:.78rem; } .strategy-selection-card dd { margin:.1rem 0 0; font-weight:700; } /* Overzicht — compact gebruikersdashboard */ .dashboard-page { max-width:82rem; } .dashboard-toolbar { display:flex; align-items:center; gap:.75rem; padding:1rem 1.25rem; } .dashboard-toolbar #dashboard-status { margin-left:auto; } .dashboard-result-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; } .dashboard-result-card { display:grid; gap:.35rem; padding:1rem; min-width:0; } .dashboard-value { font-size:1.25rem; } .dashboard-result-card small { margin-top:.25rem; } .dashboard-choice { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; } .dashboard-choice-item { min-width:0; } .dashboard-choice h3 { margin:.25rem 0 .75rem; font-size:1.4rem; } .dashboard-choice dl { display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; margin:0; } .dashboard-choice dt { color:var(--muted); font-size:.78rem; } .dashboard-choice dd { margin:.1rem 0 0; font-weight:700; } .dashboard-recent-table { min-width:42rem; } @media (max-width:52rem) { .dashboard-result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:40rem) { .dashboard-choice { grid-template-columns:1fr; } } @media (max-width:34rem) { .dashboard-result-grid { grid-template-columns:1fr; } .dashboard-toolbar { align-items:flex-start; flex-wrap:wrap; } .dashboard-toolbar #dashboard-status { width:100%; margin-left:0; } } .strategy-selection-empty { opacity:.78; } @media (max-width:64rem){.strategy-selection-strategy-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.strategy-selection-card dl{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:44rem){.strategy-selection-strategy-grid,.strategy-selection-card dl{grid-template-columns:1fr;}.strategy-selection-horizon-title{align-items:flex-start;flex-direction:column;gap:.2rem;}} /* Strategietest — duurzaam keuze-auditbewijs */ .strategy-audit-grid { display:grid; gap:1rem; } .strategy-audit-card { border:1px solid var(--border); border-radius:.75rem; padding:1rem; background:var(--surface); min-width:0; } .strategy-audit-meta { display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin:.25rem 0 .5rem; font-size:.82rem; } .strategy-audit-meta span { color:var(--muted); } .strategy-audit-meta strong { color:var(--text); } .strategy-audit-rule { margin:.35rem 0 .75rem; font-size:.8rem; } .strategy-audit-table-wrap { overflow-x:auto; } .strategy-audit-table { width:100%; min-width:44rem; border-collapse:collapse; } .strategy-audit-table th,.strategy-audit-table td { padding:.55rem .5rem; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; } .strategy-audit-table th { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; } .strategy-audit-table td small { display:block; color:var(--muted); margin-top:.12rem; } .strategy-audit-selected { background:var(--surface-tint); } .strategy-audit-picked { display:inline-block; margin:.2rem 0 0 .4rem; padding:.08rem .35rem; border:1px solid rgb(var(--glow-a) / .55); border-radius:999px; color:var(--primary); font-size:.62rem; font-weight:800; letter-spacing:.05em; } .strategy-audit-details { margin-top:.85rem; padding-top:.7rem; border-top:1px solid var(--border); } .strategy-audit-details > summary,.strategy-audit-table summary { cursor:pointer; font-weight:700; color:var(--primary); } .strategy-audit-contributions { list-style:none; padding:0; margin:.5rem 0 0; display:grid; gap:.25rem; min-width:16rem; } .strategy-audit-contributions li { display:flex; justify-content:space-between; gap:1rem; font-size:.78rem; } .strategy-audit-contributions li span { color:var(--muted); } @media (max-width:44rem) { .strategy-audit-card { padding:.8rem; } .strategy-audit-table { min-width:40rem; } }