/* GMT Study Planner — design tokens --------------------------------------------------------------- THEME-MATCHED to globalmedtutor.com (Astra). To sync exactly with your Astra Global Colours, edit ONLY the four values in the "BRAND" group below. Everything else derives. --------------------------------------------------------------- */ /* v1.30.0 — TOKENS ON :root, LAYOUT ON THE COMPONENT. ----------------------------------------------------------------- v1.29.0 wrote `:root, #gmt-study-planner-root { ... }` — which shared the tokens (correct) but ALSO applied every layout property in the block to :root, i.e. to itself. That put `overflow: hidden`, `max-width: 900px`, `min-height`, a border and a margin on the whole DOCUMENT — which froze page scrolling site-wide. The two concerns are now separate, and must stay separate: :root -> variables ONLY. Never layout. #gmt-study-planner-root -> the component's own box. ----------------------------------------------------------------- */ /* Variables ONLY. Do not add layout properties to this block — the help modal is appended to document.body, so these must be reachable from outside the planner, but must not inherit the planner's box. */ :root { /* ---- BRAND: the only lines you should need to touch ---- */ --gmt-blue: #1077C3; /* Astra primary / header blue */ --gmt-blue-dark: #0C5E9B; /* hover / pressed */ --gmt-navy: #24285B; /* Astra top utility bar */ --gmt-ink: #2B2B2B; /* Astra body text */ /* -------------------------------------------------------- */ --gmt-paper: #FFFFFF; --gmt-surface: #F7F9FB; --gmt-ink-soft: #5A6570; --gmt-line: #E2E8ED; --gmt-blue-soft: #E8F2FA; --gmt-amber: #C4831F; --gmt-amber-soft: #FDF1DC; --gmt-green: #2F6B49; --gmt-green-soft: #DCEBE1; --gmt-red: #C0392B; --gmt-red-soft: #FDECEC; --gmt-white: #FFFFFF; --gmt-radius: 6px; --gmt-radius-lg: 10px; --gmt-sans: inherit; --gmt-serif: inherit; } /* The planner's own box. Layout lives HERE, and only here. */ #gmt-study-planner-root { font-family: var(--gmt-sans); color: var(--gmt-ink); background: var(--gmt-paper); max-width: 900px; min-height: 70vh; margin: 0 auto; border: 1px solid var(--gmt-line); border-radius: var(--gmt-radius); overflow: hidden; overflow-anchor: none; transition: background 0.25s ease, color 0.25s ease; } /* Initial loading placeholder — fills the reserved height while the async login check runs, so the layout stays stable (part of the Back/footer fix). */ .gmt-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 60vh; padding: 60px 20px; color: var(--gmt-ink-soft); font-size: 0.9rem; } .gmt-loading-spinner { width: 34px; height: 34px; border: 3px solid var(--gmt-line); border-top-color: var(--gmt-blue); border-radius: 50%; animation: gmt-spin 0.8s linear infinite; } @keyframes gmt-spin { to { transform: rotate(360deg); } } /* Boot placeholder shown until the app's first render replaces it. */ .gmt-boot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 60vh; color: var(--gmt-ink-soft); } .gmt-boot-spinner { width: 34px; height: 34px; border: 3px solid var(--gmt-line); border-top-color: var(--gmt-blue); border-radius: 50%; animation: gmt-spin 0.8s linear infinite; } .gmt-boot-text { font-size: 0.85rem; letter-spacing: 0.01em; } @keyframes gmt-spin { to { transform: rotate(360deg); } } #gmt-study-planner-root * { box-sizing: border-box; } #gmt-study-planner-root h1, #gmt-study-planner-root h2, #gmt-study-planner-root h3 { font-family: var(--gmt-serif); font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; } /* v1.25.0 — the header was a flat charcoal slab (var(--gmt-ink) = Astra's BODY TEXT colour, #2B2B2B). Against a blue site it read as a foreign black box with a hard seam. It now uses the brand navy→blue ramp, so the panel reads as a continuation of the site header rather than a separate app. */ .gmt-header { background: linear-gradient(135deg, var(--gmt-navy) 0%, var(--gmt-blue-dark) 62%, var(--gmt-blue) 100%); color: var(--gmt-white); padding: 20px 28px 18px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; } /* soft light bloom, keeps the large flat fill from looking dead */ .gmt-header::after { content: ''; position: absolute; top: -60%; right: -10%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%); pointer-events: none; } .gmt-header > * { position: relative; z-index: 1; } .gmt-header h1 { color: var(--gmt-white); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; } /* Meta row — step chip + save pill now share the title's baseline instead of stacking in a right-aligned column beneath the buttons. */ .gmt-header-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-left: 50px; /* clears the avatar, aligns under the title text */ } .gmt-step-chip { font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); padding: 4px 12px; border-radius: 20px; backdrop-filter: blur(2px); } .gmt-header .gmt-eyebrow { font-family: var(--gmt-sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-bottom: 4px; } .gmt-chart-tab { font-size: 0.78rem; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); padding: 5px 12px; border-radius: 20px; color: rgba(255,255,255,0.92); } .gmt-body { padding: 26px 28px 32px; } /* Vitals & Progress */ .gmt-vitals { display: flex; align-items: center; gap: 16px; background: var(--gmt-white); border: 1px solid var(--gmt-line); border-radius: var(--gmt-radius); padding: 16px 20px; margin-bottom: 24px; } .gmt-vitals-track { flex: 1; height: 10px; background: var(--gmt-blue-soft); border-radius: 5px; position: relative; overflow: hidden; } .gmt-vitals-fill { height: 100%; background: var(--gmt-blue); border-radius: 5px; transition: width 0.4s ease; } .gmt-vitals-label { font-family: var(--gmt-serif); font-size: 1.5rem; font-weight: 600; min-width: 64px; text-align: right; color: var(--gmt-blue); } .gmt-vitals-sub { font-size: 0.8rem; color: var(--gmt-ink-soft); } .gmt-field { margin-bottom: 18px; } .gmt-field label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; color: var(--gmt-ink); } .gmt-field .gmt-hint { font-size: 0.76rem; color: var(--gmt-ink-soft); margin-top: 4px; } #gmt-study-planner-root input[type="email"], #gmt-study-planner-root input[type="date"], #gmt-study-planner-root input[type="number"], #gmt-study-planner-root select { font-family: var(--gmt-sans); font-size: 0.92rem; padding: 9px 11px; border: 1px solid var(--gmt-line); border-radius: var(--gmt-radius); background: var(--gmt-white); color: var(--gmt-ink); width: 100%; } #gmt-study-planner-root input:focus, #gmt-study-planner-root select:focus, #gmt-study-planner-root button:focus { outline: 2px solid var(--gmt-amber); outline-offset: 1px; } .gmt-row { display: flex; gap: 14px; flex-wrap: wrap; } .gmt-row .gmt-field { flex: 1; min-width: 140px; } .gmt-btn { font-family: var(--gmt-sans); font-weight: 600; font-size: 0.88rem; padding: 11px 22px; border-radius: var(--gmt-radius); border: none; cursor: pointer; background: var(--gmt-blue); color: var(--gmt-white); } .gmt-btn:hover { background: var(--gmt-blue-dark); } /* v1.35.0 — THE "MISSING" CANCEL BUTTON. The button was always in the DOM and always clickable — it just wasn't visible. The base .gmt-btn rule paints every button solid blue, and the secondary override was losing somewhere: most likely a WordPress THEME rule targeting `button` or `.wp-block-button` inside the post content, which is exactly the sort of thing that only shows up on the real site and never in isolation. Rather than keep guessing at which theme rule is winning, this is made unambiguous: !important on the three properties that define the button, and an explicit high-specificity selector. Ugly, but a Cancel button the student cannot see is a trap, and a trap is worse than an ugly stylesheet. */ #gmt-study-planner-root .gmt-btn.gmt-btn-secondary, #gmt-study-planner-root button.gmt-btn.gmt-btn-secondary { background: transparent !important; border: 1px solid var(--gmt-line) !important; color: var(--gmt-ink) !important; box-shadow: none !important; } #gmt-study-planner-root .gmt-btn.gmt-btn-secondary:hover, #gmt-study-planner-root button.gmt-btn.gmt-btn-secondary:hover { background: var(--gmt-line) !important; color: var(--gmt-ink) !important; } .gmt-btn:disabled { opacity: 0.5; cursor: not-allowed; background: var(--gmt-ink-soft); } .gmt-confidence-row { display: grid; grid-template-columns: 1fr 140px auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gmt-line); } .gmt-confidence-row:last-child { border-bottom: none; } .gmt-confidence-name { font-size: 0.9rem; font-weight: 600; color: var(--gmt-blue); } .gmt-subject-name-lg { color: var(--gmt-blue); } .gmt-subject-name { color: var(--gmt-blue); font-weight: 600; font-size: 0.86rem; } .gmt-confidence-weight { font-size: 0.72rem; color: var(--gmt-ink-soft); } .gmt-confidence-value { font-family: var(--gmt-serif); font-weight: 600; font-size: 0.9rem; text-align: right; min-width: 90px; } #gmt-study-planner-root input[type="range"] { width: 100%; accent-color: var(--gmt-amber); } .gmt-today-card { background: linear-gradient(135deg, var(--gmt-white) 0%, var(--gmt-blue-soft) 130%); border: 1px solid var(--gmt-line); border-radius: 10px; padding: 20px 22px; margin-bottom: 22px; } .gmt-today-headline { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .gmt-today-hours-num { font-family: var(--gmt-serif); font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--gmt-blue); flex: 0 0 auto; } .gmt-today-headline-text { display: flex; flex-direction: column; min-width: 0; } .gmt-today-hours-label { font-size: 1.02rem; font-weight: 700; color: var(--gmt-ink); } .gmt-today-hours-tag { font-size: 0.8rem; color: var(--gmt-ink-soft); margin-top: 2px; } /* Proportional stacked time-budget bar */ .gmt-budget-bar { display: flex; width: 100%; height: 36px; border-radius: 9px; overflow: hidden; margin-bottom: 14px; border: 1px solid var(--gmt-line); box-shadow: inset 0 1px 3px rgba(0,0,0,0.06); } .gmt-budget-seg { display: flex; align-items: center; justify-content: center; min-width: 0; color: #fff; font-size: 0.72rem; font-weight: 700; white-space: nowrap; overflow: hidden; transition: width 0.4s ease; } .gmt-budget-seg-txt { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgba(0,0,0,0.28); } /* Rest-day state */ .gmt-today-rest { display: flex; align-items: center; gap: 14px; } .gmt-today-rest-icon { font-size: 1.7rem; line-height: 1; } .gmt-mode-split { display: flex; gap: 10px; flex-wrap: wrap; } .gmt-mode-chip { --gmt-mode-accent: var(--gmt-blue); display: flex; align-items: center; gap: 8px; background: var(--gmt-white); border: 1px solid var(--gmt-line); border-left: 3px solid var(--gmt-mode-accent); border-radius: 8px; padding: 8px 12px; flex: 1 1 130px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: transform 0.15s ease, box-shadow 0.15s ease; } .gmt-mode-chip:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.08); } .gmt-mode-chip-icon { font-size: 1.15rem; line-height: 1; } .gmt-mode-chip-time { font-family: var(--gmt-serif); font-weight: 700; font-size: 0.95rem; color: var(--gmt-ink); line-height: 1.2; } .gmt-mode-chip-label { font-size: 0.72rem; color: var(--gmt-ink-soft); text-transform: uppercase; letter-spacing: 0.03em; } .gmt-topic-list { list-style: none; margin: 0; padding: 0; } .gmt-topic-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gmt-line); flex-wrap: wrap; } .gmt-topic-item:last-child { border-bottom: none; } .gmt-topic-meta { flex: 1; min-width: 200px; } .gmt-topic-name { font-size: 0.92rem; font-weight: 600; } .gmt-topic-sub { font-size: 0.76rem; color: var(--gmt-ink-soft); margin-top: 2px; } .gmt-badge { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 10px; } .gmt-badge-overdue { background: var(--gmt-red-soft); color: var(--gmt-red); } .gmt-badge-soon { background: var(--gmt-amber-soft); color: var(--gmt-amber); } .gmt-badge-upcoming { background: var(--gmt-blue-soft); color: var(--gmt-blue); } .gmt-mix-total { font-size: 0.82rem; font-weight: 600; margin-top: 4px; margin-bottom: 8px; } .gmt-mix-ok { color: var(--gmt-green); } .gmt-mix-warn { color: var(--gmt-red); } .gmt-pace-banner { padding: 14px 18px; border-radius: var(--gmt-radius); margin-bottom: 18px; font-size: 0.86rem; line-height: 1.5; } .gmt-pace-banner b { font-family: var(--gmt-serif); } .gmt-pace-banner.gmt-pace-ok { background: var(--gmt-green-soft); color: var(--gmt-green); border: 1px solid var(--gmt-green); } .gmt-pace-banner.gmt-pace-warn { background: var(--gmt-amber-soft); color: var(--gmt-red); border: 1px solid var(--gmt-amber); } .gmt-dist-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .gmt-dist-label { flex: 0 0 96px; font-size: 0.8rem; color: var(--gmt-ink-soft); font-weight: 600; } .gmt-dist-track { flex: 1; height: 14px; background: var(--gmt-surface); border-radius: 7px; overflow: hidden; } .gmt-dist-fill { height: 100%; border-radius: 7px; transition: width 0.4s ease; } .gmt-dist-value { flex: 0 0 70px; text-align: right; font-size: 0.78rem; color: var(--gmt-ink-soft); } .gmt-status-select { font-size: 0.78rem; padding: 5px 8px; border: 1px solid var(--gmt-line); border-radius: var(--gmt-radius); background: var(--gmt-white); } .gmt-tabs { display: flex; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--gmt-line); } .gmt-tab { font-size: 0.85rem; font-weight: 600; padding: 10px 4px; cursor: pointer; color: var(--gmt-ink-soft); border-bottom: 2px solid transparent; background: none; border-top: none; border-left: none; border-right: none; } .gmt-tab.active { color: var(--gmt-ink); border-bottom-color: var(--gmt-amber); } /* --- Topic Tracker: header progress, filters, status cards --- */ .gmt-tracker-title { color: var(--gmt-blue); margin: 0 0 12px; font-size: 1.3rem; } .gmt-tracker-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .gmt-tracker-progress-track { flex: 1; height: 9px; background: var(--gmt-paper); border: 1px solid var(--gmt-line); border-radius: 6px; overflow: hidden; } .gmt-tracker-progress-fill { height: 100%; background: var(--gmt-green); border-radius: 6px; transition: width 0.45s ease; } .gmt-tracker-progress-label { font-size: 0.78rem; color: var(--gmt-ink-soft); font-weight: 600; white-space: nowrap; } .gmt-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 6px; } .gmt-filter-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--gmt-sans); font-size: 0.8rem; font-weight: 600; color: var(--gmt-ink-soft); background: var(--gmt-white); border: 1px solid var(--gmt-line); border-radius: 16px; padding: 5px 12px; cursor: pointer; transition: all 0.15s ease; } .gmt-filter-chip:hover { border-color: var(--gmt-blue); color: var(--gmt-blue); } .gmt-filter-chip.active { background: var(--gmt-ink); color: #fff; border-color: var(--gmt-ink); } .gmt-filter-count { font-size: 0.7rem; font-weight: 700; background: rgba(0,0,0,0.08); padding: 1px 7px; border-radius: 9px; } .gmt-filter-chip.active .gmt-filter-count { background: rgba(255,255,255,0.24); } .gmt-topic-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .gmt-topic-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--gmt-white); border: 1px solid var(--gmt-line); border-left: 4px solid var(--gmt-line); border-radius: 6px; flex-wrap: wrap; } .gmt-topic-card .gmt-topic-body { flex: 1; min-width: 180px; } .gmt-topic-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gmt-line); flex-shrink: 0; } .gmt-topic-card .gmt-topic-name { font-size: 0.92rem; font-weight: 600; line-height: 1.35; } .gmt-topic-tags { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; } .gmt-discipline-tag { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gmt-ink-soft); background: var(--gmt-paper); border: 1px solid var(--gmt-line); padding: 2px 7px; border-radius: 4px; } .gmt-topic-due { font-size: 0.74rem; color: var(--gmt-ink-soft); } .gmt-topic-card .gmt-status-select { margin-left: auto; flex-shrink: 0; } /* status colour-coding */ .gmt-topic-not_started { border-left-color: var(--gmt-line); } .gmt-topic-not_started .gmt-topic-dot { background: var(--gmt-line); } .gmt-topic-studied { border-left-color: var(--gmt-amber); } .gmt-topic-studied .gmt-topic-dot { background: var(--gmt-amber); } .gmt-topic-reviewed { border-left-color: var(--gmt-blue); } .gmt-topic-reviewed .gmt-topic-dot { background: var(--gmt-blue); } .gmt-topic-mastered { border-left-color: var(--gmt-green); background: var(--gmt-green-soft); } .gmt-topic-mastered .gmt-topic-dot { background: var(--gmt-green); } .gmt-topic-mastered .gmt-topic-name { color: var(--gmt-green); } .gmt-status-select.gmt-status-mastered { border-color: var(--gmt-green); color: var(--gmt-green); font-weight: 600; } .gmt-empty-filter { text-align: center; padding: 34px 16px; color: var(--gmt-ink-soft); font-size: 0.9rem; } /* Quick-jump: collapsed toggle + expandable compact pill index */ .gmt-jump-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-family: var(--gmt-sans); font-size: 0.8rem; font-weight: 600; color: var(--gmt-blue); background: none; border: 1px dashed var(--gmt-line); border-radius: 16px; padding: 5px 14px; cursor: pointer; transition: all 0.15s ease; } .gmt-jump-toggle:hover { background: var(--gmt-blue-soft); border-color: var(--gmt-blue); } .gmt-jump-toggle.active { background: var(--gmt-blue-soft); border-style: solid; border-color: var(--gmt-blue); } .gmt-jump-index { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 12px; background: var(--gmt-paper); border: 1px solid var(--gmt-line); border-radius: 6px; } .gmt-jump-pill { font-family: var(--gmt-sans); font-size: 0.74rem; padding: 4px 9px; border-radius: 12px; background: var(--gmt-white); border: 1px solid var(--gmt-line); color: var(--gmt-ink-soft); cursor: pointer; transition: all 0.12s ease; } .gmt-jump-pill:hover { border-color: var(--gmt-blue); color: var(--gmt-blue); } .gmt-jump-mastered { background: var(--gmt-green-soft); color: var(--gmt-green); border-color: var(--gmt-green); } .gmt-jump-studied { border-color: var(--gmt-amber); color: var(--gmt-amber); } .gmt-jump-reviewed { border-color: var(--gmt-blue); color: var(--gmt-blue); } /* Flash ring when a jump lands on a card (doesn't touch the status bg) */ .gmt-topic-card.gmt-flash { animation: gmt-flash-anim 1.5s ease; } @keyframes gmt-flash-anim { 0%, 65% { box-shadow: 0 0 0 3px var(--gmt-amber); } 100% { box-shadow: 0 0 0 3px rgba(196,131,31,0); } } /* --- SIDEBAR LAYOUT FOR TOPIC TRACKER --- */ .gmt-tracker-layout { display: flex; gap: 20px; align-items: flex-start; margin-top: 16px; } .gmt-tracker-sidebar { width: 270px; flex-shrink: 0; background: var(--gmt-white); border: 1px solid var(--gmt-line); border-radius: var(--gmt-radius); overflow: hidden; } .gmt-sidebar-item { padding: 14px 16px; font-size: 0.85rem; font-weight: 600; color: var(--gmt-ink-soft); cursor: pointer; border-bottom: 1px solid var(--gmt-line); display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; } .gmt-sidebar-item:last-child { border-bottom: none; } .gmt-sidebar-item:hover { background: var(--gmt-paper); } .gmt-sidebar-item.active { background: var(--gmt-blue-soft); color: var(--gmt-blue); border-left: 4px solid var(--gmt-blue); padding-left: 12px; } .gmt-sidebar-count { font-size: 0.7rem; background: rgba(0,0,0,0.06); padding: 2px 7px; border-radius: 10px; color: inherit; } .gmt-tracker-content { flex: 1; min-width: 0; background: var(--gmt-white); border: 1px solid var(--gmt-line); border-radius: var(--gmt-radius); padding: 20px; } /* --- ANALYTICS DASHBOARD LAYOUT --- */ .gmt-analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .gmt-stat-card { background: var(--gmt-white); border: 1px solid var(--gmt-line); border-radius: var(--gmt-radius); padding: 20px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.02); } .gmt-stat-value { font-family: var(--gmt-serif); font-size: 2rem; font-weight: 600; color: var(--gmt-blue); margin-bottom: 4px; } .gmt-stat-label { font-size: 0.8rem; color: var(--gmt-ink-soft); text-transform: uppercase; letter-spacing: 0.05em; } .gmt-chart-container { background: var(--gmt-white); border: 1px solid var(--gmt-line); border-radius: var(--gmt-radius); padding: 20px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); } .gmt-chart-header { font-family: var(--gmt-serif); font-size: 1.1rem; font-weight: 600; color: var(--gmt-ink); margin-bottom: 16px; border-bottom: 1px solid var(--gmt-line); padding-bottom: 8px; } /* --- Save status pill (header) --- */ .gmt-save-pill { font-size: 0.72rem; padding: 2px 9px; border-radius: 10px; min-height: 1em; text-align: right; } .gmt-save-pill.gmt-save-idle { opacity: 0; } .gmt-save-pill.gmt-save-pending { color: var(--gmt-amber); } .gmt-save-pill.gmt-save-saving { color: var(--gmt-ink-soft); } .gmt-save-pill.gmt-save-saved { color: var(--gmt-green); } .gmt-save-pill.gmt-save-error { color: var(--gmt-red); font-weight: 600; } /* --- Marketing consent checkbox on the gate screen --- */ .gmt-consent-label { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 18px; font-size: 0.82rem; color: var(--gmt-ink-soft); cursor: pointer; } .gmt-consent-label input { margin-top: 3px; } #gmt-study-planner-root input.gmt-code-input { width: 100%; max-width: 220px; font-size: 1.4rem; letter-spacing: 0.5em; text-align: center; padding: 12px 11px; font-family: var(--gmt-sans); } /* --- Header identity strip: avatar, readiness score, streak --- */ .gmt-header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; width: 100%; } .gmt-header-left { display: flex; align-items: center; gap: 12px; } .gmt-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gmt-amber); color: var(--gmt-ink); font-family: var(--gmt-serif); font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gmt-header-actions { display: flex; align-items: center; gap: 8px; } .gmt-icon-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: var(--gmt-blue-soft); border-radius: var(--gmt-radius); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.95rem; line-height: 1; } .gmt-icon-btn:hover { background: rgba(255,255,255,0.16); } .gmt-readiness-badge { display: inline-flex; align-items: baseline; gap: 5px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; padding: 4px 12px 4px 10px; } .gmt-readiness-badge .gmt-readiness-value { font-family: var(--gmt-serif); font-weight: 700; font-size: 1rem; color: var(--gmt-amber-soft); } .gmt-readiness-badge .gmt-readiness-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.72); } .gmt-streak-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.76rem; font-weight: 600; color: var(--gmt-amber-soft); background: rgba(255,255,255,0.06); border-radius: 12px; padding: 3px 10px; } /* Readiness badge is tappable (opens an explainer) */ .gmt-readiness-badge { cursor: pointer; } .gmt-readiness-badge:hover { background: rgba(255,255,255,0.16); } .gmt-readiness-badge:focus-visible { outline: 2px solid var(--gmt-amber); outline-offset: 2px; } .gmt-readiness-slash { font-size: 0.6rem; color: rgba(255,255,255,0.62); align-self: flex-end; margin: 0 1px 2px -3px; } /* --- Reusable info modal (readiness explainer, popup-blocked notice) --- */ .gmt-info-overlay { position: fixed; inset: 0; background: rgba(10,15,20,0.55); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 20px; } .gmt-info-card { background: #FFFFFF; color: var(--gmt-ink); max-width: 430px; width: 100%; border-radius: 12px; padding: 24px 26px; box-shadow: 0 14px 44px rgba(0,0,0,0.32); font-family: var(--gmt-sans); } .gmt-info-title { font-family: var(--gmt-serif); font-size: 1.18rem; font-weight: 600; margin: 0 0 12px; color: var(--gmt-ink); } .gmt-info-line { font-size: 0.88rem; line-height: 1.55; color: var(--gmt-ink-soft); margin: 0 0 11px; } .gmt-info-card .gmt-btn { margin-top: 6px; background: var(--gmt-blue); color: #fff; } .gmt-tab-icon { margin-right: 5px; } /* --- Landing hero on the gate/signup screen --- */ .gmt-hero { padding: 30px 28px 8px; } .gmt-hero-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gmt-amber); margin-bottom: 8px; } .gmt-hero-title { font-family: var(--gmt-serif); font-size: 1.6rem; font-weight: 600; color: var(--gmt-ink); line-height: 1.25; margin: 0 0 10px; } .gmt-hero-sub { font-size: 0.92rem; color: var(--gmt-ink-soft); line-height: 1.55; margin: 0 0 20px; max-width: 560px; } .gmt-hero-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 8px; } .gmt-hero-stat-value { font-family: var(--gmt-serif); font-size: 1.3rem; font-weight: 700; color: var(--gmt-blue); } .gmt-hero-stat-label { font-size: 0.72rem; color: var(--gmt-ink-soft); text-transform: uppercase; letter-spacing: 0.04em; } /* --- Pomodoro-style focus timer card --- */ .gmt-timer-card { background: var(--gmt-white); border: 1px solid var(--gmt-line); border-radius: var(--gmt-radius); padding: 18px 20px; margin-bottom: 22px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .gmt-timer-display { font-family: var(--gmt-serif); font-size: 2.4rem; font-weight: 700; color: var(--gmt-ink); min-width: 120px; font-variant-numeric: tabular-nums; } .gmt-timer-meta { flex: 1; min-width: 160px; } .gmt-timer-meta h3 { margin: 0 0 2px; } .gmt-timer-controls { display: flex; gap: 8px; } .gmt-timer-controls .gmt-btn { padding: 9px 16px; font-size: 0.82rem; } /* --- Weak-area heatmap (Analytics) --- */ .gmt-heatmap-grid { display: flex; flex-direction: column; gap: 6px; } .gmt-heatmap-row { display: flex; align-items: center; gap: 10px; } .gmt-heatmap-label { flex: 0 0 130px; font-size: 0.78rem; font-weight: 600; color: var(--gmt-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gmt-heatmap-cell { flex: 1; height: 26px; border-radius: 4px; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; font-size: 0.7rem; font-weight: 700; color: #fff; transition: width 0.5s ease; } .gmt-heatmap-legend { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--gmt-ink-soft); margin-top: 10px; } .gmt-heatmap-swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; } /* --- Mastery celebration flash --- */ @keyframes gmt-mastery-flash { 0% { background-color: var(--gmt-green-soft); } 100% { background-color: transparent; } } .gmt-flash-mastered { animation: gmt-mastery-flash 1.4s ease; } .gmt-mastery-toast { /* Colors are hardcoded on purpose, not var(--gmt-ink)/var(--gmt-white). This element is appended to document.body, outside #gmt-study-planner-root, so it falls outside the scope where those CSS custom properties are defined — var(--gmt-ink) resolves to nothing there, background falls back to transparent, and white text on a transparent/white page becomes invisible. Using fixed colors keeps it legible regardless of the host theme. */ position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(0); /* Solid GMT green with white text, forced with !important. The earlier version washed out to a near-invisible white pill wherever a host theme reset background/opacity on fixed elements; green also reads as "success". */ background: var(--gmt-green) !important; color: #FFFFFF !important; padding: 12px 22px; border-radius: 24px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 6px 22px rgba(0,0,0,0.28); z-index: 10000; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } .gmt-mastery-toast.gmt-toast-show { opacity: 1 !important; transform: translateX(-50%) translateY(-8px); } /* --- Leaderboard --- */ .gmt-leaderboard-list { list-style: none; margin: 0; padding: 0; } .gmt-leaderboard-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--gmt-line); } .gmt-leaderboard-row:last-child { border-bottom: none; } .gmt-leaderboard-rank { font-family: var(--gmt-serif); font-weight: 700; color: var(--gmt-ink-soft); width: 22px; text-align: center; } .gmt-leaderboard-name { flex: 1; font-weight: 600; font-size: 0.88rem; } .gmt-leaderboard-count { font-size: 0.8rem; color: var(--gmt-ink-soft); } /* --- Export / print --- */ .gmt-export-btn { background: transparent; border: 1px solid var(--gmt-line); color: var(--gmt-ink); } .gmt-chart-print-fallback { display: none; } @media print { #gmt-study-planner-root { border: none; max-width: 100%; } .gmt-tabs, .gmt-header-actions, .gmt-icon-btn, .gmt-export-btn, .gmt-status-select, .gmt-timer-card, .no-print { display: none !important; } .gmt-header { background: #fff !important; color: #000 !important; border-bottom: 2px solid #000; } .gmt-header h1, .gmt-header .gmt-eyebrow { color: #000 !important; } /* Canvas charts frequently print blank; show the static snapshot instead */ #gmtBarChart { display: none !important; } .gmt-chart-print-fallback { display: block !important; width: 100%; height: auto; } } /* --- Onboarding opt-in checkboxes (weekly recap / leaderboard) --- */ .gmt-optin-group { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 4px; } @media (max-width: 768px) { .gmt-tracker-layout { flex-direction: column; } .gmt-tracker-sidebar { width: 100%; } } @media (max-width: 560px) { .gmt-body { padding: 18px 16px 24px; } .gmt-header { padding: 18px 16px; } .gmt-confidence-row { grid-template-columns: 1fr; gap: 4px; } .gmt-confidence-value { text-align: left; } } /* =================================================================== Attendance & capacity (v1.21.0) Design rule: soft about the person, hard about the arithmetic. Attendance is a MEASUREMENT and is never rendered in red — red is reserved exclusively for "this plan is now mathematically impossible", which is a fact about the calendar, not a verdict on the student. =================================================================== */ /* Neutral, informational banner — the capacity mismatch. Grey/blue, not amber, because nothing has gone wrong: the plan simply needs to match the week the student actually has. */ #gmt-study-planner-root .gmt-pace-banner.gmt-pace-info { background: var(--gmt-blue-soft); color: var(--gmt-ink); border: 1px solid var(--gmt-blue); } /* A number without an adjacent action is just an accusation — every banner carries its own lever. */ #gmt-study-planner-root .gmt-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } #gmt-study-planner-root .gmt-btn-sm { font-size: 0.78rem; padding: 6px 12px; } #gmt-study-planner-root .gmt-btn-ghost { background: transparent; color: var(--gmt-ink-soft); border: 1px solid var(--gmt-line); } #gmt-study-planner-root .gmt-btn-ghost:hover { background: var(--gmt-white); color: var(--gmt-ink); } #gmt-study-planner-root .gmt-att { background: var(--gmt-white); border: 1px solid var(--gmt-line); border-radius: 12px; padding: 20px; margin-bottom: 24px; } #gmt-study-planner-root .gmt-att-title { font-family: var(--gmt-serif); font-size: 1.05rem; margin: 0 0 4px; color: var(--gmt-ink); } #gmt-study-planner-root .gmt-att-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin: 16px 0 20px; } #gmt-study-planner-root .gmt-att-stat { border-left: 2px solid var(--gmt-line); padding-left: 12px; } #gmt-study-planner-root .gmt-att-stat-val { font-family: var(--gmt-serif); font-size: 1.6rem; font-weight: 600; color: var(--gmt-ink); line-height: 1.1; } #gmt-study-planner-root .gmt-att-stat-key { font-size: 0.8rem; font-weight: 600; color: var(--gmt-ink-soft); margin-top: 2px; } #gmt-study-planner-root .gmt-att-stat-sub { font-size: 0.74rem; color: var(--gmt-ink-soft); opacity: 0.8; margin-top: 1px; } /* The heatmap. Green-through-pale, never red: a low Saturday is an instruction to fix the plan, not a stain on the student. */ #gmt-study-planner-root .gmt-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 14px; } #gmt-study-planner-root .gmt-heat-col { text-align: center; } #gmt-study-planner-root .gmt-heat-cell { height: 46px; display: flex; align-items: center; justify-content: center; border-radius: var(--gmt-radius); font-size: 0.78rem; font-weight: 600; border: 1px solid var(--gmt-line); } #gmt-study-planner-root .gmt-heat-rest { background: repeating-linear-gradient(45deg, var(--gmt-surface), var(--gmt-surface) 4px, var(--gmt-surface) 4px, var(--gmt-surface) 8px); color: var(--gmt-ink-soft); opacity: 0.7; } #gmt-study-planner-root .gmt-heat-label { font-size: 0.7rem; color: var(--gmt-ink-soft); margin-top: 4px; } #gmt-study-planner-root .gmt-att-insight { background: var(--gmt-blue-soft); border: 1px solid var(--gmt-blue); border-radius: var(--gmt-radius); padding: 12px 14px; font-size: 0.84rem; line-height: 1.5; margin-bottom: 14px; } #gmt-study-planner-root .gmt-att-insight b { font-family: var(--gmt-serif); } #gmt-study-planner-root .gmt-att-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } #gmt-study-planner-root .gmt-att-reason-pill { font-size: 0.74rem; font-weight: 600; color: var(--gmt-ink-soft); background: var(--gmt-paper); border: 1px solid var(--gmt-line); border-radius: 12px; padding: 3px 10px; } #gmt-study-planner-root .gmt-att-log { border-top: 1px solid var(--gmt-line); padding-top: 12px; } #gmt-study-planner-root .gmt-att-log-head { font-size: 0.76rem; color: var(--gmt-ink-soft); margin-bottom: 8px; } #gmt-study-planner-root .gmt-att-log-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed var(--gmt-line); } #gmt-study-planner-root .gmt-att-log-row:last-child { border-bottom: none; } #gmt-study-planner-root .gmt-att-log-date { font-size: 0.8rem; font-weight: 600; color: var(--gmt-ink); min-width: 110px; flex: 0 0 auto; } #gmt-study-planner-root .gmt-att-log-pills { display: flex; flex-wrap: wrap; gap: 5px; } #gmt-study-planner-root .gmt-att-tag { font-family: var(--gmt-sans); cursor: pointer; font-size: 0.72rem; padding: 3px 9px; border-radius: 12px; background: var(--gmt-white); color: var(--gmt-ink-soft); border: 1px solid var(--gmt-line); } #gmt-study-planner-root .gmt-att-tag:hover { border-color: var(--gmt-ink-soft); color: var(--gmt-ink); } #gmt-study-planner-root .gmt-att-tag-on { background: var(--gmt-ink); color: var(--gmt-white); border-color: var(--gmt-ink); } @media (max-width: 600px) { #gmt-study-planner-root .gmt-heat-cell { height: 38px; font-size: 0.68rem; } #gmt-study-planner-root .gmt-att-log-date { min-width: 100%; } } /* =================================================================== Header actions: Need help? / Log out (v1.22.0 – v1.23.0) Both sit in the dark header. Deliberately quiet — they are utilities, not calls to action, and must never compete with the student's work. =================================================================== */ #gmt-study-planner-root .gmt-help-btn, #gmt-study-planner-root .gmt-logout-btn { font-family: var(--gmt-sans); cursor: pointer; font-size: 0.76rem; font-weight: 600; color: rgba(255, 255, 255, 0.62); background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; padding: 4px 12px; line-height: 1.4; white-space: nowrap; } #gmt-study-planner-root .gmt-help-btn:hover, #gmt-study-planner-root .gmt-help-btn:focus-visible, #gmt-study-planner-root .gmt-logout-btn:hover, #gmt-study-planner-root .gmt-logout-btn:focus-visible { color: var(--gmt-white); border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.08); } /* Modal action rows (logout confirm, help form) */ .gmt-info-overlay .gmt-info-card .gmt-modal-actions { display: flex; gap: 8px; margin-top: 16px; } .gmt-info-overlay .gmt-info-card .gmt-btn-ghost { background: transparent; color: var(--gmt-ink-soft); border: 1px solid var(--gmt-line); } .gmt-info-overlay .gmt-info-card .gmt-btn-ghost:hover { background: var(--gmt-surface); color: var(--gmt-ink); } /* --- Need help? form ------------------------------------------------ */ .gmt-info-overlay .gmt-help-card { max-width: 520px; text-align: left; } .gmt-info-overlay .gmt-help-label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--gmt-ink-soft); margin: 16px 0 7px; } .gmt-info-overlay .gmt-help-chips { display: flex; flex-wrap: wrap; gap: 6px; } .gmt-info-overlay .gmt-help-textarea { font-family: var(--gmt-sans); width: 100%; box-sizing: border-box; font-size: 0.92rem; line-height: 1.55; padding: 11px 13px; border: 1px solid var(--gmt-line); border-radius: 8px; background: #FFFFFF; color: var(--gmt-ink); resize: vertical; min-height: 108px; } .gmt-info-overlay .gmt-help-textarea:focus { outline: none; border-color: var(--gmt-blue); box-shadow: 0 0 0 3px rgba(31, 95, 139, 0.12); } .gmt-info-overlay .gmt-help-error { margin-top: 10px; padding: 9px 12px; border-radius: 8px; background: var(--gmt-red-soft); border: 1px solid var(--gmt-red-soft); color: var(--gmt-red); font-size: 0.82rem; line-height: 1.5; } .gmt-info-overlay .gmt-help-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gmt-line); font-size: 0.78rem; line-height: 1.6; color: var(--gmt-ink-soft); } .gmt-info-overlay .gmt-help-foot a { color: var(--gmt-blue); } @media (max-width: 600px) { .gmt-info-overlay .gmt-help-card { max-width: 100%; } .gmt-info-overlay .gmt-info-card .gmt-modal-actions { flex-direction: column; } .gmt-info-overlay .gmt-info-card .gmt-modal-actions .gmt-btn { width: 100%; } } /* When there's no avatar (logged-out / gate views) the meta row shouldn't indent past a element that isn't there. */ .gmt-header:not(:has(.gmt-avatar)) .gmt-header-meta { padding-left: 0; } /* v1.25.0 — unify the two header buttons. They were inheriting different ghost/help styles and rendering at slightly different weights. */ .gmt-header .gmt-help-btn, .gmt-header .gmt-logout-btn { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.28); color: #FFFFFF; font-family: var(--gmt-sans); font-size: 0.78rem; font-weight: 600; padding: 7px 15px; border-radius: 20px; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease; white-space: nowrap; } .gmt-header .gmt-help-btn:hover, .gmt-header .gmt-logout-btn:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.5); } .gmt-header .gmt-help-btn:focus-visible, .gmt-header .gmt-logout-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } /* Avatar: was amber-on-charcoal. Now reads as a brand-blue medallion. */ .gmt-header .gmt-avatar { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.30); color: #FFFFFF; font-family: var(--gmt-sans); font-weight: 700; } /* Save pill sits inline now — mute it so it supports, not competes. */ .gmt-header .gmt-save-pill { font-size: 0.74rem; color: rgba(255,255,255,0.78); background: none; padding: 0; } .gmt-header .gmt-save-pill.gmt-save-error { color: #FFD5D0; font-weight: 600; } /* Readiness badge — amber value on blue is muddy; go white-on-glass. */ .gmt-header .gmt-readiness-badge .gmt-readiness-value { color: #FFFFFF; font-weight: 700; } .gmt-header .gmt-streak-chip { color: #FFFFFF; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); padding: 5px 11px; border-radius: 20px; } @media (max-width: 600px) { .gmt-header { padding: 16px 18px 14px; } .gmt-header h1 { font-size: 1.12rem; } .gmt-header-meta { padding-left: 0; } .gmt-header-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; } } /* ==================================================================== v1.28.0 — HELP MODAL: the chip-goes-white-on-tap bug -------------------------------------------------------------------- REAL ROOT CAUSE (the previous fix was aimed at the wrong selector): the chip turned white *when tapped* — i.e. on :focus. Astra styles button:focus / button:active with its own background+colour. Our .gmt-help-chip-on rule only ever described the resting selected state, so the instant a student clicked a chip, focus landed on it and the theme repainted it white-on-white — a blank capsule, which is exactly the *selected* chip in the bug report. FIX: one reset for the button base (kills the theme's paint on every state at once), then paint our states — including :focus, :active and :focus:not(:focus-visible). No more per-property whack-a-mole. ==================================================================== */ /* 1. Neutral reset — strip the theme off every button in the modal, in every state. This is what stops the cascade fight at the source. */ .gmt-info-overlay .gmt-help-card button, .gmt-info-overlay .gmt-help-card button:hover, .gmt-info-overlay .gmt-help-card button:focus, .gmt-info-overlay .gmt-help-card button:active { -webkit-appearance: none; appearance: none; background-image: none; box-shadow: none; text-transform: none; letter-spacing: normal; text-decoration: none; outline: none; font-family: var(--gmt-sans); line-height: 1.2; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } /* 2. Chips — UNSELECTED. */ .gmt-info-overlay .gmt-help-card .gmt-help-chip, .gmt-info-overlay .gmt-help-card .gmt-help-chip:hover, .gmt-info-overlay .gmt-help-card .gmt-help-chip:focus, .gmt-info-overlay .gmt-help-card .gmt-help-chip:active { display: inline-flex; align-items: center; background-color: #FFFFFF; color: #46525E; border: 1.5px solid #D5DDE4; border-radius: 999px; padding: 8px 15px; font-size: 0.8rem; font-weight: 600; cursor: pointer; } .gmt-info-overlay .gmt-help-card .gmt-help-chip:hover { background-color: #EEF5FB; border-color: var(--gmt-blue); color: var(--gmt-blue-dark); } /* 3. Chips — SELECTED. Listed for EVERY state, so tapping (:focus / :active) can no longer strip the fill. This is the actual fix. */ .gmt-info-overlay .gmt-help-card .gmt-help-chip.gmt-help-chip-on, .gmt-info-overlay .gmt-help-card .gmt-help-chip.gmt-help-chip-on:hover, .gmt-info-overlay .gmt-help-card .gmt-help-chip.gmt-help-chip-on:focus, .gmt-info-overlay .gmt-help-card .gmt-help-chip.gmt-help-chip-on:active { background-color: var(--gmt-blue); color: #FFFFFF; border-color: var(--gmt-blue); font-weight: 700; } /* keyboard users still get a ring; mouse/touch users don't */ .gmt-info-overlay .gmt-help-card .gmt-help-chip:focus-visible { box-shadow: 0 0 0 3px rgba(16,119,195,0.30); } /* 4. SEND — was rendering white-on-white. Pinned across all states. */ .gmt-info-overlay .gmt-help-card .gmt-help-send, .gmt-info-overlay .gmt-help-card .gmt-help-send:hover, .gmt-info-overlay .gmt-help-card .gmt-help-send:focus, .gmt-info-overlay .gmt-help-card .gmt-help-send:active { display: inline-flex; align-items: center; justify-content: center; background-color: var(--gmt-blue); color: #FFFFFF; border: 1.5px solid var(--gmt-blue); border-radius: var(--gmt-radius); padding: 12px 30px; font-size: 0.9rem; font-weight: 700; cursor: pointer; } .gmt-info-overlay .gmt-help-card .gmt-help-send:hover:not(:disabled) { background-color: var(--gmt-blue-dark); border-color: var(--gmt-blue-dark); } .gmt-info-overlay .gmt-help-card .gmt-help-send:disabled { background-color: #9BB3C4; border-color: #9BB3C4; color: #FFFFFF; cursor: not-allowed; } /* 5. CANCEL — clearly secondary, never competing with Send. */ .gmt-info-overlay .gmt-help-card .gmt-help-cancel, .gmt-info-overlay .gmt-help-card .gmt-help-cancel:hover, .gmt-info-overlay .gmt-help-card .gmt-help-cancel:focus, .gmt-info-overlay .gmt-help-card .gmt-help-cancel:active { background-color: transparent; color: #5A6570; border: 1.5px solid #D5DDE4; border-radius: var(--gmt-radius); padding: 12px 24px; font-size: 0.9rem; font-weight: 600; cursor: pointer; } .gmt-info-overlay .gmt-help-card .gmt-help-cancel:hover { background-color: #F2F5F8; color: var(--gmt-ink); } /* 6. Action row — Send first, right-aligned, clearly the primary. */ .gmt-info-overlay .gmt-help-card .gmt-modal-actions { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #E6EBEF; } /* 7. Chip row breathing space. */ .gmt-info-overlay .gmt-help-card .gmt-help-chips { gap: 8px; } @media (max-width: 600px) { .gmt-info-overlay .gmt-help-card .gmt-modal-actions { flex-direction: column-reverse; } .gmt-info-overlay .gmt-help-card .gmt-modal-actions button { width: 100%; } } /* v1.29.0 — focus armour. A theme rule on `button:focus` (opacity/visibility/ transform) can still blank a chip the moment it is tapped. Nothing in this modal should ever be hidden by a focus style. */ .gmt-info-overlay .gmt-help-card button, .gmt-info-overlay .gmt-help-card button:focus, .gmt-info-overlay .gmt-help-card button:active, .gmt-info-overlay .gmt-help-card button:focus-within { opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; clip-path: none !important; } /* --- Spaced review (v1.31.0) ----------------------------------------- Neutral blue, deliberately NOT the amber/red of the pace banners. Reviews are routine maintenance, not a warning; styling them like a warning is how you teach students to dread opening the app. */ .gmt-review-card { border: 1px solid #C9DAF0; background: #F4F8FD; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; } .gmt-review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .gmt-review-title { font-weight: 700; font-size: 15px; color: #1D5DA6; } .gmt-review-count { font-size: 12px; color: #5A6B7F; } .gmt-review-sub { font-size: 12.5px; color: #5A6B7F; margin: 6px 0 12px; line-height: 1.45; } .gmt-review-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid #E1EAF5; } .gmt-review-meta { min-width: 0; flex: 1 1 220px; } .gmt-review-topic { font-weight: 600; font-size: 14px; color: #1B2733; } .gmt-review-when { font-size: 11.5px; color: #7A8899; margin-top: 2px; } .gmt-review-actions { display: flex; gap: 6px; flex-shrink: 0; } .gmt-review-foot { font-size: 11.5px; color: #7A8899; margin-top: 10px; padding-top: 10px; border-top: 1px solid #E1EAF5; line-height: 1.45; } .gmt-review-next { font-size: 11px; color: #7A8899; white-space: nowrap; } @media (max-width: 520px) { .gmt-review-actions { width: 100%; } .gmt-review-actions .gmt-btn { flex: 1; } } .gmt-review-next-due { color: #C4831F; font-weight: 600; } /* --- Push notifications (v1.32.0) ------------------------------------ */ .gmt-push-card { margin-top: 20px; padding: 16px; border: 1px solid #E1EAF5; border-radius: 10px; background: #FAFCFF; } .gmt-push-title { font-weight: 700; font-size: 14.5px; color: #1D5DA6; margin-bottom: 6px; } .gmt-push-sub { font-size: 12.5px; color: #5A6B7F; line-height: 1.5; margin-bottom: 12px; } .gmt-push-status { font-size: 12px; color: #7A8899; margin-top: 8px; min-height: 16px; } .gmt-push-status-err { color: #C0392B; } .gmt-push-unsupported { font-size: 12.5px; color: #7A8899; line-height: 1.5; } /* iOS install instructions — informative, not an error state. */ .gmt-push-ios { background: #FFF; border: 1px solid #D9E4F2; border-radius: 8px; padding: 14px; margin-top: 4px; } .gmt-push-ios-head { font-weight: 600; font-size: 13px; color: #1B2733; margin-bottom: 6px; } .gmt-push-ios-body { font-size: 12.5px; color: #5A6B7F; line-height: 1.5; margin-bottom: 10px; } .gmt-push-steps { margin: 0 0 10px; padding-left: 20px; } .gmt-push-steps li { font-size: 12.5px; color: #1B2733; line-height: 1.7; } .gmt-push-ios-foot { font-size: 12px; color: #7A8899; line-height: 1.5; padding-top: 10px; border-top: 1px solid #EEF3F9; }