/** * Pols — Frontend Application Layer stylesheet (Phase 4) * * Styles the standalone HTML pages served at /pols/* (dashboard, editor, * settings, presenters, login, network). No WordPress theme or admin * chrome is loaded — this stylesheet is the entire visual foundation. * * Branding CSS custom properties (--pols-primary, --pols-secondary, * --pols-tertiary, --pols-font) are injected per-site via Pols\Branding. */ /*────────────────────────────────────────── * Base tokens *────────────────────────────────────────*/ :root { /* Pols brand defaults — overridden per institution by Branding::render_css_vars() emitted in . These values exist as a graceful-degradation fallback only and are not meaningful in any production deployment. */ --pols-primary: #1a6e7a; --pols-primary-on: #ffffff; --pols-secondary: #e88c2a; --pols-secondary-on: #ffffff; --pols-accent-on: #ffffff; --pols-tertiary: #2e7d32; --pols-tertiary-on: #ffffff; --pols-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --pols-bg: #f5f6f8; --pols-surface: #ffffff; --pols-surface-alt: #fafbfc; --pols-border: #e3e6eb; --pols-border-soft: #eef0f3; --pols-text: #1b2733; --pols-text-muted: #6b7785; --pols-text-faint: #93a0af; --pols-danger: #c62828; --pols-warning: #ed6c02; --pols-success: #2e7d32; --pols-radius: 10px; --pols-radius-sm: 6px; --pols-radius-lg: 16px; --pols-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --pols-shadow: 0 4px 12px rgba(16, 24, 40, 0.08); --pols-shadow-lg: 0 12px 40px rgba(16, 24, 40, 0.12); --pols-nav-height: 60px; } /*────────────────────────────────────────── * Reset / base *────────────────────────────────────────*/ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body.pols-app { font-family: var(--pols-font); color: var(--pols-text); background: var(--pols-bg); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; } .pols-app h1, .pols-app h2, .pols-app h3, .pols-app h4 { margin: 0 0 12px; color: var(--pols-text); line-height: 1.25; } .pols-app h1 { font-size: 24px; font-weight: 600; } .pols-app h2 { font-size: 18px; font-weight: 600; } .pols-app h3 { font-size: 15px; font-weight: 600; } .pols-app p { margin: 0 0 12px; } .pols-app a:not(.pols-btn) { color: var(--pols-primary); text-decoration: none; } .pols-app a:not(.pols-btn):hover { text-decoration: underline; } /*────────────────────────────────────────── * Top navigation bar *────────────────────────────────────────*/ .pols-app-nav { background: var(--pols-surface); border-bottom: 1px solid var(--pols-border); height: var(--pols-nav-height); position: sticky; top: 0; z-index: 100; box-shadow: var(--pols-shadow-sm); } .pols-app-nav__inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; gap: 32px; } .pols-app-nav__brand { display: flex; align-items: center; gap: 10px; color: var(--pols-primary); text-decoration: none; font-weight: 600; } .pols-app-nav__brand:hover { text-decoration: none; } .pols-app-nav__logo { max-height: 32px; max-width: 140px; display: block; } .pols-app-nav__title { font-size: 16px; color: var(--pols-text); } .pols-app-nav__links { display: flex; gap: 4px; flex: 1; } .pols-app-nav__link { padding: 8px 14px; border-radius: var(--pols-radius-sm); color: var(--pols-text-muted); font-size: 14px; font-weight: 500; transition: background 0.15s, color 0.15s; } .pols-app-nav__link:hover { background: var(--pols-surface-alt); color: var(--pols-text); text-decoration: none; } .pols-app-nav__link.is-active { background: color-mix(in srgb, var(--pols-primary) 10%, transparent); color: var(--pols-primary); } .pols-app-nav__user { position: relative; } .pols-app-nav__user-toggle { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: transparent; border: 1px solid var(--pols-border); border-radius: var(--pols-radius-sm); color: var(--pols-text); font: inherit; font-size: 14px; cursor: pointer; transition: border-color 0.15s; } .pols-app-nav__user-toggle:hover { border-color: var(--pols-primary); } .pols-app-nav__user-chevron { font-size: 11px; color: var(--pols-text-muted); transition: transform 0.15s ease; display: inline-block; } /* Rotate the chevron 180deg when the dropdown is open */ .pols-app-nav__user-toggle[aria-expanded="true"] .pols-app-nav__user-chevron { transform: rotate(180deg); } .pols-app-nav__user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: var(--pols-surface); border: 1px solid var(--pols-border); border-radius: var(--pols-radius); box-shadow: var(--pols-shadow-lg); padding: 8px; display: flex; flex-direction: column; } .pols-app-nav__user-dropdown[hidden] { display: none; } .pols-app-nav__user-info { padding: 8px 12px 12px; border-bottom: 1px solid var(--pols-border-soft); margin-bottom: 6px; } .pols-app-nav__user-email { font-size: 12px; color: var(--pols-text-muted); word-break: break-all; } .pols-app-nav__user-link { display: block; width: 100%; text-align: left; padding: 8px 12px; background: transparent; border: 0; border-radius: var(--pols-radius-sm); color: var(--pols-text); font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; } .pols-app-nav__user-link:hover { background: var(--pols-surface-alt); text-decoration: none; } /*────────────────────────────────────────── * Main content area + footer *────────────────────────────────────────*/ .pols-app-main { flex: 1; max-width: 1280px; width: 100%; margin: 0 auto; padding: 32px 24px; } .pols-app-footer { padding: 20px 24px; text-align: center; color: var(--pols-text-faint); font-size: 12px; border-top: 1px solid var(--pols-border-soft); background: var(--pols-surface); } .pols-app-footer a { color: var(--pols-text-muted); } .pols-app-footer a:hover { color: var(--pols-primary); } /*────────────────────────────────────────── * Page header *────────────────────────────────────────*/ .pols-page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .pols-page-header__text h1 { margin-bottom: 4px; } .pols-page-header__text p { margin: 0; color: var(--pols-text-muted); font-size: 14px; } .pols-page-header__actions { display: flex; gap: 10px; } /*────────────────────────────────────────── * Buttons *────────────────────────────────────────*/ .pols-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; font: inherit; font-size: 14px; font-weight: 500; border-radius: var(--pols-radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; line-height: 1.2; } .pols-btn:hover { text-decoration: none; } .pols-btn:disabled { opacity: 0.6; cursor: not-allowed; } .pols-btn--primary { background: var(--pols-primary); color: var(--pols-primary-on); border-color: var(--pols-primary); } .pols-btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--pols-primary) 85%, #000); color: var(--pols-primary-on); } .pols-btn--secondary { background: var(--pols-surface); color: var(--pols-text); border-color: var(--pols-border); } .pols-btn--secondary:hover:not(:disabled) { border-color: var(--pols-primary); color: var(--pols-primary); } .pols-btn--danger { background: var(--pols-surface); color: var(--pols-danger); border-color: var(--pols-border); } .pols-btn--danger:hover:not(:disabled) { background: var(--pols-danger); color: #fff; border-color: var(--pols-danger); } .pols-btn--sm { padding: 6px 12px; font-size: 13px; } .pols-btn--lg { padding: 14px 24px; font-size: 16px; } .pols-btn--block { width: 100%; } /*────────────────────────────────────────── * Form controls *────────────────────────────────────────*/ .pols-field { margin-bottom: 16px; } .pols-field__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--pols-text); } .pols-field__hint { display: block; margin-top: 6px; font-size: 12px; color: var(--pols-text-muted); } .pols-input, .pols-select, .pols-textarea { width: 100%; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--pols-text); background: var(--pols-surface); border: 1px solid var(--pols-border); border-radius: var(--pols-radius-sm); transition: border-color 0.15s, box-shadow 0.15s; } .pols-input:focus, .pols-select:focus, .pols-textarea:focus { outline: none; border-color: var(--pols-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pols-primary) 20%, transparent); } .pols-textarea { resize: vertical; min-height: 80px; } .pols-checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; } /*────────────────────────────────────────── * Cards *────────────────────────────────────────*/ .pols-card { background: var(--pols-surface); border: 1px solid var(--pols-border); border-radius: var(--pols-radius); padding: 20px; box-shadow: var(--pols-shadow-sm); } .pols-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } /*────────────────────────────────────────── * Alerts / messages *────────────────────────────────────────*/ .pols-alert { padding: 12px 16px; border-radius: var(--pols-radius-sm); margin-bottom: 16px; font-size: 14px; border: 1px solid transparent; } .pols-alert--error { background: #fdecea; border-color: #f8c0bc; color: #8a1f16; } .pols-alert--success { background: #e7f5ec; border-color: #bce3c8; color: #1a6e2a; } .pols-alert--info { background: #e7f0fa; border-color: #bdd4ef; color: #1d4a85; } .pols-alert--warning { background: #fff4e5; border-color: #fddaa5; color: #7a3e00; } /*────────────────────────────────────────── * Login / forgot-password shell *────────────────────────────────────────*/ body.pols-auth { background: linear-gradient(135deg, color-mix(in srgb, var(--pols-primary) 12%, var(--pols-bg)) 0%, var(--pols-bg) 100%); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; } .pols-auth-card { width: 100%; max-width: 420px; background: var(--pols-surface); border-radius: var(--pols-radius-lg); box-shadow: var(--pols-shadow-lg); padding: 36px 32px; } .pols-auth-card__brand { text-align: center; margin-bottom: 24px; } .pols-auth-card__brand img { max-height: 60px; max-width: 220px; } .pols-auth-card__brand h1 { margin: 12px 0 4px; font-size: 20px; color: var(--pols-primary); } .pols-auth-card__brand p { margin: 0; color: var(--pols-text-muted); font-size: 13px; } .pols-auth-footer { margin-top: 24px; text-align: center; font-size: 12px; color: var(--pols-text-faint); } .pols-auth-footer a { color: var(--pols-text-muted); } /* Standalone "powered by" footer outside the auth card (login / forgot-password) */ .pols-auth-footer--standalone { margin-top: 32px; } /*────────────────────────────────────────── * Dashboard — session cards *────────────────────────────────────────*/ .pols-dashboard-filters { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .pols-dashboard-filters__search { flex: 1; min-width: 220px; } /* Status filter select — constrained width so it doesn't grow to fill the row */ .pols-dashboard-filters__status { max-width: 200px; } .pols-session-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } .pols-session-card { background: var(--pols-surface); border: 1px solid var(--pols-border); border-radius: var(--pols-radius); padding: 20px; display: flex; flex-direction: column; box-shadow: var(--pols-shadow-sm); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .pols-session-card:hover { border-color: var(--pols-primary); box-shadow: var(--pols-shadow); transform: translateY(-1px); } .pols-session-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; } .pols-session-card__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--pols-text); line-height: 1.3; word-break: break-word; } .pols-session-card__code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; background: var(--pols-surface-alt); border: 1px solid var(--pols-border); padding: 3px 8px; border-radius: var(--pols-radius-sm); color: var(--pols-text-muted); white-space: nowrap; } .pols-session-card__meta { display: flex; gap: 12px; margin-bottom: 12px; font-size: 12px; color: var(--pols-text-muted); flex-wrap: wrap; } .pols-session-card__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--pols-border-soft); flex-wrap: wrap; } /*────────────────────────────────────────── * Status badges *────────────────────────────────────────*/ .pols-badge { display: inline-block; padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid transparent; } .pols-badge--draft { background: #f0f2f5; color: #6b7785; border-color: #e3e6eb; } .pols-badge--active { background: #e7f5ec; color: #1a6e2a; border-color: #bce3c8; } .pols-badge--paused { background: #fff4e5; color: #7a3e00; border-color: #fddaa5; } .pols-badge--closed { background: #e7f0fa; color: #1d4a85; border-color: #bdd4ef; } .pols-badge--archived { background: #f0f0f0; color: #666; border-color: #d0d0d0; } /*────────────────────────────────────────── * Empty state *────────────────────────────────────────*/ .pols-empty-state { text-align: center; padding: 60px 20px; background: var(--pols-surface); border: 1px dashed var(--pols-border); border-radius: var(--pols-radius); } .pols-empty-state h2 { color: var(--pols-text-muted); } .pols-empty-state p { color: var(--pols-text-muted); margin-bottom: 20px; } /*────────────────────────────────────────── * Loading states *────────────────────────────────────────*/ .pols-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--pols-border); border-top-color: var(--pols-primary); border-radius: 50%; animation: pols-spin 0.8s linear infinite; } .pols-spinner--lg { width: 40px; height: 40px; border-width: 3px; } @keyframes pols-spin { to { transform: rotate(360deg); } } .pols-loading { text-align: center; padding: 40px 20px; color: var(--pols-text-muted); } /* Inline variant injected by PolsApp.loading.show() — centered within whatever container element it is appended to. */ .pols-loading--inline { display: flex; justify-content: center; align-items: center; padding: 24px; } /*────────────────────────────────────────── * Modal *────────────────────────────────────────*/ .pols-modal-overlay { position: fixed; inset: 0; background: rgba(16, 24, 40, 0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; animation: pols-fade-in 0.2s ease; } @keyframes pols-fade-in { from { opacity: 0; } } .pols-modal { background: var(--pols-surface); border-radius: var(--pols-radius-lg); box-shadow: var(--pols-shadow-lg); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: 24px; } .pols-modal__header { margin-bottom: 16px; } .pols-modal__footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--pols-border-soft); display: flex; justify-content: flex-end; gap: 10px; } /*────────────────────────────────────────── * Mobile nav toggle (hamburger) *────────────────────────────────────────*/ .pols-app-nav__toggle { display: none; /* hidden on desktop */ flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: transparent; border: 0; padding: 8px; cursor: pointer; border-radius: var(--pols-radius-sm); transition: background 0.15s; flex-shrink: 0; } .pols-app-nav__toggle:hover { background: var(--pols-surface-alt); } .pols-app-nav__toggle-bar { display: block; width: 22px; height: 2px; background: var(--pols-text); border-radius: 2px; transition: background 0.15s; } /*────────────────────────────────────────── * Responsive *────────────────────────────────────────*/ @media (max-width: 720px) { .pols-app-nav__toggle { display: flex; } .pols-app-nav__inner { gap: 16px; } .pols-app-nav__title { font-size: 14px; } .pols-app-main { padding: 20px 16px; } .pols-page-header { flex-direction: column; align-items: flex-start; } .pols-session-grid { grid-template-columns: 1fr; } /* Nav drawer: hidden by default, slides down from under the header */ .pols-app-nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 2px; background: var(--pols-surface); border-bottom: 1px solid var(--pols-border); padding: 8px 16px 12px; z-index: 99; box-shadow: var(--pols-shadow); } .pols-app-nav__links.is-open { display: flex; } .pols-app-nav__link { padding: 12px 8px; } } /* ========================================================================== Phase 4d — Session editor ========================================================================== */ /*────────────────────────────────────────── * Back link *────────────────────────────────────────*/ .pols-editor-back { display: inline-block; font-size: 13px; color: var(--pols-text-muted); margin-bottom: 12px; } .pols-editor-back:hover { color: var(--pols-primary); text-decoration: none; } /*────────────────────────────────────────── * Editor header *────────────────────────────────────────*/ .pols-editor-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; } .pols-editor-header__text { display: flex; flex-direction: column; flex: 1; min-width: 0; } .pols-editor-header__text h1 { margin-bottom: 4px; } .pols-editor-header__text p.description { font-size: 13px; color: var(--pols-text-muted); max-width: 60ch; margin: 0; } .pols-editor-header__actions { display: flex; gap: 10px; flex-shrink: 0; } /*────────────────────────────────────────── * Status row *────────────────────────────────────────*/ .pols-editor-status { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 8px 0 10px; } .pols-editor-status__item { display: flex; align-items: center; gap: 6px; } .pols-editor-status__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pols-text-muted); } /*────────────────────────────────────────── * Content status badges *────────────────────────────────────────*/ .pols-badge--content-publish { background: #e7f5ec; color: #1a6e2a; border-color: #bce3c8; } .pols-badge--content-draft { background: #f0f2f5; color: #6b7785; border-color: #e3e6eb; } .pols-badge--content-auto-draft { background: #f0f2f5; color: #6b7785; border-color: #e3e6eb; } .pols-badge--content-pending { background: #fff4e0; color: #8a5a00; border-color: #fddaa5; } .pols-badge--content-future { background: #e6f0fb; color: #1e4d8a; border-color: #bdd4ef; } .pols-badge--content-private { background: #efeaf7; color: #5a3a8a; border-color: #d4cce8; } .pols-badge--content-trash { background: #fbeaea; color: #8a1e1e; border-color: #f0c0c0; } /*────────────────────────────────────────── * Slide list container *────────────────────────────────────────*/ .pols-editor-slides { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; } /*────────────────────────────────────────── * Slide card *────────────────────────────────────────*/ .pols-editor-slide { background: var(--pols-surface); border: 1px solid var(--pols-border); border-radius: var(--pols-radius); box-shadow: var(--pols-shadow-sm); } .pols-editor-slide__header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; transition: background 0.15s; } .pols-editor-slide__header:hover { background: var(--pols-surface-alt); } /*────────────────────────────────────────── * Phase 4d — Drag-and-drop reorder (Sortable.js) *────────────────────────────────────────*/ .pols-editor-slide__drag { display: flex; align-items: center; justify-content: center; width: 20px; min-width: 20px; flex-shrink: 0; color: var(--pols-text-muted); cursor: grab; user-select: none; font-size: 14px; line-height: 1; /* Small negative letter-spacing makes the two vertical ellipses read as a 2x3 grip of dots. */ letter-spacing: -2px; transition: color 0.15s; } .pols-editor-slide__drag:hover { color: var(--pols-primary); } .pols-editor-slide__drag:active, .pols-editor-slide.sortable-chosen .pols-editor-slide__drag { cursor: grabbing; } /* Ghost: placeholder left behind while dragging. Fade it so the item clearly reads as "somewhere else" right now. */ .pols-editor-slide.sortable-ghost { opacity: 0.35; background: var(--pols-surface-alt); } /* Chosen: the card the user is actively dragging. Subtle elevation. */ .pols-editor-slide.sortable-chosen { box-shadow: 0 8px 24px rgba(16, 24, 40, 0.15); } /* Drag: the moving clone. Slight rotation gives a "picked up" feel and forces it above siblings during the flight. */ .pols-editor-slide.sortable-drag { opacity: 0.95; transform: rotate(1deg); z-index: 100; } .pols-editor-slide__order { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; background: var(--pols-surface-alt); border: 1px solid var(--pols-border); border-radius: var(--pols-radius-sm); font-size: 12px; font-weight: 600; color: var(--pols-text-muted); flex-shrink: 0; } .pols-editor-slide__icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--pols-text-muted); } .pols-editor-slide__title-wrap { flex: 1; min-width: 0; } .pols-editor-slide__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pols-editor-slide__type { font-size: 12px; color: var(--pols-text-muted); white-space: nowrap; flex-shrink: 0; } .pols-editor-slide__caret { flex-shrink: 0; color: var(--pols-text-muted); transition: transform 0.15s; } .pols-editor-slide.is-expanded .pols-editor-slide__caret { transform: rotate(180deg); } .pols-editor-slide__actions { display: flex; gap: 4px; flex-shrink: 0; } .pols-editor-slide__body { display: none; border-top: 1px solid var(--pols-border); padding: 16px 20px; } .pols-editor-slide.is-expanded .pols-editor-slide__body { display: block; } /*────────────────────────────────────────── * Form grid inside slide body *────────────────────────────────────────*/ .pols-editor-form { display: flex; flex-direction: column; gap: 16px; } .pols-editor-form__row { display: flex; gap: 12px; } .pols-editor-form__field { display: flex; flex-direction: column; gap: 4px; flex: 1; } .pols-editor-form__field label { font-size: 13px; font-weight: 500; color: var(--pols-text); } .pols-editor-form__footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pols-border); } /*────────────────────────────────────────── * Option rows + form placeholder *────────────────────────────────────────*/ .pols-editor-form__options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .pols-editor-form__option-row { display: flex; gap: 8px; align-items: center; } .pols-editor-form__option-row .pols-input { flex: 1; } .pols-editor-form__option-row [data-form-action="remove-option"] { flex-shrink: 0; min-width: 32px; padding: 4px 8px; } .pols-editor-form__placeholder { padding: 16px; background: var(--pols-surface-alt); border: 1px dashed var(--pols-border); border-radius: var(--pols-radius-sm); text-align: center; color: var(--pols-text-muted); font-size: 13px; } .pols-editor-form__placeholder p { margin: 0; } /*────────────────────────────────────────── * Phase 4d — Toolbar + type picker *────────────────────────────────────────*/ .pols-editor-toolbar { display: flex; justify-content: flex-start; gap: 12px; margin-bottom: 16px; position: relative; } .pols-editor-type-picker { position: absolute; top: 100%; left: 0; margin-top: 8px; z-index: 20; background: var(--pols-surface); border: 1px solid var(--pols-border); border-radius: var(--pols-radius); box-shadow: var(--pols-shadow-lg); padding: 16px; max-width: 540px; width: max-content; max-height: 360px; overflow-y: auto; } .pols-editor-type-picker[hidden] { display: none; } .pols-editor-type-picker__title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pols-text-muted); margin: 0 0 8px; } .pols-editor-type-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .pols-editor-type-picker__tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; background: var(--pols-surface); border: 1px solid var(--pols-border); border-radius: 8px; cursor: pointer; font-size: 12px; text-align: center; color: var(--pols-text); font-family: inherit; transition: border-color 0.15s, background 0.15s; } .pols-editor-type-picker__tile:hover { border-color: var(--pols-primary); background: var(--pols-surface-alt); } .pols-editor-type-picker__tile:focus-visible { outline: 2px solid var(--pols-primary); outline-offset: 2px; } .pols-editor-type-picker__tile:disabled { opacity: 0.5; cursor: not-allowed; } .pols-editor-type-picker__tile .pols-slide-icon { width: 24px; height: 24px; color: var(--pols-primary); } .pols-editor-type-picker__tile svg { width: 24px; height: 24px; color: var(--pols-primary); } .pols-editor-type-picker__tile-label { font-weight: 600; } .pols-editor-type-picker__tile-desc { font-size: 11px; color: var(--pols-text-muted); line-height: 1.3; } /*────────────────────────────────────────── * Editor responsive *────────────────────────────────────────*/ @media (max-width: 720px) { .pols-editor-header { flex-direction: column; align-items: stretch; gap: 12px; } .pols-editor-header__actions { align-self: stretch; } .pols-editor-header__actions .pols-btn, .pols-editor-header > .pols-btn { width: 100%; } .pols-editor-slide__header { flex-wrap: wrap; } .pols-editor-slide__title { white-space: normal; overflow: visible; text-overflow: clip; } .pols-editor-slide__actions { width: 100%; margin-top: 4px; } .pols-editor-form__row { flex-direction: column; } .pols-editor-type-picker { left: 0; right: 0; width: auto; max-width: none; } .pols-editor-type-picker__grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== Phase 4d — Editor forms cleanup ========================================================================== Append-only block covering classes that accumulated without CSS across Pieces 9–22.5. No existing rules are modified; every new selector is either a net-new class, a descendant of a net-new class, or uses a data- attribute selector (for the hotspot radius region, which uses a data- attribute rather than a class). Tokens reused from the :root block; no new tokens introduced, no importance overrides, no animation. ========================================================================== */ /*────────────────────────────────────────── * Radio groups (true_false correct answer) *────────────────────────────────────────*/ .pols-editor-form__radio-group { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .pols-editor-form__radio-label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 14px; color: var(--pols-text); cursor: pointer; user-select: none; } .pols-editor-form__radio-label input[type="radio"] { margin: 0; cursor: pointer; } /*────────────────────────────────────────── * Kennischeck sub-question repeater * * Each sub-question renders as a card-within-the-card: tinted * background, border, with a header row (label + remove button), * the statement input, and a nested options list. The nested * options are indented with a left border so their "belongs to * this sub-question" relationship reads at a glance. Each option * row has a radio (mark-as-correct) and the option text input. * * Field-shape note: the brief originally assumed a separate * .pols-editor-form__question-text wrapper and a dedicated * .pols-editor-form__question-correct element; Piece 22.5's * corrected shape uses a bare statement input and per-option * radios instead, so neither class exists in the markup and * both are intentionally not styled. *────────────────────────────────────────*/ .pols-editor-form__questions { display: flex; flex-direction: column; gap: 16px; margin-bottom: 12px; } .pols-editor-form__question-row { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--pols-surface-alt); border: 1px solid var(--pols-border); border-radius: var(--pols-radius-sm); } .pols-editor-form__question-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pols-editor-form__question-header label { margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pols-text-muted); } .pols-editor-form__question-options { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-left: 12px; border-left: 2px solid var(--pols-border); } .pols-editor-form__question-option-row { display: flex; align-items: center; gap: 8px; } .pols-editor-form__question-option-row .pols-input { flex: 1; min-width: 0; } .pols-editor-form__question-option-row input[type="radio"] { flex-shrink: 0; margin: 0; cursor: pointer; } /*────────────────────────────────────────── * Matching pairs repeater * * Single row on desktop: [left input] [↔] [right input] [×]. * Mobile stacks the two text inputs with the separator glyph * centered between them; the remove button wraps to the next * line so it still has a tap-target. *────────────────────────────────────────*/ .pols-editor-form__pairs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } .pols-editor-form__pair-row { display: flex; align-items: center; gap: 8px; } .pols-editor-form__pair-row .pols-input { flex: 1; min-width: 0; } .pols-editor-form__pair-link { flex-shrink: 0; font-size: 18px; color: var(--pols-text-faint); user-select: none; } /*────────────────────────────────────────── * Image field (shared across all slide types with image upload) * * Piece 22 applied most layout rules via inline styles on the * JS template; those inline styles win over the rules below and * are the load-bearing source. The rules here exist as a * defensive fallback for future inline-style removal plus the * visuals that were never inlined (empty-state dashed border, * muted hint text, bordered thumbnail). * * The hotspot target overlay and [data-slide-image-wrapper] * div are fully inline-styled in renderFormHotspot — intentionally * not styled here to avoid a second source of truth for the * click-to-place math. *────────────────────────────────────────*/ .pols-editor-form__image-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .pols-editor-form__image-status { font-size: 12px; color: var(--pols-text-muted); } .pols-editor-form__image-preview { display: inline-block; max-width: 100%; } .pols-editor-form__image-preview img { display: block; max-width: 240px; max-height: 180px; border: 1px solid var(--pols-border); border-radius: var(--pols-radius-sm); } .pols-editor-form__image-empty { padding: 12px; background: var(--pols-surface-alt); border: 1px dashed var(--pols-border); border-radius: var(--pols-radius-sm); font-size: 12px; color: var(--pols-text-muted); text-align: center; } .pols-editor-form__image-empty p { margin: 0; } .pols-editor-form__image-empty-text { margin: 0; color: var( --pols-muted, #888 ); font-size: 12px; } .pols-editor-form__image-hint { margin: 0 0 8px 0; font-size: 12px; color: var(--pols-text-muted); } /*────────────────────────────────────────── * Hotspot radius slider region * * The region uses a data-attribute (data-hotspot-radius-field) * rather than a class, and is already wrapped in a * .pols-editor-form__field so its column layout comes from * there. These rules only handle the range-input bleedthrough * (the range accidentally inherits .pols-input's padding and * border) and the percentage label next to it. *────────────────────────────────────────*/ [data-hotspot-radius-field] input[type="range"] { width: 100%; max-width: 300px; padding: 0; background: transparent; border: none; box-shadow: none; } [data-hotspot-radius-field] [data-hotspot-radius-label] { font-size: 12px; color: var(--pols-text-muted); } /*────────────────────────────────────────── * Editor forms cleanup — responsive * * Matches the existing 720px breakpoint used by the rest of * the editor block above. *────────────────────────────────────────*/ @media (max-width: 720px) { .pols-editor-form__radio-group { gap: 12px; } .pols-editor-form__question-row { padding: 10px; } .pols-editor-form__question-options { padding-left: 10px; } .pols-editor-form__pair-row { flex-wrap: wrap; } .pols-editor-form__pair-row .pols-input { flex: 1 0 100%; } .pols-editor-form__pair-link { flex: 1 0 100%; text-align: center; } } /* ========================================================================== Phase 4g — Shell polish ========================================================================== */ /*────────────────────────────────────────── * Skip-to-content link (a11y) * Standard keyboard-accessible skip link: hidden off-screen until focused. *────────────────────────────────────────*/ .pols-skip-link { position: absolute; top: -100px; left: 0; padding: 8px 16px; background: var(--pols-primary); color: var(--pols-primary-on); font-size: 14px; font-weight: 500; text-decoration: none; z-index: 1000; border-radius: 0 0 var(--pols-radius-sm) 0; transition: top 0.1s; } .pols-skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: -2px; } /*────────────────────────────────────────── * Back link — reusable "← Label" above page titles * Used by: editor.php ("← Sessies"), Phase 5 results.php ("← {title}") *────────────────────────────────────────*/ .pols-back-link { display: inline-block; font-size: 13px; color: var(--pols-text-muted); text-decoration: none; margin-bottom: 8px; } .pols-back-link:hover { color: var(--pols-primary); text-decoration: underline; } /*────────────────────────────────────────── * Branded error pages (404 / 403) *────────────────────────────────────────*/ .pols-error-page { text-align: center; padding: 80px 24px 40px; max-width: 480px; margin: 0 auto; } .pols-error-page__icon { font-size: 72px; font-weight: 700; color: var(--pols-border); line-height: 1; margin-bottom: 16px; letter-spacing: -2px; } .pols-error-page h1 { font-size: 28px; margin-bottom: 12px; } .pols-error-page p { color: var(--pols-text-muted); margin-bottom: 28px; } /* Phase 4 cleanup — dashboard scope toggle */ .pols-dashboard-scope { display: inline-flex; gap: 0; margin: 0 0 16px 0; border: 1px solid var( --pols-border, #d1d5db ); border-radius: 8px; overflow: hidden; background: var( --pols-surface, #fff ); } .pols-dashboard-scope__btn { appearance: none; background: transparent; border: 0; padding: 8px 16px; font: inherit; color: var( --pols-muted, #6b7280 ); cursor: pointer; transition: background 0.15s, color 0.15s; } .pols-dashboard-scope__btn + .pols-dashboard-scope__btn { border-left: 1px solid var( --pols-border, #d1d5db ); } .pols-dashboard-scope__btn:hover { background: var( --pols-hover, #f3f4f6 ); } .pols-dashboard-scope__btn.is-active { background: var( --pols-primary, #1a6e7a ); color: var(--pols-primary-on); } /* Phase 4 cleanup — dual badge labels on dashboard cards */ .pols-session-card__badge-label { font-size: 11px; color: var( --pols-muted, #6b7280 ); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 2px; } /* Phase 4 cleanup — inline editable session title */ .pols-editor-title { display: inline-flex; align-items: center; gap: 8px; cursor: text; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; transition: background 0.15s; } .pols-editor-title:hover, .pols-editor-title:focus-visible { background: var( --pols-hover, #f3f4f6 ); outline: none; } .pols-editor-title__pencil { font-size: 0.7em; opacity: 0; color: var( --pols-muted, #6b7280 ); transition: opacity 0.15s; } .pols-editor-title:hover .pols-editor-title__pencil, .pols-editor-title:focus-visible .pols-editor-title__pencil { opacity: 1; } .pols-editor-title.is-editing { background: transparent; padding: 0; margin: 0; } .pols-editor-title__input { font: inherit; font-weight: inherit; color: inherit; width: 100%; max-width: 640px; padding: 4px 8px; border: 2px solid var( --pols-primary, #1a6e7a ); border-radius: 6px; background: var( --pols-surface, #fff ); } .pols-editor-title__input:focus { outline: none; box-shadow: 0 0 0 3px rgba( 26, 110, 122, 0.15 ); } /*────────────────────────────────────────── * Phase 5a — Session results page *────────────────────────────────────────*/ /* Page header (back-link, title, actions, snapshot tabs) */ .pols-results-header { max-width: 1200px; margin: 0 auto; padding: 24px 24px 0; } .pols-results-header__top { display: flex; align-items: flex-start; gap: 16px; margin: 8px 0 16px; } .pols-results-header__title { flex: 1; font-size: 22px; margin-bottom: 0; } .pols-results-header__actions { display: flex; gap: 8px; flex-shrink: 0; } /* Snapshot tab bar */ .pols-results-snapshot-bar { display: flex; gap: 0; border-bottom: 2px solid var(--pols-border); overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 0; } .pols-results-snapshot-btn { padding: 8px 18px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; color: var(--pols-text-muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s; } .pols-results-snapshot-btn:hover { color: var(--pols-text); } .pols-results-snapshot-btn.is-active { color: var(--pols-primary); border-bottom-color: var(--pols-primary); } /* Two-column body: slides list + leaderboard sidebar */ .pols-results-body { max-width: 1200px; margin: 0 auto; padding: 24px; display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; } @media (min-width: 1024px) { .pols-results-body { grid-template-columns: 1fr 280px; } } .pols-results-slides { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* Slide result card */ .pols-results-slide-card { background: var(--pols-surface); border: 1px solid var(--pols-border); border-radius: var(--pols-radius); overflow: hidden; } .pols-results-slide-card__header { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--pols-border-soft); } .pols-results-slide-card__num { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; border-radius: 50%; background: color-mix(in srgb, var(--pols-primary) 12%, transparent); color: var(--pols-primary); font-size: 12px; font-weight: 700; } .pols-results-slide-card__meta { flex: 1; min-width: 0; } .pols-results-slide-card__title { font-size: 15px; font-weight: 600; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pols-results-slide-card__count { font-size: 12px; color: var(--pols-text-muted); } .pols-results-slide-card__chart { padding: 16px 20px; } .pols-results-slide-card__empty { color: var(--pols-text-faint); font-size: 13px; margin: 0; } /* Tally bars (choice types — MC / quiz / true_false) */ .pols-results-tally { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .pols-results-tally__item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--pols-radius-sm); position: relative; min-height: 32px; } /* CSS-variable-driven fill bar behind the label */ .pols-results-tally__track { position: absolute; inset: 0; width: var(--pct, 0%); background: color-mix(in srgb, var(--pols-primary) 12%, transparent); border-radius: var(--pols-radius-sm); pointer-events: none; transition: width 0.4s ease; } .pols-results-tally__item.is-correct .pols-results-tally__track { background: color-mix(in srgb, var(--pols-success) 15%, transparent); } .pols-results-tally__label { flex: 1; font-size: 13px; position: relative; z-index: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pols-results-tally__item.is-correct .pols-results-tally__label { color: var(--pols-success); font-weight: 600; } .pols-results-tally__count { font-size: 12px; color: var(--pols-text-muted); white-space: nowrap; position: relative; z-index: 1; } /* Average stat (scale / likert / numeric) */ .pols-results-avg { font-size: 14px; color: var(--pols-text-muted); margin: 0; } .pols-results-avg strong { color: var(--pols-text); font-size: 20px; font-weight: 700; } /* Word cloud */ .pols-results-words { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; } .pols-results-word { color: var(--pols-primary); line-height: 1.3; } /* Text feed (open_text / qa / reflection) */ .pols-results-texts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .pols-results-texts li { padding: 8px 10px; background: var(--pols-surface-alt); border-left: 3px solid var(--pols-border); border-radius: 0 var(--pols-radius-sm) var(--pols-radius-sm) 0; font-size: 13px; color: var(--pols-text); } /* Ranking (ordered list) */ .pols-results-ranking { margin: 0; padding: 0 0 0 20px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; } /* Leaderboard sidebar */ .pols-results-leaderboard { background: var(--pols-surface); border: 1px solid var(--pols-border); border-radius: var(--pols-radius); padding: 20px; align-self: start; position: sticky; top: calc(var(--pols-nav-height) + 24px); } .pols-results-leaderboard__title { margin-bottom: 16px; font-size: 16px; } .pols-results-leaderboard__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .pols-results-leaderboard__item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--pols-border-soft); } .pols-results-leaderboard__item:last-child { border-bottom: none; } .pols-results-leaderboard__rank { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; min-width: 24px; border-radius: 50%; background: var(--pols-bg); font-size: 11px; font-weight: 700; color: var(--pols-text-muted); } .pols-results-leaderboard__item:nth-child(1) .pols-results-leaderboard__rank { background: #ffd700; color: #5a4800; } .pols-results-leaderboard__item:nth-child(2) .pols-results-leaderboard__rank { background: #c0c0c0; color: #444; } .pols-results-leaderboard__item:nth-child(3) .pols-results-leaderboard__rank { background: #cd7f32; color: #fff; } .pols-results-leaderboard__name { flex: 1; font-size: 13px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pols-results-leaderboard__score { font-size: 13px; font-weight: 700; color: var(--pols-primary); } /*────────────────────────────────────────── * Phase 5a-3 — Results page scaffold *────────────────────────────────────────*/ /* Page-level background override via body class */ .pols-results { background: var(--pols-surface, #f7f8f9); } /* Meta row: date · mode badge · participant count · status badge · picker */ .pols-results-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--pols-text-muted); margin-top: 8px; margin-bottom: 16px; } .pols-results-meta__date { color: var(--pols-text-muted); } .pols-results-meta__action + .pols-results-meta__action { margin-left: 4px; } .pols-results-meta__badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--pols-border, #e5e7eb); color: var(--pols-text-muted); } .pols-results-meta__badge--mode { background: rgba(26, 110, 122, 0.10); color: var(--pols-primary); } .pols-results-meta__badge--participants { background: rgba(0, 0, 0, 0.06); } .pols-results-meta__badge--status.pols-results-meta__badge--closed { background: rgba(46, 125, 50, 0.12); color: #1a6e2a; } .pols-results-meta__badge--status.pols-results-meta__badge--active { background: rgba(220, 38, 38, 0.10); color: #b91c1c; } .pols-results-meta__badge--status.pols-results-meta__badge--paused, .pols-results-meta__badge--status.pols-results-meta__badge--draft { background: rgba(0, 0, 0, 0.06); } .pols-results-snapshot-picker { margin-left: auto; max-width: 200px; } /* Slide cards grid — overrides the Phase 5a-1 flex column */ .pols-results-slides { display: grid; gap: 24px; max-width: 800px; margin: 0 auto 40px; padding: 0 24px; } /* Individual result card */ .pols-result-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.04); } .pols-result-card__header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; } .pols-result-card__num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--pols-primary); color: var(--pols-primary-on); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .pols-result-card__title { flex: 1; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pols-result-card__type { font-size: 12px; color: var(--pols-text-muted); white-space: nowrap; flex-shrink: 0; } .pols-result-card__count { font-size: 12px; color: var(--pols-text-muted); white-space: nowrap; flex-shrink: 0; } .pols-result-render { min-height: 240px; position: relative; } .pols-result-card__order { width: 32px; height: 32px; border-radius: 50%; background: var(--pols-primary); color: var(--pols-primary-on); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; } .pols-result-card__desc { color: var(--pols-text-muted); font-size: 14px; margin-bottom: 12px; line-height: 1.5; } .pols-result-stats { margin-top: 16px; font-size: 14px; color: var(--pols-text-muted); text-align: center; } .pols-result-stats strong { color: var(--pols-text); font-weight: 600; } /* Word cloud container (light theme) */ .pols-wordcloud { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; padding: 20px; min-height: 120px; } /* pols.css sets background:rgba(255,255,255,0.1) on .pols-word for the dark presenter view; override to a subtle neutral for white backgrounds. PolsCharts sets el.style.color directly so the inline style wins. */ .pols-wordcloud--light .pols-word { background: rgba(0, 0, 0, 0.05); } /* Override dark-theme colours from pols.css for the numeric HTML panel */ .pols-results .pols-numeric-results { background: transparent; } .pols-results .pols-numeric-big { color: var(--pols-text); } .pols-results .pols-numeric-label { color: var(--pols-text-muted); } /*────────────────────────────────────────── * Phase 5a-9 — Text feed (open_text / qa / reflection) *────────────────────────────────────────*/ .pols-text-feed { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; } .pols-text-feed__entry { background: #f5f6f8; border-radius: 6px; padding: 10px 14px; } .pols-text-feed__body { font-size: 0.95rem; color: var(--pols-text, #1a1a2e); line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .pols-text-feed__meta { font-size: 0.75rem; color: var(--pols-text-muted, #6c757d); margin-top: 4px; } .pols-text-feed__more { margin-top: 4px; } .pols-text-feed__more > summary { cursor: pointer; font-size: 0.85rem; color: var(--pols-primary, #1a6e7a); padding: 4px 0; list-style: none; user-select: none; } .pols-text-feed__more > summary::-webkit-details-marker { display: none; } .pols-text-feed__more[open] > summary { margin-bottom: 8px; } .pols-result-empty { font-style: italic; color: var(--pols-text-muted, #6c757d); font-size: 0.9rem; text-align: center; padding: 16px 0; margin: 0; } /*────────────────────────────────────────── * Phase 5a-14 — Print stylesheet (results page) *────────────────────────────────────────*/ @media print { body.pols-results .pols-app-nav, body.pols-results .pols-app-footer, body.pols-results .pols-back-link, body.pols-results .pols-skip-link, body.pols-results #pols-snapshot-picker, body.pols-results #pols-compare-toggle, body.pols-results #pols-export-pdf-btn, body.pols-results #pols-export-csv-btn, body.pols-results .pols-results-meta__action { display: none !important; } body.pols-results { background: white !important; } body.pols-results .pols-result-card { page-break-inside: avoid; break-inside: avoid; box-shadow: none !important; border: 1px solid #e0e0e0; } body.pols-results .pols-results-leaderboard { page-break-after: always; break-after: page; } body.pols-results .pols-result-card canvas { max-width: 100% !important; height: auto !important; } /* Chart.js charts need maintainAspectRatio and explicit dimensions to print reliably. The existing charts pass maintainAspectRatio: false. Per-canvas inline max-height (set in Pieces 5a-5..5a-10) keeps them sane on paper. */ } /*────────────────────────────────────────── * Phase 5e.2 — Mode-aware results enrichments *────────────────────────────────────────*/ /* ── Leaderboard sidebar (competitief) — reuse Phase 5a rules, just unhidden ── */ /* Ensure leaderboard is not too narrow when shown full-width on a narrow screen */ .pols-results-leaderboard { max-width: 800px; margin-left: auto; margin-right: auto; margin-bottom: 24px; } /* ── Focus-areas callout (educatief) ─────────────────────────────────────────── */ .pols-results-focus-areas { max-width: 800px; margin: 0 auto 24px; padding: 0 24px; } .pols-focus-areas__title { font-size: 18px; font-weight: 700; margin: 0 0 6px; color: var(--pols-text); } .pols-focus-areas__intro { font-size: 14px; color: var(--pols-text-muted); margin: 0 0 16px; line-height: 1.5; } .pols-focus-areas__empty { font-size: 14px; font-style: italic; color: var(--pols-text-muted); margin: 0; } .pols-focus-areas__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .pols-focus-area-item { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 10px; padding: 14px 18px; border-left: 4px solid var(--pols-secondary, #e88c2a); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07); } .pols-focus-area-item__num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--pols-secondary, #e88c2a); color: var(--pols-secondary-on); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .pols-focus-area-item__title { flex: 1; font-size: 14px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pols-focus-area-item__pct { font-size: 20px; font-weight: 700; color: var(--pols-secondary, #e88c2a); flex-shrink: 0; line-height: 1; } .pols-focus-area-item__label { font-size: 12px; color: var(--pols-text-muted); flex-shrink: 0; } /* ── Response-time stat badge per slide (competitief) ─────────────────────────── */ .pols-result-rt-stat { margin-top: 12px; padding: 6px 10px; background: color-mix(in srgb, var(--pols-primary) 8%, transparent); border-radius: 6px; font-size: 13px; color: var(--pols-text-muted); display: inline-flex; align-items: center; gap: 4px; } .pols-result-rt-stat__label { font-size: 12px; color: var(--pols-text-muted); } .pols-result-rt-stat strong { color: var(--pols-primary); font-weight: 700; } /* ── Slide-grid recap (interactief) ──────────────────────────────────────────── */ .pols-results-recap { max-width: 800px; margin: 0 auto 24px; padding: 0 24px; } .pols-recap-grid__title { font-size: 18px; font-weight: 700; margin: 0 0 16px; color: var(--pols-text); } .pols-recap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .pols-recap-grid__item { display: flex; flex-direction: column; gap: 4px; background: #fff; border-radius: 10px; padding: 14px 16px; text-decoration: none; color: inherit; border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07); transition: border-color 0.15s, box-shadow 0.15s; cursor: pointer; } .pols-recap-grid__item:hover, .pols-recap-grid__item:focus-visible { border-color: var(--pols-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); outline: none; } .pols-recap-grid__num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pols-primary); color: var(--pols-primary-on); font-size: 11px; font-weight: 700; flex-shrink: 0; margin-bottom: 4px; } .pols-recap-grid__title-text { font-size: 13px; font-weight: 500; line-height: 1.4; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pols-recap-grid__count { font-size: 11px; color: var(--pols-text-muted); margin-top: 2px; } /* ── Highlight flash when scrolled-to from the recap grid ────────────────────── */ @keyframes pols-result-highlight { 0% { outline-color: var(--pols-primary); } 60% { outline-color: var(--pols-primary); } 100% { outline-color: transparent; } } .pols-result-card--highlight { outline: 2px solid var(--pols-primary); outline-offset: 2px; animation: pols-result-highlight 2s ease forwards; } /* ── Print: hide focus-areas and recap widgets ───────────────────────────────── */ @media print { body.pols-results .pols-results-focus-areas, body.pols-results .pols-results-recap { display: none !important; } } /*───────────────────────────────────────── * Phase 4j — Mode badge (session cards) *───────────────────────────────────────*/ .pols-mode-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 12px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: default; } .pols-mode-badge__icon { display: inline-flex; width: 14px; height: 14px; } .pols-mode-badge__icon svg { width: 14px; height: 14px; } .pols-mode-badge--educatief { background: var(--pols-mode-educatief-tint); color: var(--pols-mode-educatief-accent); } .pols-mode-badge--interactief { background: var(--pols-mode-interactief-tint); color: var(--pols-mode-interactief-accent); } .pols-mode-badge--competitief { background: var(--pols-mode-competitief-tint); color: var(--pols-mode-competitief-accent); } /*───────────────────────────────────────── * Phase 4j — Mode picker component *───────────────────────────────────────*/ .pols-mode-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 8px; } @media (max-width: 720px) { .pols-mode-picker { grid-template-columns: 1fr; } } .pols-mode-card { appearance: none; text-align: left; background: #fff; border: 2px solid var(--pols-border, #e2e5ea); border-radius: 10px; padding: 14px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s; display: flex; flex-direction: column; gap: 8px; color: inherit; font-family: inherit; } .pols-mode-card:hover:not([disabled]) { border-color: var(--pols-primary, #1a6e7a); transform: translateY(-1px); } .pols-mode-card:focus-visible { outline: 2px solid var(--pols-primary, #1a6e7a); outline-offset: 2px; } .pols-mode-card.is-selected { border-color: var(--card-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-accent) 18%, transparent); } .pols-mode-card[disabled] { cursor: not-allowed; opacity: 0.65; } .pols-mode-card[data-mode="educatief"] { --card-accent: var(--pols-mode-educatief-accent); } .pols-mode-card[data-mode="interactief"] { --card-accent: var(--pols-mode-interactief-accent); } .pols-mode-card[data-mode="competitief"] { --card-accent: var(--pols-mode-competitief-accent); } .pols-mode-card__icon { width: 32px; height: 32px; color: var(--card-accent); } .pols-mode-card__icon svg { width: 32px; height: 32px; } .pols-mode-card__label { font-size: 17px; font-weight: 600; color: var(--card-accent); } .pols-mode-card__tagline { font-size: 13px; color: var(--pols-text, #1a1f26); font-weight: 500; } .pols-mode-card__meta { margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.4; } .pols-mode-card__meta dt { font-weight: 600; color: var(--pols-text-muted, #6b7280); margin: 0; } .pols-mode-card__meta dd { margin: 0; color: var(--pols-text, #1a1f26); } .pols-mode-picker__help { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--pols-text-muted, #6b7280); text-decoration: none; } .pols-mode-picker__help:hover { color: var(--pols-primary, #1a6e7a); text-decoration: underline; } /*───────────────────────────────────────── * Phase 4j — New-session modal (slice 4) *───────────────────────────────────────*/ .pols-modal--wide { max-width: 720px; width: 90vw; } .pols-modal__body { padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; } .pols-form-field { display: flex; flex-direction: column; gap: 6px; } .pols-form-field > label { font-size: 13px; font-weight: 600; color: var(--pols-text-muted, #6b7280); } .pols-input.is-invalid { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12); } /*───────────────────────────────────────── * Phase 4j — Editor mode section (slice 5) *───────────────────────────────────────*/ .pols-editor-mode { margin: 0 0 16px; } .pols-editor-mode__heading { font-size: 13px; font-weight: 600; color: var(--pols-text-muted, #6b7280); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.04em; } .pols-editor-mode__notice { margin: 8px 0 0; font-size: 12px; color: var(--pols-text-muted, #6b7280); font-style: italic; } /*───────────────────────────────────────── * Phase 4j — Mode-badge popover (slice 6) *───────────────────────────────────────*/ .pols-mode-popover { position: absolute; z-index: 1500; width: 320px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--pols-border, #e2e5ea); border-top: 3px solid var(--popover-accent); border-radius: 8px; box-shadow: 0 12px 40px rgba(16, 24, 40, 0.16); padding: 14px 16px; font-size: 13px; line-height: 1.5; opacity: 0; transform: translateY(-4px); transition: opacity 0.15s, transform 0.15s; pointer-events: none; } .pols-mode-popover.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .pols-mode-popover[data-mode="educatief"] { --popover-accent: var(--pols-mode-educatief-accent); } .pols-mode-popover[data-mode="interactief"] { --popover-accent: var(--pols-mode-interactief-accent); } .pols-mode-popover[data-mode="competitief"] { --popover-accent: var(--pols-mode-competitief-accent); } .pols-mode-popover__head { display: flex; align-items: center; gap: 8px; color: var(--popover-accent); margin-bottom: 6px; } .pols-mode-popover__icon svg { width: 18px; height: 18px; } .pols-mode-popover__label { font-weight: 600; font-size: 14px; } .pols-mode-popover__body { margin: 0 0 8px; color: var(--pols-text, #1a1f26); } .pols-mode-popover__more { display: inline-block; font-size: 12px; color: var(--pols-text-muted, #6b7280); text-decoration: none; } .pols-mode-popover__more:hover { color: var(--popover-accent); text-decoration: underline; } /*───────────────────────────────────────── * Phase 4j — Help page (modes) — slice 7 *───────────────────────────────────────*/ .pols-help-modes h1 { margin: 0 0 12px; } .pols-help-modes__lede { font-size: 15px; line-height: 1.6; margin: 0 0 24px; max-width: 760px; color: var(--pols-text, #1a1f26); } .pols-help-modes__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 32px; } @media (max-width: 900px) { .pols-help-modes__cards { grid-template-columns: 1fr; } } .pols-help-modes__card { background: #fff; border: 1px solid var(--pols-border, #e2e5ea); border-top: 4px solid var(--card-accent); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 10px; } .pols-help-modes__card[data-mode="educatief"] { --card-accent: var(--pols-mode-educatief-accent); } .pols-help-modes__card[data-mode="interactief"] { --card-accent: var(--pols-mode-interactief-accent); } .pols-help-modes__card[data-mode="competitief"] { --card-accent: var(--pols-mode-competitief-accent); } .pols-help-modes__card header { display: flex; align-items: center; gap: 10px; } .pols-help-modes__card header h2 { margin: 0; color: var(--card-accent); font-size: 20px; } .pols-help-modes__icon { color: var(--card-accent); } .pols-help-modes__icon svg { width: 28px; height: 28px; } .pols-help-modes__tagline { font-weight: 600; margin: 0; } .pols-help-modes__description { margin: 0; line-height: 1.5; } .pols-help-modes__meta { margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .pols-help-modes__meta dt { font-weight: 600; color: var(--pols-text-muted, #6b7280); margin: 0; } .pols-help-modes__meta dd { margin: 0; } .pols-help-modes__table { width: 100%; border-collapse: collapse; margin: 12px 0 8px; font-size: 14px; } .pols-help-modes__table th, .pols-help-modes__table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--pols-border, #e2e5ea); } .pols-help-modes__table thead th { background: var(--pols-bg-subtle, #f6f7f9); font-weight: 600; } .pols-help-modes__table td:not(:first-child) { text-align: center; } .pols-help-modes__table-cell--yes { color: #1a6e2a; font-weight: 600; } .pols-help-modes__table-cell--no { color: #9aa0a6; } .pols-help-modes__footnote { font-size: 12px; color: var(--pols-text-muted, #6b7280); margin: 0 0 24px; } .pols-empty-state__hint { margin-top: 12px; font-size: 13px; color: var(--pols-text-muted, #6b7280); } /* * Phase 4d — Autosave status indicator * Inline pill to the left of Cancel / Save buttons via margin-right: auto. */ .pols-editor-form__autosave-status { font-size: 12px; color: var( --pols-muted, #888 ); margin-right: auto; align-self: center; transition: opacity 0.3s ease; } .pols-editor-form__autosave-status.is-dirty { color: var( --pols-muted, #888 ); } .pols-editor-form__autosave-status.is-saving { color: var( --pols-primary, #1a6e7a ); } .pols-editor-form__autosave-status.is-saved { color: var( --pols-success, #2e7d32 ); } .pols-editor-form__autosave-status.is-error { color: var( --pols-danger, #d42027 ); } .pols-editor-form__autosave-status.is-invalid { color: var( --pols-warning, #b26500 ); } .pols-editor-form__autosave-status.is-fading { opacity: 0; } /*────────────────────────────────────────── * Phase 4e — Institution Settings page *────────────────────────────────────────*/ /* Two-column layout: form left, preview right (≥1024px) */ .pols-settings-layout { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; padding-bottom: 120px; /* room for sticky save footer */ } @media ( min-width: 1024px ) { .pols-settings-layout { grid-template-columns: 1fr 340px; } } /* Section headings */ .pols-settings-section { margin-bottom: 40px; } .pols-settings-section__title { font-size: 16px; font-weight: 600; color: var( --pols-text, #1b2733 ); margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid var( --pols-border, #e2e5ea ); } /* Individual fields */ .pols-settings-field { margin-bottom: 20px; } .pols-settings-label { display: block; font-size: 14px; font-weight: 500; color: var( --pols-text, #1b2733 ); margin-bottom: 6px; } .pols-settings-hint { font-size: 12px; color: var( --pols-muted, #6b7280 ); margin: 4px 0 0; } .pols-settings-text, .pols-settings-select, .pols-settings-number { width: 100%; max-width: 480px; } .pols-settings-number { width: 100px; } .pols-settings-timer-row { display: flex; align-items: center; gap: 8px; } .pols-settings-unit { font-size: 14px; color: var( --pols-muted, #6b7280 ); } /* Color picker row */ .pols-settings-field--color .pols-settings-color-row { display: flex; align-items: center; gap: 10px; } .pols-settings-color-input { width: 48px; height: 36px; padding: 2px 4px; border: 1px solid var( --pols-border, #e2e5ea ); border-radius: 6px; cursor: pointer; background: none; } .pols-settings-color-hex { font-size: 13px; font-family: monospace; background: var( --pols-bg, #f5f6f8 ); border: 1px solid var( --pols-border, #e2e5ea ); border-radius: 4px; padding: 2px 8px; } /* Logo upload area */ .pols-settings-logo-upload { display: flex; flex-direction: column; gap: 10px; } .pols-settings-logo-preview { display: flex; align-items: center; justify-content: center; min-height: 72px; border: 1px dashed var( --pols-border, #e2e5ea ); border-radius: 8px; background: var( --pols-bg, #f5f6f8 ); padding: 12px; } .pols-settings-logo-img { max-height: 60px; max-width: 220px; object-fit: contain; } .pols-settings-logo-empty { font-size: 13px; color: var( --pols-muted, #6b7280 ); } .pols-settings-logo-actions { display: flex; gap: 8px; flex-wrap: wrap; } .pols-settings-upload-btn { cursor: pointer; } .pols-settings-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* Font upload row */ .pols-settings-font-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pols-settings-font-name { font-size: 13px; color: var( --pols-text, #1b2733 ); min-width: 80px; } /* Ably status label */ .pols-settings-ably-status { font-size: 14px; color: var( --pols-text, #1b2733 ); margin: 0; } /* Toggle / checkbox styled as switch */ .pols-settings-field--toggle { margin-top: 12px; } .pols-settings-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .pols-settings-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; } .pols-settings-toggle__slider { position: relative; display: inline-block; width: 40px; height: 22px; background: var( --pols-border, #e2e5ea ); border-radius: 11px; flex-shrink: 0; transition: background 0.2s; } .pols-settings-toggle__slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); } .pols-settings-toggle__input:checked + .pols-settings-toggle__slider { background: var( --pols-primary, #1a6e7a ); } .pols-settings-toggle__input:checked + .pols-settings-toggle__slider::after { transform: translateX( 18px ); } .pols-settings-toggle__label { font-size: 14px; color: var( --pols-text, #1b2733 ); } /* Sticky save footer */ .pols-settings-save-footer { position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 12px 24px; background: var( --pols-surface, #fff ); border-top: 1px solid var( --pols-border, #e2e5ea ); box-shadow: 0 -2px 8px rgba(0,0,0,.06); z-index: 100; } .pols-settings-save-footer__hint { font-size: 13px; color: var( --pols-muted, #6b7280 ); } /* Live preview panel */ .pols-settings-preview { position: sticky; top: 80px; } .pols-settings-preview__title { font-size: 14px; font-weight: 600; color: var( --pols-muted, #6b7280 ); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 12px; } /* Preview frame — mini participant screen */ .pols-preview-frame { --preview-primary: var( --pols-primary, #1a6e7a ); --preview-secondary: var( --pols-secondary, #e88c2a ); --preview-tertiary: var( --pols-tertiary, #2e7d32 ); border: 1px solid var( --pols-border, #e2e5ea ); border-radius: 12px; overflow: hidden; font-size: 13px; background: var( --pols-surface, #fff ); box-shadow: 0 2px 8px rgba(0,0,0,.06); } .pols-preview-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var( --preview-primary ); color: #fff; } .pols-preview-logo { height: 28px; max-width: 100px; object-fit: contain; } .pols-preview-inst { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pols-preview-body { padding: 16px; } .pols-preview-question { font-weight: 600; margin-bottom: 12px; color: var( --pols-text, #1b2733 ); } .pols-preview-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .pols-preview-option { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var( --pols-border, #e2e5ea ); border-radius: 6px; color: var( --pols-text, #1b2733 ); } .pols-preview-option--selected { background: color-mix( in srgb, var( --preview-secondary ) 15%, transparent ); border-color: var( --preview-secondary ); } .pols-preview-letter { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; background: var( --preview-primary ); color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; } .pols-preview-option--selected .pols-preview-letter { background: var( --preview-secondary ); } .pols-preview-btn { display: inline-block; padding: 7px 18px; background: var( --preview-primary ); color: #fff; border-radius: 6px; font-size: 12px; font-weight: 600; text-align: center; width: 100%; box-sizing: border-box; } .pols-preview-footer { padding: 8px 14px; font-size: 11px; color: var( --pols-muted, #6b7280 ); border-top: 1px solid var( --pols-border, #e2e5ea ); text-align: center; } /* Danger variant for buttons */ .pols-btn--danger { color: var( --pols-danger, #d42027 ); border-color: var( --pols-danger, #d42027 ); } .pols-btn--danger:hover { background: color-mix( in srgb, var( --pols-danger, #d42027 ) 10%, transparent ); } /* =========================================================== * Phase 4f — Presenter Management page * =========================================================== */ .pols-presenters-invite { background: #fff; border: 1px solid #e6e8eb; border-radius: 8px; padding: 20px 24px; margin-bottom: 24px; } .pols-presenters-invite__heading { margin: 0 0 16px 0; font-size: 16px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var( --pols-muted, #666 ); } .pols-presenters-invite__form { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 720px) { .pols-presenters-invite__form { grid-template-columns: 1fr 1fr; gap: 16px 24px; } .pols-presenters-invite__form .pols-form-field:last-of-type, .pols-presenters-invite__submit { grid-column: 1 / -1; } } .pols-presenters-invite__submit { display: flex; justify-content: flex-end; } .pols-presenters-invite__mismatch { background: #fff8ec; border-left: 3px solid #e8a53a; padding: 12px 14px; border-radius: 6px; margin-bottom: 16px; } .pols-presenters-invite__mismatch strong { display: block; margin-bottom: 4px; color: #8a5a00; font-size: 14px; } .pols-presenters-invite__mismatch p { margin: 0; font-size: 13px; color: #5a3a00; } /* List */ .pols-presenters-list__heading { font-size: 16px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var( --pols-muted, #666 ); margin: 0 0 12px 0; display: flex; align-items: baseline; gap: 8px; } .pols-presenters-list__count { font-size: 13px; font-weight: 400; color: var( --pols-muted, #888 ); text-transform: none; letter-spacing: 0; } .pols-presenters-list__loading, .pols-presenters-list__empty { background: #fff; border: 1px solid #e6e8eb; border-radius: 8px; padding: 36px 24px; text-align: center; } .pols-presenters-list__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .pols-presenter-row { background: #fff; border: 1px solid #e6e8eb; border-radius: 8px; padding: 14px 18px; display: grid; grid-template-columns: 1fr; gap: 8px; align-items: center; transition: box-shadow 0.15s; } .pols-presenter-row:hover { box-shadow: 0 2px 8px rgba( 16, 24, 40, 0.04 ); } @media (min-width: 900px) { .pols-presenter-row { grid-template-columns: minmax( 0, 2fr ) minmax( 0, 1fr ) auto; gap: 16px; } } .pols-presenter-row__main { display: flex; align-items: center; gap: 12px; min-width: 0; } .pols-presenter-row__identity { display: flex; flex-direction: column; min-width: 0; } .pols-presenter-row__name { font-weight: 500; color: #1b2733; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pols-presenter-row__you { font-style: normal; font-weight: 400; font-size: 12px; color: var( --pols-muted, #888 ); } .pols-presenter-row__email { font-size: 12px; color: var( --pols-muted, #888 ); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pols-presenter-row__meta { font-size: 12px; color: var( --pols-muted, #888 ); display: flex; gap: 16px; align-items: center; } .pols-presenter-row__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .pols-presenter-row__self-note { color: var( --pols-muted, #ccc ); font-size: 14px; } /* Status badges */ .pols-presenter-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; text-transform: lowercase; letter-spacing: 0.01em; flex-shrink: 0; } .pols-presenter-badge.is-active { background: color-mix( in srgb, var( --pols-primary ) 10%, #fff ); color: var( --pols-primary ); } .pols-presenter-badge.is-suspended { background: #fff3ed; color: #b26500; } .pols-presenter-badge.is-admin { background: color-mix( in srgb, var( --pols-tertiary ) 10%, #fff ); color: var( --pols-tertiary ); } /* =========================================================== * Phase 4k — Session transfer modal * =========================================================== */ .pols-modal__subtitle { margin: 4px 0 0 0; font-size: 13px; color: var( --pols-muted, #666 ); font-weight: 400; } .pols-transfer-modal__intro { margin: 0 0 16px 0; color: var( --pols-muted, #666 ); font-size: 13px; } .pols-transfer-modal__search { margin-bottom: 12px; } .pols-transfer-modal__search input { width: 100%; } .pols-transfer-modal__loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 28px 0; color: var( --pols-muted, #888 ); font-size: 13px; } .pols-transfer-modal__loading .pols-spinner { width: 20px; height: 20px; } .pols-transfer-modal__empty, .pols-transfer-modal__error { padding: 20px 14px; text-align: center; margin: 0; border-radius: 6px; font-size: 13px; } .pols-transfer-modal__empty { background: #f5f7fa; color: var( --pols-muted, #666 ); } .pols-transfer-modal__error { background: #fff3ed; color: #b21515; } .pols-transfer-modal__list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; border: 1px solid #e6e8eb; border-radius: 6px; background: #fff; } .pols-transfer-modal__item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #f0f2f5; cursor: pointer; transition: background 0.1s; } .pols-transfer-modal__item:last-child { border-bottom: none; } .pols-transfer-modal__item:hover { background: #fafbfd; } .pols-transfer-modal__item.is-selected { background: color-mix( in srgb, var( --pols-primary ) 8%, #fff ); box-shadow: inset 3px 0 0 var( --pols-primary ); } .pols-transfer-modal__identity { display: flex; flex-direction: column; min-width: 0; flex: 1; } .pols-transfer-modal__name { font-weight: 500; color: #1b2733; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; } .pols-transfer-modal__email { font-size: 12px; color: var( --pols-muted, #888 ); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pols-transfer-modal__tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; flex-shrink: 0; } .pols-transfer-modal__tag.is-admin { background: color-mix( in srgb, var( --pols-tertiary ) 12%, #fff ); color: var( --pols-tertiary ); } /* ========================================================================== Phase 5c — Analytics ========================================================================== */ .pols-analytics-root { padding: 0; } .pols-analytics-loading, .pols-analytics-empty-inline { padding: 40px 20px; text-align: center; color: var( --pols-muted, #666 ); } .pols-analytics-timezone { display: inline-block; padding: 4px 10px; font-size: 12px; color: var( --pols-muted, #666 ); background: color-mix( in oklab, var( --pols-muted, #666 ) 6%, transparent ); border-radius: 12px; } .pols-analytics-grid { display: flex; flex-direction: column; gap: 32px; } /* Headline cards — 4-across on desktop, 2 on tablet, 1 on mobile */ .pols-analytics-cards { display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 16px; } .pols-analytics-card { background: #fff; border: 1px solid var( --pols-divider, #e4e7eb ); border-radius: 10px; padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; } .pols-analytics-card__label { font-size: 13px; color: var( --pols-muted, #666 ); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; } .pols-analytics-card__value { font-size: 32px; font-weight: 600; color: var( --pols-primary, #1a6e7a ); line-height: 1.2; font-variant-numeric: tabular-nums; } .pols-analytics-card__sub { font-size: 12px; color: var( --pols-muted, #666 ); } .pols-analytics-card__sub--hint { font-style: italic; } /* Section containers for chart + table sections */ .pols-analytics-section { background: #fff; border: 1px solid var( --pols-divider, #e4e7eb ); border-radius: 10px; padding: 24px 28px; } .pols-analytics-section h2 { margin: 0 0 6px 0; font-size: 18px; font-weight: 600; color: #1a1a1a; } .pols-analytics-intro { margin: 0 0 20px 0; color: var( --pols-muted, #666 ); font-size: 14px; } /* Chart containers — fixed height so Chart.js responsive sizing works */ .pols-analytics-chart { height: 320px; position: relative; } .pols-analytics-pie { height: 360px; position: relative; max-width: 720px; margin: 0 auto; } /* Presenters table */ .pols-analytics-presenters-table { width: 100%; border-collapse: collapse; font-size: 14px; } .pols-analytics-presenters-table thead th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 600; color: var( --pols-muted, #666 ); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var( --pols-divider, #e4e7eb ); } .pols-analytics-presenters-table tbody td { padding: 14px 16px; border-bottom: 1px solid var( --pols-divider, #e4e7eb ); vertical-align: top; } .pols-analytics-presenters-table tbody tr:last-child td { border-bottom: 0; } .pols-analytics-presenters-table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; } .pols-analytics-presenters-table__name { min-width: 200px; } .pols-analytics-presenters-table__email { color: var( --pols-muted, #666 ); font-size: 12px; margin-top: 2px; } /* Empty state on /pols/analytics when has_any_closed_session === false */ .pols-analytics-empty { padding: 60px 20px; text-align: center; background: #fff; border: 1px dashed var( --pols-divider, #e4e7eb ); border-radius: 10px; } .pols-analytics-empty h2 { margin: 0 0 8px 0; color: #1a1a1a; } .pols-analytics-empty p { color: var( --pols-muted, #666 ); margin: 0; } /* Error state */ .pols-error-state { padding: 32px 20px; text-align: center; background: #fff4f4; border: 1px solid #f4c7c7; border-radius: 10px; color: #8b1f1f; } .pols-error-state button { margin-top: 12px; } /* Mobile breakpoint */ @media ( max-width: 900px ) { .pols-analytics-cards { grid-template-columns: repeat( 2, 1fr ); } } @media ( max-width: 560px ) { .pols-analytics-cards { grid-template-columns: 1fr; } .pols-analytics-card__value { font-size: 28px; } .pols-analytics-section { padding: 20px 16px; } .pols-analytics-chart, .pols-analytics-pie { height: 280px; } /* Collapse wider columns of the presenters table on mobile: hide vote count (least critical), keep sessions + participants. */ .pols-analytics-presenters-table thead th:nth-child(4), .pols-analytics-presenters-table tbody td:nth-child(4) { display: none; } } /* ========================================================================== Phase 4h — Network admin ========================================================================== */ .pols-network-tabs { display: flex; gap: 2px; border-bottom: 1px solid var( --pols-divider, #e4e7eb ); margin-bottom: 24px; padding: 0; } .pols-network-tabs__tab { background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 12px 20px; font-weight: 500; color: var( --pols-muted, #666 ); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .pols-network-tabs__tab:hover { color: var( --pols-primary, #1a6e7a ); } .pols-network-tabs__tab.is-active { color: var( --pols-primary, #1a6e7a ); border-bottom-color: var( --pols-primary, #1a6e7a ); } .pols-network-tabs__tab:focus-visible { outline: 2px solid var( --pols-primary, #1a6e7a ); outline-offset: 2px; } .pols-network-panel[hidden] { display: none; } .pols-network-loading, .pols-network-empty, .pols-network-error { padding: 24px; color: var( --pols-muted, #666 ); font-size: 14px; } .pols-network-error p { margin: 0 0 12px 0; color: #c3292e; } /* Institutions table */ .pols-network-institutions { width: 100%; border-collapse: collapse; font-size: 14px; } .pols-network-institutions th, .pols-network-institutions td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var( --pols-divider, #e4e7eb ); } .pols-network-institutions th { font-weight: 600; color: var( --pols-muted, #666 ); text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; } .pols-network-institutions th.is-numeric, .pols-network-institutions td.is-numeric { text-align: right; font-variant-numeric: tabular-nums; } .pols-network-institutions tbody tr:hover { background: color-mix( in oklab, var( --pols-primary, #1a6e7a ) 4%, transparent ); } .pols-network-institutions__name { font-weight: 600; } .pols-network-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; font-size: 11px; font-weight: 500; background: color-mix( in oklab, var( --pols-primary, #1a6e7a ) 15%, transparent ); color: var( --pols-primary, #1a6e7a ); border-radius: 12px; } .pols-network-row-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* Settings panel — sticky save footer reuses Phase 4e tokens where possible, plus a small nested Ably section. */ .pols-network-settings { max-width: 720px; display: flex; flex-direction: column; gap: 24px; } .pols-network-settings__intro { color: var( --pols-muted, #666 ); font-size: 14px; margin: 0; } .pols-network-settings__section { border: 1px solid var( --pols-divider, #e4e7eb ); border-radius: 8px; padding: 20px 24px; background: #fff; } .pols-network-settings__section h3 { margin: 0 0 16px 0; font-size: 15px; font-weight: 600; } .pols-network-settings__row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .pols-network-settings__row:last-child { margin-bottom: 0; } .pols-network-settings__row label { font-weight: 500; font-size: 13px; } .pols-network-settings__color { display: flex; align-items: center; gap: 10px; } .pols-network-settings__color input[type="color"] { width: 44px; height: 32px; border: 1px solid var( --pols-divider, #e4e7eb ); border-radius: 4px; padding: 0; cursor: pointer; } .pols-network-settings__color input[type="text"] { flex: 0 0 120px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } .pols-network-settings__hint { color: var( --pols-muted, #666 ); font-size: 12px; } .pols-network-ably-current { padding: 12px 16px; background: color-mix( in oklab, var( --pols-muted, #666 ) 6%, transparent ); border-radius: 6px; font-size: 14px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .pols-network-ably-current code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } .pols-network-ably-clear-hint { margin-top: 8px; color: #b26a00; font-size: 13px; } .pols-network-ably-error { margin-top: 6px; color: #c3292e; font-size: 13px; } .pols-settings-footer { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var( --pols-divider, #e4e7eb ); padding: 12px 16px; display: flex; gap: 12px; justify-content: flex-end; align-items: center; box-shadow: 0 -2px 8px rgba( 0, 0, 0, 0.04 ); border-radius: 0 0 8px 8px; } .pols-settings-footer[hidden] { display: none; } .pols-settings-footer__status { margin-right: auto; color: var( --pols-muted, #666 ); font-size: 13px; } /* Create form */ .pols-network-create-wrap h2 { margin: 0 0 8px 0; font-size: 18px; font-weight: 600; } .pols-network-create__intro { color: var( --pols-muted, #666 ); font-size: 14px; margin: 0 0 20px 0; max-width: 520px; } .pols-network-create { max-width: 520px; display: flex; flex-direction: column; gap: 20px; } .pols-network-create__field label { display: block; font-weight: 500; margin-bottom: 6px; font-size: 13px; } .pols-network-create__field input { width: 100%; } .pols-network-create__hint { display: block; margin-top: 6px; color: var( --pols-muted, #666 ); font-size: 13px; } .pols-network-create__hint strong { color: var( --pols-primary, #1a6e7a ); font-weight: 600; } .pols-network-create__error { margin-top: 6px; color: #c3292e; font-size: 13px; } .pols-network-create__actions { display: flex; justify-content: flex-start; } /* Mobile */ @media ( max-width: 720px ) { .pols-network-tabs { overflow-x: auto; white-space: nowrap; } .pols-network-institutions th:nth-child(4), .pols-network-institutions td:nth-child(4), .pols-network-institutions th:nth-child(5), .pols-network-institutions td:nth-child(5) { display: none; /* hide Participants + Presenters cols on mobile */ } .pols-network-row-actions { flex-direction: column; } .pols-network-settings__section { padding: 16px; } } /*────────────────────────────────────────── * Phase 6a.2 — Email-first login picker *────────────────────────────────────────*/ .pols-login-picker { margin-top: 8px; } .pols-login-picker__title { font-size: 18px; font-weight: 600; margin: 0 0 8px; color: var( --pols-primary ); } .pols-login-picker__intro { font-size: 14px; color: var( --pols-text-muted ); margin: 0 0 16px; } .pols-login-picker__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .pols-login-picker__link { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var( --pols-border ); border-radius: var( --pols-radius ); background: var( --pols-surface ); color: inherit; text-decoration: none; transition: border-color 0.15s, background 0.15s, transform 0.05s; } .pols-login-picker__link:hover, .pols-login-picker__link:focus-visible { border-color: var( --pols-primary ); background: color-mix( in srgb, var( --pols-primary ) 6%, var( --pols-surface ) ); outline: none; } .pols-login-picker__link:active { transform: translateY( 1px ); } .pols-login-picker__label { font-weight: 600; font-size: 15px; } .pols-login-picker__host { font-size: 13px; color: var( --pols-text-muted ); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .pols-login-back { text-align: center; margin: 16px 0 0; font-size: 13px; } .pols-login-back a { color: var( --pols-text-muted ); } /* ───────────────────────────────────────────────────────────────── Phase 6b — Registration, Verification & Domain Routing ───────────────────────────────────────────────────────────────── */ /* Welcome banner on dashboard */ .pols-welcome-banner { margin-bottom: 20px; } /* Check-email page */ .pols-check-email-body { margin-bottom: 16px; } .pols-check-email-message { font-size: 15px; margin-bottom: 8px; } .pols-check-email-resend { border-top: 1px solid var( --pols-border ); padding-top: 16px; margin-top: 16px; } .pols-check-email-resend__hint { font-size: 13px; color: var( --pols-text-muted ); margin-bottom: 12px; } /* Verify-email page */ .pols-verify-state { margin: 8px 0 16px; } .pols-verify-state .pols-loading { display: flex; align-items: center; gap: 10px; color: var( --pols-text-muted ); font-size: 14px; } /* Network domains table */ .pols-network-domains { width: 100%; border-collapse: collapse; margin-bottom: 24px; } .pols-network-domains th, .pols-network-domains td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var( --pols-border ); font-size: 14px; } .pols-network-domains th { font-weight: 600; background: var( --pols-surface ); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var( --pols-text-muted ); } .pols-network-domains tr:hover td { background: color-mix( in srgb, var( --pols-primary ) 4%, transparent ); } /* Add-domain form */ .pols-network-add-domain { max-width: 560px; } .pols-network-add-domain-form { display: grid; gap: 12px; } @media ( min-width: 720px ) { .pols-network-add-domain-form { grid-template-columns: 1fr 1fr auto; align-items: end; } .pols-network-add-domain-form > div:nth-child(3) { grid-column: 1 / -2; } } /* Danger-ghost button variant */ .pols-btn--danger-ghost { background: transparent; border: 1px solid var( --pols-danger, #c0392b ); color: var( --pols-danger, #c0392b ); } .pols-btn--danger-ghost:hover { background: color-mix( in srgb, var( --pols-danger, #c0392b ) 8%, transparent ); } /* Phase 6c — Pending presenter approval UI */ .pols-pending-banner { display: flex; gap: 1rem; align-items: center; justify-content: space-between; background: color-mix( in srgb, var( --pols-primary ) 8%, white ); border: 1px solid color-mix( in srgb, var( --pols-primary ) 20%, white ); border-radius: var( --pols-radius ); padding: 0.75rem 1rem; margin-bottom: 1.5rem; } .pols-pending-banner p { margin: 0; font-weight: 500; } .pols-pending-banner .pols-btn--link { color: var( --pols-primary ); font-weight: 600; white-space: nowrap; } .pols-presenters-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var( --pols-border ); margin-bottom: 1.5rem; } .pols-presenters-tabs__tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 0.6rem 1rem; cursor: pointer; font-weight: 500; color: var( --pols-text-muted ); display: inline-flex; align-items: center; gap: 0.5rem; } .pols-presenters-tabs__tab[aria-selected="true"] { color: var( --pols-primary ); border-bottom-color: var( --pols-primary ); } .pols-presenters-tabs__tab:hover:not( [aria-selected="true"] ) { color: var( --pols-text ); } .pols-presenters-tabs__badge { background: var( --pols-primary ); color: white; border-radius: 999px; font-size: 0.75rem; padding: 0.1rem 0.5rem; font-weight: 600; } /* Pending rows sit in a subtle surface to visually distinguish from active rows */ .pols-presenters-list__row--pending { background: color-mix( in srgb, var( --pols-primary ) 3%, white ); } /* Global cross-page pending banner (shown in _layout.php on all /pols/* pages) */ .pols-global-pending-banner { display: flex; gap: 1rem; align-items: center; justify-content: space-between; background: color-mix( in srgb, var( --pols-secondary ) 10%, white ); border-left: 4px solid var( --pols-secondary ); padding: 0.65rem 1rem; font-size: 0.95rem; margin: 0 0 1.25rem; } /* Phase 4i — 403 cross-subsite workspace picker */ .pols-error-page__workspaces { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .pols-error-page__logout { display: inline-block; margin-top: 1.5rem; font-size: 0.8125rem; color: var( --pols-text-muted ); text-decoration: underline; } .pols-error-page__logout:hover { color: var( --pols-text ); } /* Fix B — Pending-presenter self-migration shell */ .pols-pending-shell { max-width: 480px; margin-inline: auto; text-align: center; gap: 16px; } .pols-pending-shell__desc { color: var( --pols-text ); font-size: 15px; line-height: 1.55; margin-bottom: 4px; } .pols-pending-shell__actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; } #pols-switch-status:not(:empty) { margin-top: 8px; padding: 10px 14px; border-radius: var( --pols-radius, 6px ); font-size: 14px; text-align: left; } /* Fix C — Profile page */ .pols-profile { max-width: 560px; } .pols-profile-actions { margin-top: 4px; }