/* American Language Arts & Craftsman in Training */
.ala-workbench{
  --ink:#182127;
  --paper:#fffdf5;
  --pencil:#596269;
  --rule:#cfd8dc;
  --accent:#1976b9;
  --warm:#d96c2f;
  --green:#779b3d;
  max-width:1100px;
  margin:2rem auto;
  color:var(--ink);
  font-family:Georgia, "Times New Roman", serif;
}
.ala-workbench *{box-sizing:border-box}
.ala-hero{
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding:1.4rem 1.5rem;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(50,80,100,.08) 32px),
    var(--paper);
  border:2px solid var(--ink);
  box-shadow:7px 7px 0 rgba(24,33,39,.12);
}
.ala-kicker{font:700 .78rem/1.2 Arial,sans-serif;letter-spacing:.18em;color:var(--warm)}
.ala-hero h2{font-size:clamp(2rem,5vw,4.4rem);line-height:.92;margin:.35rem 0}
.ala-hero p{margin:.5rem 0 0;font-style:italic}
.ala-stamp{font:800 .78rem Arial,sans-serif;border:3px double var(--accent);padding:.7rem;transform:rotate(3deg);white-space:nowrap}
.ala-tabs{display:flex;gap:.45rem;overflow:auto;padding:1rem 0 .65rem}
.ala-tab{
  border:1px solid var(--ink);background:white;padding:.65rem .85rem;cursor:pointer;
  font:700 .82rem Arial,sans-serif;white-space:nowrap;border-radius:2px;
}
.ala-tab.is-active{background:var(--ink);color:white}
.ala-panel{
  background:var(--paper);border:1px solid #c7c2b5;padding:1.25rem;margin:.8rem 0;
  box-shadow:0 3px 14px rgba(0,0,0,.07);
}
.ala-panel h3{margin:.1rem 0 1rem;font-size:1.5rem}
.ala-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.ala-grid label{font:700 .82rem Arial,sans-serif;letter-spacing:.02em}
.ala-grid input,.ala-grid select,.ala-grid textarea,.ala-library-head input{
  width:100%;margin-top:.35rem;border:1px solid #929ba0;background:#fff;
  padding:.72rem;font:1rem Georgia,serif;color:var(--ink);border-radius:0;
}
.ala-grid textarea{
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 28px,rgba(25,118,185,.10) 29px);
  line-height:29px;
}
.ala-wide{grid-column:1/-1}
.ala-actions{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap;margin-top:1rem}
.ala-actions button{padding:.75rem 1rem;border:1px solid var(--ink);font-weight:800;cursor:pointer}
.ala-primary{background:var(--accent);color:white}
.ala-secondary{background:white}
#ala-form-status{font:700 .85rem Arial,sans-serif}
.ala-library-head{display:flex;gap:1rem;justify-content:space-between;align-items:end;margin-bottom:1rem}
.ala-library-head p{margin:0;color:var(--warm);font-weight:bold}
.ala-library-head input{max-width:370px}
.ala-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.ala-card{
  position:relative;background:white;border:1px solid #bcc3c7;padding:1rem 1rem 1.2rem;
  box-shadow:3px 3px 0 rgba(24,33,39,.08);
}
.ala-card:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent);
}
.ala-card-top{display:flex;justify-content:space-between;gap:.8rem}
.ala-card-category{font:800 .66rem Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--warm)}
.ala-card h4{font-size:1.85rem;margin:.2rem 0}
.ala-pronounce{font-style:italic;color:var(--pencil)}
.ala-mastery{font-family:Arial,sans-serif;letter-spacing:.08em;color:var(--green);white-space:nowrap}
.ala-meaning{font-size:1.08rem}
.ala-note{margin:.75rem 0;padding:.7rem;border-left:3px solid var(--accent);background:#f4f8fb}
.ala-note.ala-craft{border-left-color:var(--green);background:#f7f9f2}
.ala-source{font-size:.82rem;color:var(--pencil);border-top:1px dashed #bbb;padding-top:.65rem}
.ala-delete{margin-top:.8rem;background:white;border:1px solid #aaa;padding:.35rem .55rem;cursor:pointer}
.ala-empty,.ala-loading,.ala-error{
  grid-column:1/-1;min-height:170px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;border:2px dashed #b7bdc0;padding:1rem;
}
.ala-empty-mark{font-size:3rem;font-weight:bold;color:var(--accent)}
.ala-empty span{color:var(--pencil);margin-top:.3rem}
.ala-footer{font-size:.92rem;padding:1rem;border-top:3px double var(--ink);margin-top:1rem}
@media(max-width:700px){
  .ala-hero{align-items:flex-start}.ala-stamp{font-size:.62rem}
  .ala-grid,.ala-cards{grid-template-columns:1fr}
  .ala-wide{grid-column:auto}
  .ala-library-head{align-items:stretch;flex-direction:column}
  .ala-library-head input{max-width:none}
}


/* Finger tracing practice */
.ala-trace-head{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-end;
}
.ala-trace-head h3{margin-bottom:.25rem}
.ala-trace-head p{margin:.15rem 0 1rem;color:var(--pencil)}
.ala-trace-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:.65rem;
  align-items:end;
  margin-bottom:1rem;
}
.ala-trace-controls label{
  font:700 .82rem Arial,sans-serif;
}
.ala-trace-controls input{
  width:100%;
  margin-top:.35rem;
  border:1px solid #929ba0;
  background:#fff;
  padding:.72rem;
  font:1.1rem Georgia,serif;
  color:var(--ink);
}
.ala-trace-controls button{
  min-height:44px;
  padding:.72rem 1rem;
  border:1px solid var(--ink);
  font-weight:800;
  cursor:pointer;
}
.ala-trace-wrap{
  width:100%;
  overflow:hidden;
  border:2px solid var(--ink);
  background:
    repeating-linear-gradient(to bottom, #fff 0, #fff 34px, rgba(25,118,185,.06) 35px);
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
#ala-trace-canvas{
  display:block;
  width:100%;
  touch-action:none;
  cursor:crosshair;
}
.ala-trace-hint{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-top:.6rem;
  font:700 .78rem Arial,sans-serif;
  color:var(--pencil);
}
@media(max-width:700px){
  .ala-trace-controls{
    grid-template-columns:1fr 1fr;
  }
  .ala-trace-controls label{
    grid-column:1/-1;
  }
}