/* v1.0.1 — single-page "New scrim" sheet, restyled match planner and shared motion polish. */

/* ---------- sheet shell ---------- */
.auth-page.modal-scrim.cc-modal > .auth-card {
  max-width: 620px; max-height: min(94dvh, 94vh); padding: 0 0 0; gap: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface, #0f1115);
}
.auth-page.modal-scrim.cc-modal > .auth-card::before { margin: 8px auto 0; }
.cc-modal .auth-card > .panel-head {
  position: relative; z-index: 2; flex: 0 0 auto; margin: 0; padding: 6px 12px 10px 18px;
  border-bottom: 1px solid var(--sm-line, rgb(255 255 255 / .08));
}
.cc-modal .auth-card > .panel-head h2 { font-size: 1.2rem; letter-spacing: -.01em; }
.cc-modal .auth-card > .v20-tpl { margin: 12px 16px 0; flex: 0 0 auto; }
.cc-modal .auth-card > .modal-error { margin: 10px 16px 0; }
.cc-form {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: grid; align-content: start; gap: 12px; padding: 12px 14px 0;
}

/* ---------- section cards ---------- */
.cc-section {
  display: grid; gap: 12px; margin: 0; padding: 14px; min-width: 0;
  border-radius: 20px; border: 1px solid var(--sm-line, rgb(255 255 255 / .08));
  background: var(--surface-container-low, rgb(255 255 255 / .03));
  animation: cc-rise .34s cubic-bezier(.2, .8, .2, 1) both;
}
.cc-section:nth-of-type(2) { animation-delay: .04s; }
.cc-section:nth-of-type(3) { animation-delay: .08s; }
.cc-section:nth-of-type(4) { animation-delay: .12s; }
.cc-section.is-invalid { animation: cc-shake .32s ease; border-color: var(--error, #ff6b6b); }
.cc-section > legend { font-weight: 700; margin-bottom: 4px; }
.cc-section__head { display: flex; gap: 12px; align-items: flex-start; }
.cc-section__head h3 { margin: 0; font-size: 1rem; font-weight: 750; }
.cc-section__head small { display: block; margin-top: 2px; color: var(--on-surface-variant); font-size: .8rem; line-height: 1.35; }
.cc-step {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center;
  font-weight: 800; font-size: .82rem; color: var(--on-primary, #000);
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #fff));
}

/* ---------- fields ---------- */
.cc-field { display: grid; gap: 6px; min-width: 0; }
.cc-field > span { font-size: .78rem; font-weight: 650; color: var(--on-surface-variant); letter-spacing: .01em; }
.cc-field > span em { font-style: normal; font-weight: 500; opacity: .7; }
.cc-field input:not([type=checkbox]), .cc-field textarea, .cc-time {
  width: 100%; min-width: 0; box-sizing: border-box; padding: 12px 14px; border-radius: 14px; font: inherit; font-size: .95rem;
  border: 1px solid var(--outline-variant, rgb(255 255 255 / .12)); background: var(--surface-container, rgb(255 255 255 / .05)); color: var(--on-surface);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.cc-field input:focus, .cc-field textarea:focus, .cc-time:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.cc-field input[name=title] { font-size: 1.05rem; font-weight: 650; }
.cc-field textarea { resize: vertical; min-height: 76px; line-height: 1.4; }
.cc-time { margin-top: 2px; font-variant-numeric: tabular-nums; animation: cc-fade .2s ease both; }
.cc-time[hidden] { display: none !important; }
.cc-hint { color: var(--on-surface-variant); font-size: .78rem; }
.cc-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.cc-stepper { width: max-content; }
.cc-stepper .sm-stepper-input { width: 64px; text-align: center; font-weight: 750; font-size: 1.05rem; }

/* chips + segmented control */
.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-chips--tight { gap: 6px; padding-bottom: 4px; }
.cc-chip, .cc-seg__btn {
  -webkit-tap-highlight-color: transparent; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  padding: 8px 12px; min-height: 36px; border-radius: 999px;
  border: 1px solid var(--outline-variant, rgb(255 255 255 / .14)); background: transparent; color: var(--on-surface);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.cc-chip:active, .cc-seg__btn:active { transform: scale(.96); }
.cc-chip.is-on, .cc-seg__btn.is-on {
  background: color-mix(in srgb, var(--primary) 18%, transparent); border-color: color-mix(in srgb, var(--primary) 70%, transparent); color: var(--primary);
}
.cc-seg { display: flex; flex-wrap: wrap; gap: 6px; }

/* switch */
.cc-switch { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--surface-container, rgb(255 255 255 / .04)); cursor: pointer; }
.cc-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cc-switch__ui { flex: 0 0 auto; width: 46px; height: 28px; border-radius: 999px; position: relative; background: var(--outline-variant, #444); transition: background .2s ease; }
.cc-switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .22s cubic-bezier(.3, 1.4, .5, 1); }
.cc-switch input:checked + .cc-switch__ui { background: var(--primary); }
.cc-switch input:checked + .cc-switch__ui::after { transform: translateX(18px); }
.cc-switch input:focus-visible + .cc-switch__ui { outline: 2px solid var(--primary); outline-offset: 2px; }
.cc-switch b { display: block; font-size: .92rem; }
.cc-switch small { display: block; color: var(--on-surface-variant); font-size: .78rem; line-height: 1.35; margin-top: 2px; }

/* BGMI points table */
.cc-pts { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 6px; }
.cc-pts__cell { display: grid; place-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; background: var(--surface-container, rgb(255 255 255 / .05)); }
.cc-pts__cell small { font-size: .68rem; font-weight: 700; color: var(--on-surface-variant); letter-spacing: .03em; }
.cc-pts__cell b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.cc-pts__cell.is-win { background: linear-gradient(135deg, color-mix(in srgb, #f5c542 30%, transparent), color-mix(in srgb, #f5c542 8%, transparent)); }
.cc-pts__cell.is-win b, .cc-pts__cell.is-win small { color: #f5c542; }
.cc-pts__cell.is-zero { opacity: .65; }
.cc-pts__foot { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-pill { font-size: .74rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }

/* sticky footer */
.cc-error { margin: 0; }
.cc-error[hidden] { display: none !important; }
.cc-footer {
  position: sticky; bottom: 0; z-index: 3; margin: 4px -14px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  background: color-mix(in srgb, var(--surface, #0f1115) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--sm-line, rgb(255 255 255 / .08));
}
.cc-footer__sum { flex: 1 1 auto; min-width: 0; display: grid; }
.cc-footer__sum b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-footer__sum small { color: var(--on-surface-variant); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-publish { flex: 0 0 auto; min-height: 48px; padding-inline: 22px; border-radius: 16px; font-weight: 750; }
.cc-publish.is-busy { opacity: .75; }

/* ---------- match planner (used by New scrim and Manage) ---------- */
.v1-planner .v1-planner__maps { gap: 8px; }
.v1-planner .v1-mapbtn { min-height: 40px; padding: 9px 14px; border-radius: 999px; font-weight: 650; transition: transform .12s ease, background .18s ease; }
.v1-planner .v1-mapbtn:active { transform: scale(.95); background: color-mix(in srgb, var(--primary) 18%, transparent); }
.v1-pm { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 10px 10px 10px 12px; border-radius: 16px; background: var(--surface-container, rgb(255 255 255 / .04)); animation: cc-fade .22s ease both; }
.v1-pm__maps { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--surface-container-high, rgb(255 255 255 / .06)); }
.v1-pm__map {
  flex: 1 1 0; min-width: 0; min-height: 32px; padding: 6px 4px; border: 0; border-radius: 9px; background: transparent;
  font: inherit; font-size: .78rem; font-weight: 650; color: var(--on-surface-variant); cursor: pointer;
  transition: background .18s ease, color .18s ease; -webkit-tap-highlight-color: transparent;
}
.v1-pm__map.is-on { background: var(--primary); color: var(--on-primary, #000); box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent); }
.v1-pm__map--miramar.is-on { background: #e0a85a; color: #1d1204; }
.v1-pm__map--rondo.is-on { background: #6fc3a7; color: #04170f; }
.v1-pm__map:disabled { cursor: default; }
.v1-pm__body input[type=datetime-local] { border-radius: 10px; }
.v1-pm__ops { grid-auto-flow: row; }

/* ---------- motion consistency ---------- */
/* A repaint of the same screen (new data, progress tick) must not replay entrance animations: only the first
   paint of a screen animates. Spinners/progress (inline elements) keep running. */
#app.sm-repaint :is(main, section, article, header, ul, ol, li, table, tr, .sm-app-shell__content, [class*="card"], [class*="hero"], [class*="section"], [class*="panel"], [class*="tile"], [class*="list"], [class*="grid"], [class*="item"], [class*="row"]):not(.sm-skeleton):not([class*="skeleton"]) { animation: none !important; }
.btn, .sm-app-shell__tab, .sm-app-shell__icon { transition: transform .12s ease, background-color .18s ease, opacity .18s ease; }
.btn:active:not(:disabled) { transform: scale(.97); }
.auth-page.modal-scrim > .auth-card { animation: cc-sheet-up .3s cubic-bezier(.2, .9, .25, 1) both; }
.auth-page.modal-scrim { animation: cc-fade .2s ease both; }

@keyframes cc-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cc-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes cc-sheet-up { from { transform: translateY(28px); opacity: .4; } to { transform: none; opacity: 1; } }

@media (min-width: 720px) {
  .cc-footer { border-radius: 0 0 var(--sm-radius-sheet, 24px) var(--sm-radius-sheet, 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .cc-section, .cc-time, .v1-pm, .auth-page.modal-scrim, .auth-page.modal-scrim > .auth-card { animation: none !important; }
}

/* Who can join: public / private (invite-only). */
.cc-access { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.cc-access__opt { display: grid; gap: 4px; text-align: left; padding: 12px; border-radius: 14px; border: 1.5px solid var(--outline-variant, rgb(255 255 255 / .12)); background: var(--surface-container, #171b23); color: var(--on-surface); font: inherit; cursor: pointer; transition: border-color .16s, background .16s, transform .12s; }
.cc-access__opt b { font-size: 15px; }
.cc-access__opt small { font-size: 12px; color: var(--on-surface-variant); line-height: 1.35; }
.cc-access__opt.is-on { border-color: var(--primary, #f6c445); background: color-mix(in srgb, var(--primary, #f6c445) 12%, var(--surface-container, #171b23)); }
.cc-access__opt:active { transform: scale(.98); }
@media (max-width: 340px) { .cc-access { grid-template-columns: 1fr; } }
.cc-form > .v20-tpl { margin: 0; }
.cc-form [hidden], .cc-section [hidden] { display: none !important; }