/* PrepHub — styles for server-rendered elements that the prototype did not have. */

.skip-link{position:absolute;left:-9999px;top:8px;z-index:2000;background:var(--surface);color:var(--purple);padding:10px 14px;border-radius:7px;border:1px solid var(--border);font-size:12px}
.skip-link:focus{left:12px}

/* Sidebar: "Soon" badge and the sign-out button styled like a link */
.side-nav a{position:relative}
.nav-soon{margin-left:auto;font-size:8px;letter-spacing:.6px;text-transform:uppercase;color:#a99cbf;background:var(--soft);border-radius:4px;padding:2px 5px;font-weight:600}
.nav-form{margin:0}
.nav-form button{width:100%;padding:12px 13px;display:flex;align-items:center;gap:12px;font-size:12px;color:#6f7484;border-radius:7px;font-weight:500;background:none;border:0;text-align:left}
.nav-form button i{font-size:17px;line-height:1}
.nav-form button:hover{background:var(--bg);color:var(--purple)}
@media(max-width:1199px){.nav-form button{font-size:11px;padding:11px 9px;gap:9px}}

/* Topbar search is now a real form */
form.search-box{margin:0}

/* Links that replace prototype buttons */
a.subject-card{display:block;text-decoration:none}
a.subject-card:hover{color:var(--text)}
.save-form{margin:0}
a.save-button{text-decoration:none}

/* Profile tabs are links */
.profile-tabs a{flex:1;border:0;background:none;white-space:nowrap;padding:10px 9px;font-size:10px;color:#9b94a7;border-radius:5px;font-weight:500;text-align:center;text-decoration:none}
.profile-tabs a.active{background:var(--surface);color:#8c70a9;box-shadow:0 1px 5px #55446309;font-weight:650}
.profile-tabs a i{font-size:11px;margin-right:5px}

/* Selected answers look chosen even without JavaScript */
.answer-option:has(input:checked){border-color:#b5a0d2;background:var(--soft)}
.answer-option:has(input:checked)>.bi{opacity:1}
.palette-grid button{cursor:pointer}
.timer-pill.ending{color:#b9776f;border-color:#ecd2cc}

/* Review-before-submit page */
.review-summary{padding:28px;max-width:760px;margin-bottom:35px}
.review-grid{grid-template-columns:repeat(auto-fill,minmax(42px,1fr));max-width:520px}
.review-grid a{height:34px;display:grid;place-items:center;background:var(--bg);color:var(--muted);border:1px solid var(--border);border-radius:6px;font-size:11px;text-decoration:none}
.review-grid a.answered{background:#dcebe2;border-color:#cbded1;color:#72957d}
.review-grid a.marked{background:#eee1f5;border-color:#ddc9e9;color:#a082b5}

/* Test details */
.start-note{font-size:11px;color:var(--muted);margin:12px 0 0;line-height:1.7}
.start-note a{color:var(--purple)}

/* Study plan checkbox button */
.task-toggle{margin:0}
.task-check{width:20px;height:20px;border:1.5px solid #b9aecb;border-radius:5px;background:var(--surface);display:grid;place-items:center;padding:0;color:transparent;font-size:12px;flex-shrink:0}
.task-check.checked{background:#9d84b9;border-color:#9d84b9;color:#fff}
.task-check:hover{border-color:var(--purple)}
.task-item form{margin:0}

/* Forms */
.field-error{color:#b45a4f;font-size:11px;margin:6px 0 0;line-height:1.6}
.form-control.is-invalid,.form-select.is-invalid{border-color:#d9a29a}
.form-alert{display:flex;gap:10px;align-items:flex-start;background:#faf1ef;border:1px solid #ecd9d5;color:#9a5d55;font-size:12px;line-height:1.8;border-radius:8px;padding:12px 14px;margin-bottom:18px}
.form-alert.info{background:var(--soft);border-color:var(--border);color:#806b9c}
.form-alert form{display:inline}
.link-button{background:none;border:0;padding:0;color:var(--purple);text-decoration:underline;font:inherit}
.dev-link{display:flex;gap:10px;align-items:flex-start;background:#fff8e6;border:1px dashed #e2c27a;color:#7a6330;font-size:12px;line-height:1.8;border-radius:8px;padding:12px 14px;margin-bottom:18px}
.dev-link a{color:#7056d8;font-weight:600;word-break:break-all}
.dev-link code{font-size:11px;color:inherit}
.preference-field{margin-bottom:16px}
.preference-field label{font-size:11px;color:var(--muted);display:block;margin-bottom:8px}
.danger-settings h2{color:#a4574d}
.danger-btn{background:#b4574c;color:#fff;border:1px solid #b4574c;padding:11px 17px;font-size:12px;border-radius:7px;font-weight:600}
.danger-btn:hover,.danger-btn:focus{background:#9b463c;border-color:#9b463c;color:#fff}

/* Flash toasts */
.toast.flash-success .toast-body i{color:#72957d}
.toast.flash-error .toast-body i{color:#b45a4f}
.toast.flash-info .toast-body i{color:#8c70a9}
.toast-body{font-size:12px}

/* Error pages */
.error-page{margin-top:30px}
.error-page .small-label{display:block;margin:12px 0 4px}

/* Dark theme additions */
body.dark .form-alert{background:#3a2a28;border-color:#503532;color:#e6b7b0}
body.dark .form-alert.info{background:var(--soft);border-color:var(--border);color:#cbbbe2}
body.dark .dev-link{background:#3a3222;border-color:#6f5a2c;color:#e9d39c}
body.dark .review-grid a.answered{background:#24362b;border-color:#35493a}
body.dark .review-grid a.marked{background:#31273e;border-color:#46375a}
body.dark .task-check{background:var(--bg)}

/* Disabled buttons and help text inside settings cards */
.secondary-btn:disabled,.secondary-btn.disabled{background:var(--surface);border-color:var(--border);color:var(--muted);opacity:.5}
.preference-field .field-help{font-size:11px;color:var(--muted);margin:6px 0 0;line-height:1.6}
.preference-field .form-control{font-size:12px;background-color:var(--bg);border-color:var(--border);color:var(--text);padding:11px}

/* ---------------------------------------------------------------------------
   Phase 3: quiz creator, generator, battles, tournaments, community screens
   --------------------------------------------------------------------------- */

/* Tabs and lists that are links on the server version */
.competition-tabs a{border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:11px;padding:9px 16px;border-radius:6px;text-decoration:none}
.competition-tabs a.active{background:var(--soft);color:var(--purple)}
.competition-tabs a:hover{color:var(--purple)}
.competition-tabs .tab-gap{flex:1}
.conversation-list a{width:100%;display:flex;align-items:center;gap:10px;border-radius:7px;text-align:left;padding:15px 10px;color:var(--text);text-decoration:none}
.conversation-list a.active{background:var(--soft)}
.conversation-list a:hover{background:var(--bg)}
.conversation-list a.unread strong{color:var(--purple)}
.conversation-list .small-avatar .bi{font-size:13px}
.conversation-empty{padding:10px}
.unread-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e0ac83;margin-left:4px;vertical-align:middle}
.chat-header{display:flex;align-items:center;gap:12px}
.chat-header .chat-tools{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:11px;font-weight:400}
.chat-header .chat-tools form{margin:0}
.chat-tools .link-button{text-decoration:none;font-size:11px;color:var(--muted)}
.chat-tools .link-button:hover{color:#b45a4f}
.chat-back{display:none}
.chat-compose textarea{flex:1;min-width:0;min-height:46px;max-height:180px;resize:vertical}
.chat-compose{align-items:flex-end}
.chat-note{padding:0 20px 14px;margin:0}
.chat-placeholder{border:0;margin:auto;background:none}
.messages-layout .conversation-list{overflow:auto;max-height:600px}

/* Message boxes, message requests and @usernames */
.conversation-pane{border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0}
.conversation-pane .conversation-list{border-right:0;flex:1}
.inbox-tabs{display:flex;gap:2px;padding:10px 12px 0;border-bottom:1px solid var(--border)}
.inbox-tabs a{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;padding:9px 4px 11px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.inbox-tabs a:hover{color:var(--purple)}
.inbox-tabs a.active{color:var(--purple);border-bottom-color:var(--purple)}
.inbox-tabs .count{display:inline-block;min-width:17px;padding:0 5px;border-radius:9px;background:var(--soft);color:var(--purple);font-size:10px;line-height:17px;margin-left:2px}
.muted-icon{font-size:11px;color:var(--muted);margin-left:3px}
.request-banner{display:flex;gap:14px 18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:16px 20px 0;padding:16px 18px;border:1px solid var(--border);border-radius:10px;background:var(--soft)}
.request-banner>div:first-child{flex:1 1 260px;min-width:0}
.request-banner strong{font-size:13px}
.request-banner p{font-size:12px;color:var(--muted);margin:4px 0 0;line-height:1.7}
.request-actions{display:flex;gap:8px;flex-wrap:wrap}
.request-actions form{margin:0}
.request-actions .btn{font-size:11px}
.handle{color:var(--muted);font-weight:400;font-size:.92em}
.username-input{display:flex;align-items:stretch}
.username-input>span{display:grid;place-items:center;padding:0 12px;border:1px solid var(--border);border-right:0;border-radius:7px 0 0 7px;background:var(--bg);color:var(--muted);font-size:13px}
.username-input>.form-control{border-top-left-radius:0;border-bottom-left-radius:0;min-width:0;flex:1}
.username-input.is-invalid>span{border-color:#dc3545}
.field-help.is-ok{color:#3f8a5b}
.dark .field-help.is-ok{color:#7fc39a}
.username-settings .current-username{font-size:15px;font-weight:650;color:var(--purple)}
.report-block{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text);margin:0}
.report-block input{margin:0;accent-color:var(--purple)}
.report-hint{font-size:10px;color:var(--muted);line-height:1.6;margin:0}
.safety-note{display:flex;gap:8px;align-items:flex-start}
.safety-note .bi{color:var(--purple);margin-top:2px}
.chat-safety{margin-top:34px}
.chat-safety h2{font-size:20px;font-weight:700;margin-bottom:6px}
.chat-safety ol{padding-left:20px;margin:14px 0 0;font-size:13px;line-height:1.9;color:var(--muted)}
.chat-safety ol strong{color:var(--text);font-weight:600}
.page-footer .footer-links{display:inline-flex;gap:18px;align-items:center}
.privacy-page h2{font-size:18px;font-weight:700;margin:26px 0 8px}
.privacy-page h2:first-child{margin-top:0}
.privacy-page p,.privacy-page li{font-size:13px;line-height:1.9;color:var(--muted)}
.privacy-page ul{padding-left:20px}
.privacy-page strong{color:var(--text);font-weight:600}
.answer-source{display:flex;gap:9px;align-items:flex-start;margin:12px 0 0;padding:10px 13px;border-radius:8px;background:var(--soft);font-size:12px;line-height:1.7;color:var(--muted)}
.answer-source .bi-newspaper{color:var(--purple);margin-top:2px}
.answer-source strong{color:var(--text);font-weight:600}
.answer-source a{color:var(--purple);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.answer-source a:hover{text-decoration:underline}
.ca-built-from{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--muted);line-height:1.8;margin-top:10px}
.ca-built-from .bi{color:var(--purple);margin-top:3px}
.ca-section{margin-bottom:34px}
.ca-guides-heading{margin-top:8px}
.ca-past-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.ca-past-list li{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding:12px 16px;border:1px solid var(--border);border-radius:9px;background:var(--surface);font-size:13px}
.ca-past-week{font-weight:650;color:var(--text);min-width:150px}
.ca-past-list small{color:var(--muted);font-weight:400}
.ca-home-list{list-style:none;padding:0;margin:10px 0 12px;display:grid;gap:8px}
.ca-home-list a{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;text-decoration:none;color:var(--text);font-size:12px}
.ca-home-list a:hover{border-color:var(--purple)}
.ca-home-list span{color:var(--muted)}
#questionText,.review-card summary strong{white-space:pre-line}
.history-item .friend-message{display:inline-flex;align-items:center;gap:5px;font-size:11px;margin-top:6px}
.new-message .form-select{background-color:var(--surface);color:var(--text);border-color:var(--border);font-size:12px;padding:12px;border-radius:7px}

/* Sidebar and topbar counts */
.nav-count.nav-alert{background:#f6e8dc;border-color:#efd6c1;color:#a57452;font-weight:700}
.notification-button>.bell-count{width:auto;height:auto;min-width:16px;padding:1px 4px;top:3px;right:3px;font-size:8px;line-height:12px;color:#fff;font-weight:700;border-radius:8px;text-align:center;background:#d99a6c}

/* Posts */
.discussion-body,.discussion-body p,.reply-row .reply-body p{white-space:normal}
.discussion-body p:last-child,.reply-body p:last-child{margin-bottom:0}
.reply-row.is-hidden{opacity:.65}
.post-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:10px}
.post-actions form{margin:0}
.post-actions .link-button{font-size:10px;color:var(--muted);text-decoration:none}
.post-actions .link-button:hover{color:#b45a4f}
.team-badge{font-size:8px;letter-spacing:.6px;text-transform:uppercase;background:var(--soft);color:var(--purple);padding:2px 6px;border-radius:4px;margin-left:6px;vertical-align:middle}
.report-menu{display:inline-block;position:relative}
.report-menu>summary{list-style:none;cursor:pointer;color:var(--muted);font-size:10px}
.report-menu>summary::-webkit-details-marker{display:none}
.report-menu>summary:hover{color:var(--purple)}
.report-menu[open]>summary{color:var(--purple)}
.report-form{position:absolute;z-index:20;top:22px;left:0;width:260px;background:var(--surface);border:1px solid var(--border);border-radius:9px;box-shadow:0 10px 25px #2a254016;padding:12px;display:grid;gap:8px}
.chat-tools .report-form{left:auto;right:0}
.report-form .form-select,.report-form .form-control{font-size:11px;background-color:var(--surface);color:var(--text);border-color:var(--border)}
.new-discussion{margin:10px 0 30px}
.new-discussion>summary{cursor:pointer;font-weight:650;font-size:14px;color:var(--purple);list-style:none}
.new-discussion>summary::-webkit-details-marker{display:none}
.front-toolbar .form-select{max-width:220px;background-color:var(--surface);color:var(--text);border-color:var(--border);font-size:12px;padding:12px;border-radius:7px}
.front-toolbar form,.front-toolbar .editor-actions form{margin:0}
form.front-toolbar{justify-content:flex-start}
form.front-toolbar .form-control{flex:1}
.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin:10px 0 25px}
.pager .btn{font-size:11px}

/* My quizzes */
.import-form{display:flex;gap:7px;align-items:center;margin:0}
.draft-actions form{margin:0}
.draft-row .draft-actions{flex:0 0 auto;flex-wrap:nowrap;align-items:center}
@media(max-width:1199px){.draft-row .draft-actions{flex-wrap:wrap}}
.own-question{display:block;margin-bottom:18px}
.own-question .question-content{padding:26px}
.editor-tabs button{cursor:pointer}
[data-editor-panel][hidden]{display:none!important}
.form-alert ul{font-size:12px}

/* Battles and tournaments */
.battle-room .leaderboard-podium{max-width:640px;margin:28px auto}
.podium-card.versus{border-style:dashed;background:none}
.podium-card.versus strong{font-size:20px}
.podium-avatar>span .bi{font-size:10px}
.join-code label{font-size:12px;margin-bottom:8px;display:block}
.code-input{text-transform:uppercase;letter-spacing:3px;font-weight:600;max-width:190px}
.front-card.is-finished{opacity:.8}
.front-table tr.is-me td{background:var(--soft)}
.front-table tr.is-me .small-avatar{background:var(--surface)}
.front-table td a{color:var(--purple)}

/* Rewards, referrals, plans */
.detail-layout>aside.front-card{align-self:start}
.reward-timeline li.locked{opacity:.75}
.reward-timeline li.locked .front-icon{background:var(--bg);color:var(--muted)}
.reward-timeline li>div{flex:1;min-width:0}
.reward-timeline .front-icon{margin-bottom:0;width:40px;height:40px;font-size:18px;flex-shrink:0}
.reward-timeline .track{height:6px;background:var(--bg);border-radius:5px;overflow:hidden;margin-top:8px;max-width:320px}
.reward-timeline .track>span{display:block;height:100%;background:#b5a1cb}
.front-stats.compact{grid-template-columns:1fr 1fr;margin:15px 0}
.front-card form{margin:0}
div.history-item{cursor:default}

@media(max-width:700px){
  .messages-layout.has-open .conversation-list{display:none}
  .conversation-pane{border-right:0;border-bottom:1px solid var(--border)}
  .conversation-pane .conversation-list{border-bottom:0}
  .messages-layout.has-open .conversation-pane{display:none}
  .conversation-pane .conversation-list{display:block;max-height:none}
  .conversation-pane .conversation-list a{min-width:0}
  .messages-layout:not(.has-open) .chat-content{display:none}
  .request-banner{margin:12px 12px 0;padding:14px}
  .messages-layout.has-open .chat-back{display:inline-flex}
  .messages-layout .conversation-list a{min-width:190px;padding:12px}
  .chat-header{flex-wrap:wrap}
  .report-form{width:230px}
  .competition-tabs .tab-gap{flex-basis:100%;height:0}
  .own-question .question-content{padding:18px}
  .import-form{flex-wrap:wrap}
}

/* Quiz settings shown to learners */
.test-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tag-chip{font-size:10px;padding:4px 9px;border-radius:20px;background:#ffffff8c;color:inherit;text-decoration:none;font-weight:600}
.tag-chip:hover{background:#fff}
.pass-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:650;border-radius:20px;padding:5px 11px;margin:0 0 10px 10px;vertical-align:middle}
.pass-badge.passed{background:#dff3e8;color:#2f7a50}
.pass-badge.not-yet{background:#f6e8dc;color:#a57452}

/* Reading guides: links and PDFs at the end of a guide */
.guide-files{margin:10px 0 30px;padding:22px 24px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.guide-files h2{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:750;margin:0 0 14px}
.guide-files h2 .bi{color:var(--purple)}
.guide-files ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.reading-article .guide-files a{display:flex;align-items:center;gap:14px;padding:13px 15px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);text-decoration:none;transition:border-color .2s,transform .2s}
.reading-article .guide-files a:hover,.reading-article .guide-files a:focus-visible{border-color:var(--purple);transform:translateY(-1px)}
.guide-files a>span:not(.visually-hidden){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.guide-files strong{font-size:14px;font-weight:650;line-height:1.5;overflow-wrap:anywhere}
.guide-files small{font-size:12px;color:var(--muted)}
.guide-files .bi-box-arrow-up-right{color:var(--muted);font-size:13px}
.guide-file-icon{flex:none;width:38px;height:38px;border-radius:9px;display:grid;place-items:center;font-size:20px;background:var(--soft);color:var(--purple)}
.guide-file-icon.pdf{color:#c2410c;background:#fdf0e8}
body.dark .guide-file-icon.pdf{color:#fdba8c;background:rgba(194,65,12,.18)}
@media (max-width:575px){.guide-files{padding:18px 16px}.guide-files a{padding:11px 12px;gap:11px}}

/* Daily challenge: a compact Daily Five banner, then three suggested topic sets */
section.daily-feature.daily-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px 32px;padding:28px 34px;margin-bottom:34px}
section.daily-hero h2{font-size:32px;margin:12px 0 16px;line-height:1.15}
section.daily-hero .daily-feature-meta{margin:0}
section.daily-hero .daily-feature-icon{z-index:0}
.daily-hero-text,.daily-hero-action{position:relative;z-index:1}
.daily-hero-action{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
.daily-hero-action form{margin:0}
.daily-hero-action small{font-size:12px;line-height:1.6;color:#e1ebff;max-width:260px}
.daily-hero-action small a{color:#fff;text-decoration:underline}
.daily-suggest .section-heading{align-items:flex-end;gap:12px;flex-wrap:wrap}
.daily-suggest .section-heading p{max-width:640px}
.test-start-button{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--purple);font-size:13px;font-weight:650;text-decoration:none;cursor:pointer}
.test-start-button:hover,.test-start-button:focus-visible{text-decoration:underline;color:var(--purple)}
.daily-topics .test-bottom{justify-content:flex-end}
@media (min-width:1100px){.test-grid.daily-topics{grid-template-columns:repeat(3,minmax(0,1fr))}}
.daily-hero-action small{max-width:300px}
.interest-chips{border:0;padding:0;margin:0 0 18px}
.interest-chips legend{font-size:13px;font-weight:550;color:var(--muted);margin-bottom:4px}
.interest-chips>p{font-size:12px;color:var(--muted);margin:0 0 10px;line-height:1.6}
.interest-chips>div{display:flex;flex-wrap:wrap;gap:7px}
.interest-chips label{position:relative;cursor:pointer;margin:0}
.interest-chips input{position:absolute;opacity:0;width:1px;height:1px}
.interest-chips span{display:inline-flex;align-items:center;gap:6px;font-size:12px;border:1px solid var(--border);border-radius:6px;padding:6px 10px;color:var(--text);background:var(--surface)}
.interest-chips input:checked+span{background:#245be8;border-color:#245be8;color:#fff}
.interest-chips input:focus-visible+span{outline:3px solid #8babef;outline-offset:2px}
@media (max-width:767px){section.daily-feature.daily-hero{grid-template-columns:1fr;padding:24px 22px}section.daily-hero h2{font-size:26px}.daily-hero-action{align-items:flex-start;text-align:left}}

/* Continue with Google (sign-in and sign-up pages) */
.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;border:1px solid var(--border,#e2e5ee);background:#fff;color:#1f2433;font-weight:600;border-radius:10px}
.google-btn:hover{background:#f6f7fb;color:#1f2433;border-color:#cfd4e2}.google-btn .bi{font-size:17px}
.dark .google-btn{background:#1d2232;color:#e8ebf3;border-color:#323a50}.dark .google-btn:hover{background:#242a3d}
.auth-or{display:flex;align-items:center;gap:12px;margin:18px 0 16px;color:#8a90a2;font-size:12px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--border,#e2e5ee)}