/* =====================================================================
   DUETTO — Component showcase styles
   Used by components.html. Component patterns built on the core tokens.
   ===================================================================== */

/* ---- state matrix scaffold ---- */
.matrix { width:100%; border-collapse:separate; border-spacing:0; }
.matrix th { font-family:var(--font-ui); font-weight:800; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-ink-muted); text-align:center; padding:0 0 14px; }
.matrix th.rowhead, .matrix td.rowhead { text-align:left; width:130px; }
.matrix td { padding:12px 10px; text-align:center; vertical-align:middle; }
.matrix td.rowhead { font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--color-ink); }
.matrix tr + tr td { border-top:1.5px solid var(--color-hairline); }

/* forced state previews */
.s-hover  { transform: translate(-2px,-2px) !important; }
.s-press  { transform: translate(2px,2px) !important; box-shadow: none !important; }
.s-focus  { outline:3px solid var(--color-eleanor-deep) !important; outline-offset:2px; }
.state-note { font-family:var(--font-ui); font-size:12.5px; color:var(--color-ink-muted); }

/* ---- icon button ---- */
.icon-btn {
  width:48px; height:48px; border-radius:50%;
  border:2.5px solid var(--color-ink);
  background:var(--color-surface); color:var(--color-ink);
  font-size:20px; display:inline-grid; place-items:center; cursor:pointer;
  box-shadow: var(--shadow-offset) var(--color-hairline-warm);
  transition: transform var(--dur-fast) var(--ease-calm), box-shadow var(--dur-fast) var(--ease-calm);
}
.icon-btn.primary { background:var(--color-primary); color:#fff; box-shadow: var(--shadow-offset) var(--color-primary-shadow); }
.icon-btn:hover { transform:translate(-2px,-2px); }

/* ---- inputs ---- */
.field { display:flex; flex-direction:column; gap:7px; text-align:left; }
.field > label { font-family:var(--font-ui); font-weight:800; font-size:13px; color:var(--color-ink); }
.input {
  font-family:var(--font-ui); font-size:16px; color:var(--color-ink);
  background:var(--color-surface);
  border:2px solid var(--color-hairline);
  border-radius:var(--radius-md);
  padding:13px 16px; width:100%;
  transition: border-color var(--dur-fast) var(--ease-calm), box-shadow var(--dur-fast) var(--ease-calm);
}
.input::placeholder { color:var(--color-ink-muted); }
.input:focus, .input.s-focus { outline:none; border-color:var(--color-eleanor); box-shadow:0 0 0 4px var(--color-eleanor-soft); }
.input.is-error { border-color:var(--color-evelyn-deep); box-shadow:0 0 0 4px var(--color-evelyn-soft); }
.input:disabled, .input.is-disabled { background:var(--color-cream-deep); color:var(--color-ink-muted); cursor:not-allowed; }
.hint { font-family:var(--font-ui); font-size:12.5px; color:var(--color-ink-muted); }
.hint.err { color:var(--color-evelyn-deep); font-weight:700; }
.search { position:relative; }
.search .input { padding-left:44px; border-radius:var(--radius-pill); }
.search .mag { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--color-ink-muted); font-size:17px; }

