/* Rally: app-surface additions on top of avexo-theme.css. Same rules: one family,
   one accent, 4px radius, no shadows, status carried by word and weight. */

.app{ padding-top:var(--sp-5); padding-bottom:var(--sp-7); max-width:640px; }
@media(max-width:640px){ .wrap{ padding:0 16px; } .app{ padding-top:var(--sp-4); } }

.tabs{ display:flex; gap:var(--sp-4); }
.tabs a{ font-size:.92rem; font-weight:500; color:var(--muted); padding:.3em 0; border-bottom:1.5px solid transparent; }
.tabs a.on{ color:var(--ink); font-weight:600; border-color:var(--ink); }

.hp{ position:absolute; left:-9999px; }
.field{ display:block; margin-bottom:var(--sp-5); }
.lab{ display:block; font-size:.75rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:.6em; }
.lab em{ text-transform:none; letter-spacing:0; font-weight:400; }
.hint{ color:var(--muted); font-size:.88rem; margin:.5em 0 0; }
.hint.center{ text-align:center; }
.error{ color:var(--ink); font-weight:600; min-height:1.2em; margin:0 0 var(--sp-3); }

input{
  width:100%; font:inherit; font-size:1rem; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--rule); border-radius:var(--radius); padding:.7em .8em; margin-top:.4em;
}
input:focus{ outline:none; border-color:var(--ink); }

/* Segmented choices: selected = ink fill, never colour alone */
.seg{ display:flex; flex-wrap:wrap; gap:.4rem; }
.seg button, .grid button{
  font:inherit; font-size:.92rem; font-weight:500; color:var(--ink-soft); background:var(--paper-tint);
  border:1.5px solid transparent; border-radius:var(--radius); padding:.55em .9em; cursor:pointer;
}
.seg button:hover, .grid button:hover{ background:var(--paper-tint2); }
.seg button.on, .grid button.on{ background:var(--ink); color:#fff; font-weight:600; }
.levels button{ min-width:3.2em; font-variant-numeric:tabular-nums; }
.add-court{ display:flex; gap:.5rem; align-items:flex-end; margin-top:.6rem; }
.add-court input{ margin:0; }
.add-court .btn{ padding:.7em 1.1em; }

/* Availability grid: days down, day-parts across */
.grid{ display:grid; grid-template-columns:3.2em repeat(3,1fr); gap:.35rem; margin-top:.6rem; }
.grid .d, .grid .h{ font-size:.8rem; font-weight:600; color:var(--muted); align-self:center; }
.grid .h{ text-align:center; }
.grid button{ padding:.7em 0; font-size:.8rem; }

.signin{ margin-top:var(--sp-6); padding-top:var(--sp-4); border-top:1px solid var(--rule); }

/* Deck */
.deck{ position:relative; min-height:430px; touch-action:pan-y; }
.card{
  position:absolute; inset:0; background:var(--paper-tint); border-radius:var(--radius);
  padding:var(--sp-5) var(--sp-4); display:flex; flex-direction:column; user-select:none;
  transition:transform .25s ease; cursor:grab;
}
.card.behind{ transform:scale(.97) translateY(10px); background:var(--paper-tint2); }
.card.dragging{ transition:none; cursor:grabbing; }
.card h2{ font-size:2.3rem; }
.card .lvl{ display:flex; align-items:baseline; gap:.6rem; margin-top:var(--sp-2); }
.card .lvl b{ font-size:2rem; font-weight:300; color:var(--ink); font-variant-numeric:tabular-nums; }
.card .lvl span{ font-size:.85rem; color:var(--muted); }
.card .lvl span.peer{ color:var(--ink); font-weight:600; }
.card .bio{ color:var(--ink-soft); margin:var(--sp-3) 0 0; }
.card .meta{ color:var(--muted); font-size:.9rem; margin-top:var(--sp-2); }
.card .plan{ margin-top:auto; padding-top:var(--sp-3); border-top:1px solid var(--rule); }
.card .plan .lab{ margin-bottom:.3em; }
.card .plan .where{ font-size:1.25rem; font-weight:600; color:var(--ink); }
.card .plan .also{ color:var(--muted); font-size:.88rem; margin-top:.3em; }
.card .stamp{
  position:absolute; top:var(--sp-4); right:var(--sp-4); font-weight:700; letter-spacing:.08em;
  font-size:1.1rem; padding:.2em .5em; border:2px solid var(--ink); border-radius:var(--radius);
  color:var(--ink); opacity:0;
}
.card .stamp.pass{ right:auto; left:var(--sp-4); }
.deck-actions{ display:flex; gap:var(--sp-3); margin-top:var(--sp-4); }
.deck-actions .btn{ flex:1; font-size:1.05rem; padding:1em; }
.empty{ background:var(--paper-tint); border-radius:var(--radius); padding:var(--sp-5) var(--sp-4); }
.empty h3{ font-weight:300; font-size:1.6rem; }
.empty p{ color:var(--muted); }

/* Match rows */
.row .row-actions{ display:flex; gap:.5rem; flex-shrink:0; }
.row .row-actions .btn{ padding:.55em 1em; font-size:.88rem; }
.row .done{ font-size:.85rem; color:var(--muted); align-self:center; }

/* Sheets: full-screen overlay, flat */
.sheet{ position:fixed; inset:0; z-index:50; background:rgba(18,21,26,.72); display:flex; align-items:flex-end; justify-content:center; }
.sheet[hidden]{ display:none; }
.sheet-body{ background:var(--paper); width:100%; max-width:640px; border-radius:var(--radius) var(--radius) 0 0; padding:var(--sp-5) var(--sp-4) var(--sp-6); max-height:92vh; overflow:auto; }
.sheet-body h2{ margin:var(--sp-2) 0 var(--sp-3); }
.sheet-body p{ color:var(--muted); }
.sheet-actions{ display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-4); }
@media(min-width:700px){ .sheet{ align-items:center; } .sheet-body{ border-radius:var(--radius); } }