/* SciOly Practice Hub - Main Styles */

/* Reset & Variables */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#1a5f7a;
  --secondary:#57c5b6;
  --accent:#159895;
  --bg:#f8f9fa;
  --card:#fff;
  --text:#212529;
  --border:#dee2e6;
  --danger:#dc3545;
  --success:#28a745;
  --warning:#ffc107;
}

/* Base */
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  min-height:100vh;
}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:1rem}
.disclaimer{background:var(--warning);color:#000;padding:0.75rem;text-align:center;font-weight:600;font-size:0.9rem}

/* Hub Navigation */
#hubNav{background:#333;padding:8px;text-align:center}
#hubNav a{color:#fff;margin:0 12px;text-decoration:none}
#hubNav a:hover{text-decoration:underline}

/* Event Page Navigation */
.event-nav{
  background:var(--primary);
  padding:0.5rem 1rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  justify-content:center;
  align-items:center;
}
.event-nav .back-link{
  color:#fff;
  text-decoration:none;
  margin-right:auto;
  padding:0.5rem;
}
.event-nav .back-link:hover{text-decoration:underline}
.event-nav button{
  background:transparent;
  color:#fff;
  border:2px solid transparent;
  padding:0.5rem 1rem;
  cursor:pointer;
  border-radius:4px;
  font-size:1rem;
  transition:all 0.2s;
}
.event-nav button:hover,
.event-nav button.active{
  background:rgba(255,255,255,0.1);
  border-color:var(--secondary);
}
.event-nav button.active{
  background:var(--secondary);
  color:var(--primary);
  font-weight:600;
}

/* Old nav (for Codebusters) */
nav{
  background:var(--primary);
  padding:0.5rem 1rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  justify-content:center;
}
nav button{
  background:transparent;
  color:#fff;
  border:2px solid transparent;
  padding:0.5rem 1rem;
  cursor:pointer;
  border-radius:4px;
  font-size:1rem;
  transition:all 0.2s;
}
nav button:hover,nav button.active{
  background:rgba(255,255,255,0.1);
  border-color:var(--secondary);
}
nav button.active{
  background:var(--secondary);
  color:var(--primary);
  font-weight:600;
}

/* Pages & Tabs */
.page{display:none;padding:1rem 0}
.page.active{display:block}
.tab-content{display:none;padding:1rem 0}
.tab-content.active{display:block}

/* Hub Pages */
.hubPage{display:none}

/* Typography */
h1,h2,h3{color:var(--primary);margin-bottom:0.75rem}
h1{font-size:1.75rem}
h2{font-size:1.4rem;border-bottom:2px solid var(--secondary);padding-bottom:0.25rem}
h3{font-size:1.15rem}

/* Cards */
.card{
  background:var(--card);
  border-radius:8px;
  padding:1rem;
  margin-bottom:1rem;
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

/* Grid */
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

/* Forms */
label{display:block;margin-bottom:0.25rem;font-weight:500}
select,input[type="text"],input[type="number"],textarea{
  width:100%;
  padding:0.5rem;
  border:1px solid var(--border);
  border-radius:4px;
  font-size:1rem;
  margin-bottom:0.5rem;
}
textarea{min-height:100px;font-family:monospace}

/* Buttons */
button{
  background:var(--primary);
  color:#fff;
  border:none;
  padding:0.5rem 1rem;
  border-radius:4px;
  cursor:pointer;
  font-size:1rem;
  transition:background 0.2s;
}
button:hover{background:var(--accent)}
button:disabled{background:#aaa;cursor:not-allowed}
.btn-secondary{background:var(--secondary);color:#1a1a1a}
.btn-danger{background:var(--danger);color:#fff}
.btn-success{background:var(--success);color:#fff}
.btn-small{padding:0.25rem 0.5rem;font-size:0.85rem}

/* Form Row */
.form-row{
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
  align-items:flex-end;
  margin-bottom:0.5rem;
}
.form-row>*{flex:1;min-width:120px}

/* Checkbox Group */
.checkbox-group{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.5rem}
.checkbox-group label{
  display:flex;
  align-items:center;
  gap:0.25rem;
  font-weight:normal;
  cursor:pointer;
  padding:0.25rem 0.5rem;
  background:var(--bg);
  border-radius:4px;
  border:1px solid var(--border);
}
.checkbox-group label:has(input:checked){
  background:var(--secondary);
  border-color:var(--accent);
  color:#1a1a1a;
}
.checkbox-group input{margin:0}

/* Cipher Display */
.ciphertext{
  font-family:"Courier New",monospace;
  font-size:1.1rem;
  background:#f0f0f0;
  padding:1rem;
  border-radius:4px;
  word-break:break-all;
  line-height:1.8;
  margin:0.5rem 0;
}
.ciphertext-group{margin-bottom:0.25rem}
.solution{background:#e8f5e9;padding:1rem;border-radius:4px;margin:0.5rem 0}
.key-display{
  font-family:monospace;
  font-size:0.9rem;
  background:#fff3cd;
  padding:0.5rem;
  border-radius:4px;
  margin:0.5rem 0;
  overflow-x:auto;
}

/* Timer */
.timer{font-size:2rem;font-weight:bold;text-align:center;padding:1rem;color:var(--primary)}
.timer.running{color:var(--danger)}

/* Stats */
.stats{display:flex;gap:1rem;flex-wrap:wrap}
.stat{background:var(--bg);padding:0.5rem 1rem;border-radius:4px;text-align:center}
.stat-value{font-size:1.5rem;font-weight:bold;color:var(--primary)}
.stat-label{font-size:0.8rem;color:#666}

/* Details/Accordion */
details{margin:0.5rem 0}
summary{cursor:pointer;padding:0.5rem;background:var(--bg);border-radius:4px;font-weight:500}
details[open] summary{border-radius:4px 4px 0 0}
details>div{padding:0.5rem;border:1px solid var(--border);border-top:none;border-radius:0 0 4px 4px}

/* Rules */
.rule-section{margin-bottom:1.5rem}
.rule-list{list-style:disc;margin-left:1.5rem}
.rule-list li{margin-bottom:0.25rem}
.checklist{list-style:none}
.checklist li{padding:0.25rem 0;display:flex;align-items:center;gap:0.5rem}
.checklist input[type="checkbox"]{width:1.25rem;height:1.25rem}

/* Tables */
table{width:100%;border-collapse:collapse;margin:0.5rem 0;font-size:0.9rem}
th,td{border:1px solid var(--border);padding:0.5rem;text-align:left}
th{background:var(--primary);color:#fff}
tr:nth-child(even){background:var(--bg)}

/* Morse Reference */
.morse-ref{
  font-family:monospace;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(80px,1fr));
  gap:0.25rem;
  font-size:0.85rem;
}
.morse-ref span{background:var(--bg);padding:0.25rem;border-radius:2px}

/* Print Styles */
.print-only{display:none}
.no-print{display:block}
@media print{
  body{background:#fff}
  .disclaimer,nav,#hubNav,.event-nav,.no-print{display:none!important}
  .print-only{display:block!important}
  .page,.tab-content{display:block!important;page-break-before:always}
  .card{box-shadow:none;border:1px solid #ccc}
  .ciphertext{background:#f5f5f5}
}

/* Mobile */
@media(max-width:600px){
  .form-row{flex-direction:column}
  .form-row>*{min-width:100%}
  h1{font-size:1.4rem}
  .event-nav{flex-direction:column}
  .event-nav .back-link{margin-right:0;margin-bottom:0.5rem}
}

/* Misc */
.scratch-area{min-height:150px;background:#fffde7;border:2px dashed var(--border)}
.hidden{display:none!important}
.alphabet-row{font-family:monospace;letter-spacing:0.5rem}
.freq-hint{font-size:0.8rem;color:#666;margin-top:0.25rem}
.matrix-display{
  font-family:monospace;
  display:inline-block;
  border-left:2px solid var(--text);
  border-right:2px solid var(--text);
  padding:0.25rem 0.5rem;
  margin:0.25rem;
}
.matrix-row{display:flex;gap:1rem;justify-content:center}
.answer-input{font-family:monospace;text-transform:uppercase}
.error{color:var(--danger);font-weight:bold}
.success{color:var(--success);font-weight:bold}
.worksheet-q{margin-bottom:2rem;page-break-inside:avoid}
.worksheet-q h4{margin-bottom:0.5rem}
.saved-list{max-height:300px;overflow-y:auto}
.saved-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0.5rem;
  border-bottom:1px solid var(--border);
}
.tag{
  display:inline-block;
  background:var(--secondary);
  color:#1a1a1a;
  padding:0.125rem 0.5rem;
  border-radius:12px;
  font-size:0.75rem;
  margin:0.125rem;
}
.loading{text-align:center;padding:2rem}
.loading::after{
  content:"";
  display:inline-block;
  width:1.5rem;
  height:1.5rem;
  border:3px solid var(--border);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.polybius-grid{
  display:inline-grid;
  grid-template-columns:repeat(6,2rem);
  font-family:monospace;
  font-size:0.9rem;
  text-align:center;
}
.polybius-grid span{border:1px solid var(--border);padding:0.25rem}
.polybius-grid .header{background:var(--primary);color:#fff;font-weight:bold}
.columnar-grid{display:inline-grid;font-family:monospace;text-align:center;margin:0.5rem 0}
.columnar-grid span{border:1px solid var(--border);padding:0.25rem 0.5rem;min-width:1.5rem}
.columnar-grid .col-num{background:var(--secondary);color:#1a1a1a}

/* Placeholder message */
.placeholder-message{
  text-align:center;
  padding:3rem 2rem;
  background:var(--bg);
  border-radius:8px;
  color:#666;
}
.placeholder-message h2{color:#888;margin-bottom:0.5rem}