/* ---- badges & chips ---- */
.tagrow { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.badge { font-family:var(--font-ui); font-weight:800; font-size:13px; padding:6px 13px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; gap:6px; }
.b-grade   { background:var(--color-eleanor-soft); color:var(--color-eleanor-deep); border:2px solid #D7CCEC; }
.b-inst    { background:var(--color-surface); color:var(--color-ink); border:2px solid var(--color-hairline); }
.b-new     { background:var(--color-primary); color:#fff; }
.b-like    { background:var(--color-evelyn-soft); color:var(--color-evelyn-deep); border:2px solid #F2CAD5; }
.b-xp      { background:var(--color-xp-gold); color:var(--on-gold); }
.b-streak  { background:var(--color-streak); color:var(--on-streak); }
.b-success { background:#E4F6EC; color:var(--color-success-deep); border:2px solid #C2E8D2; }

/* ---- library piece card ---- */
.piece-card { width:230px; padding:0; overflow:hidden; }
.piece-cover { height:118px; display:flex; align-items:flex-start; justify-content:space-between; padding:12px; }
.piece-cover.violin { background:linear-gradient(135deg,#F6D9E2,#E9C2D2); }
.piece-cover.piano  { background:linear-gradient(135deg,#E0D6F2,#CFC0E8); }
.piece-cover .inst-ico { font-size:26px; }
.piece-body { padding:14px 16px 16px; }
.piece-body .title { font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--color-ink); line-height:1.2; }
.piece-body .composer { font-family:var(--font-ui); font-size:13.5px; color:var(--color-ink-muted); margin-top:2px; }
.piece-body .meta { display:flex; justify-content:space-between; align-items:center; margin-top:12px; }

/* ---- numbered list row (Evanor-style) ---- */
.list-row { display:flex; align-items:center; gap:16px; padding:14px 18px; background:var(--color-surface); border:1.5px solid var(--color-hairline); border-radius:var(--radius-lg); }
.list-row .num { font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--color-eleanor); width:30px; text-align:center; }
.list-row .lr-main { flex:1; }
.list-row .lr-title { font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--color-ink); }
.list-row .lr-sub { font-family:var(--font-ui); font-size:13px; color:var(--color-ink-muted); }

/* ---- nav ---- */
.topbar { display:flex; align-items:center; gap:14px; padding:12px 18px; background:var(--color-surface); border:1.5px solid var(--color-hairline); border-radius:var(--radius-xl); box-shadow:var(--shadow-ambient); }
.topbar .tb-logo { font-family:var(--font-script); font-size:26px; color:var(--color-primary); }
.topbar .tb-spacer { flex:1; }
.topbar .tb-avatar { width:42px; height:42px; border-radius:50%; box-shadow:0 0 0 3px var(--color-evelyn); display:grid; place-items:center; background:var(--color-surface); }
.topbar .tb-avatar img { width:36px; height:36px; }

.tabbar { display:inline-flex; gap:6px; padding:8px; background:var(--color-surface); border:1.5px solid var(--color-hairline); border-radius:var(--radius-pill); box-shadow:var(--shadow-ambient); }
.tab-item { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 18px; border-radius:var(--radius-pill); font-family:var(--font-ui); font-weight:800; font-size:12px; color:var(--color-ink-muted); cursor:pointer; }
.tab-item .ti { font-size:20px; }
.tab-item.active { background:var(--color-primary); color:#fff; }

/* ---- gamification ---- */
.streak { display:inline-flex; align-items:center; gap:12px; padding:14px 20px; border-radius:var(--radius-lg); border:2.5px solid; }
.streak .flame { font-size:34px; line-height:1; }
.streak .sk-n { font-family:var(--font-display); font-weight:700; font-size:30px; line-height:1; }
.streak .sk-l { font-family:var(--font-ui); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; }
.streak.active { background:#FFF1E9; border-color:var(--color-streak); color:var(--color-streak-deep); }
.streak.active .flame { filter:none; }
.streak.idle { background:var(--color-surface); border-color:var(--color-hairline); color:var(--color-ink-muted); }
.streak.idle .flame { filter:grayscale(1) opacity(0.5); }

.xp-block { width:100%; }
.xp-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.level-badge { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--color-xp-gold); color:var(--on-gold); font-family:var(--font-display); font-weight:700; font-size:17px; box-shadow:var(--shadow-offset-sm) var(--color-xp-deep); }
.xp-bar { height:16px; border-radius:99px; background:var(--color-cream-deep); overflow:hidden; }
.xp-bar > i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--color-xp-gold),#FFD36A); }

.goal-ring { display:flex; align-items:center; gap:18px; }
.goal-ring .lbl .g-n { font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--color-ink); }
.goal-ring .lbl .g-s { font-family:var(--font-ui); font-size:13px; color:var(--color-ink-muted); }

.milestone { display:flex; flex-direction:column; align-items:center; gap:10px; }
.mbadge { width:96px; height:96px; border-radius:28px; display:grid; place-items:center; font-size:42px; box-shadow:var(--shadow-offset) var(--color-xp-deep); border:3px solid #fff; }
.mbadge.gold   { background:radial-gradient(circle at 35% 30%,#FFE08A,var(--color-xp-gold)); }
.mbadge.locked { background:var(--color-cream-deep); box-shadow:var(--shadow-offset) var(--color-hairline-warm); filter:grayscale(1); opacity:0.7; }
.mtitle { font-family:var(--font-display); font-weight:600; font-size:15px; }
.msub { font-family:var(--font-ui); font-size:12px; color:var(--color-ink-muted); }

/* ---- practice timer ---- */
.timer { width:300px; padding:26px; text-align:center; }
.timer .t-cat { width:64px; height:64px; margin:0 auto 8px; }
.timer .t-time { font-family:var(--font-display); font-weight:700; font-size:58px; line-height:1; color:var(--color-ink); letter-spacing:0.01em; font-variant-numeric:tabular-nums; }
.timer .t-piece { font-family:var(--font-ui); font-weight:700; font-size:14px; color:var(--color-ink-muted); margin-top:6px; }
.timer .t-ctrls { display:flex; gap:12px; justify-content:center; margin-top:18px; }
.timer.running { border-color:var(--color-primary); box-shadow:var(--shadow-offset-lg) var(--color-evelyn-soft); }
.running-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--color-success); margin-right:6px; animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }

/* ---- audio recorder ---- */
.recorder { padding:20px; }
.rec-row { display:flex; align-items:center; gap:14px; }
.wave { flex:1; display:flex; align-items:center; gap:3px; height:46px; }
.wave > b { flex:1; background:var(--color-eleanor); border-radius:99px; min-height:6px; }
.recorder.live .wave > b { background:var(--color-primary); }
.rec-time { font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--color-ink); font-variant-numeric:tabular-nums; }
.take { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--radius-md); background:var(--color-cream); border:1.5px solid var(--color-hairline); margin-top:12px; }
.take .play { width:38px; height:38px; border-radius:50%; background:var(--color-eleanor); color:#fff; display:grid; place-items:center; border:none; cursor:pointer; font-size:15px; }
.take .tk-main { flex:1; }
.take .tk-title { font-family:var(--font-ui); font-weight:800; font-size:14px; }
.take .tk-sub { font-family:var(--font-ui); font-size:12px; color:var(--color-ink-muted); }

/* ---- video attachment ---- */
.video-thumb { position:relative; width:240px; border-radius:var(--radius-lg); overflow:hidden; border:2.5px solid var(--color-ink); box-shadow:var(--shadow-offset) var(--color-hairline-warm); }
.video-thumb .vt-img { height:135px; background:linear-gradient(135deg,#D9CBEF,#C2B0E2); display:grid; place-items:center; }
.video-thumb .vt-play { width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,0.92); display:grid; place-items:center; font-size:22px; color:var(--color-primary); }
.video-thumb .vt-bar { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:var(--color-surface); }
.video-thumb .vt-time { font-family:var(--font-ui); font-weight:800; font-size:12px; color:var(--color-ink-muted); }
.note-pill { font-family:var(--font-ui); font-weight:800; font-size:12px; color:var(--color-eleanor-deep); display:inline-flex; gap:5px; align-items:center; }

/* ---- journal role-tagged notes ---- */
.j-note { display:flex; gap:14px; padding:16px 18px; border-radius:var(--radius-lg); border:1.5px solid; position:relative; }
.j-note .j-av { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:20px; flex-shrink:0; color:#fff; font-family:var(--font-display); font-weight:700; }
.j-note .j-author { font-family:var(--font-ui); font-weight:800; font-size:14px; color:var(--color-ink); }
.j-note .j-role { font-family:var(--font-ui); font-weight:800; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; padding:2px 9px; border-radius:99px; }
.j-note .j-body { font-family:var(--font-ui); font-size:15px; color:var(--color-ink); line-height:1.55; margin-top:6px; }
.j-note .j-time { font-family:var(--font-ui); font-size:12px; color:var(--color-ink-muted); margin-top:8px; }
.j-note.student { background:#FFF7FA; border-color:#F4D9E3; }
.j-note.student .j-av { background:var(--color-primary); }
.j-note.student .j-role { background:var(--color-evelyn-soft); color:var(--color-evelyn-deep); }
.j-note.parent  { background:#FFFBF0; border-color:#F0E4C4; }
.j-note.parent .j-av { background:var(--color-xp-gold); color:var(--on-gold); }
.j-note.parent .j-role { background:#FBEFCF; color:var(--color-xp-deep); }
.j-note.teacher { background:#F8F6FE; border-color:#E0D8F3; }
.j-note.teacher .j-av { background:var(--color-eleanor-deep); }
.j-note.teacher .j-role { background:var(--color-eleanor-soft); color:var(--color-eleanor-deep); }

/* ---- feedback: modal, empty, loading ---- */
.modal { width:340px; padding:26px; text-align:center; }
.modal .m-cat { width:72px; height:72px; margin:0 auto 6px; }
.modal h3 { font-family:var(--font-display); font-weight:700; font-size:22px; }
.modal p { font-family:var(--font-ui); font-size:15px; color:var(--color-ink-muted); margin-top:8px; line-height:1.5; }
.modal .m-actions { display:flex; gap:12px; justify-content:center; margin-top:20px; }

.empty { padding:34px; text-align:center; }
.empty img { width:120px; height:auto; margin-bottom:8px; }
.empty h3 { font-family:var(--font-display); font-weight:600; font-size:20px; }
.empty p { font-family:var(--font-ui); font-size:14.5px; color:var(--color-ink-muted); margin-top:6px; }

.skeleton { padding:16px; }
.sk-line { height:14px; border-radius:99px; background:linear-gradient(90deg,var(--color-cream-deep),#F8EFDF,var(--color-cream-deep)); background-size:200% 100%; animation:shimmer 1.4s linear infinite; margin-bottom:10px; }
@keyframes shimmer { to { background-position:-200% 0; } }

.comp-grid { display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start; }
.demo-cell { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.demo-label { font-family:var(--font-ui); font-weight:800; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-ink-muted); }