/* ==========================================================================
   cloud.css — cloud module (compete, accounts, prayer times, push, share, AI). Owned by the cloud module.
   Builds on css/app.css tokens and components (hero, card, list/row, metrics, ring, btn, chip, field, note).
   Logical properties only (RTL-safe), 44px touch targets, no emoji/gold/gradient text.
   ========================================================================== */

/* Spacing helpers for cloud screens ------------------------------------------ */
.cl-stack > * + * { margin-top: var(--s4); }
.view > .cl-end { margin-top: 28px; }
#cmp-mine:empty, #cl-mycomps:empty { display: none; }
#cl-mycomps > .list { border-top: 1px solid var(--hairline); }
/* Programmatic focus targets after content changed (a heading, the first newly shown row): a visible ring, so the
   place where reading continues can be seen (also after a tap, where :focus-visible would not match) */
[data-cl-focus]:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-radius: 10px; box-shadow: 0 0 0 1px var(--accent); }
.row[data-cl-focus]:focus { border-radius: 14px; }
.cl-tabpanel > * + * { margin-top: var(--s4); }

/* Forms ------------------------------------------------------------------- */
.cl-form-err { margin-top: var(--s3); color: var(--danger); font-size: 14px; font-weight: 600; line-height: 1.4; }
.cl-form-err[hidden] { display: none; }
form[aria-busy="true"] .btn[type="submit"] { opacity: .6; }
.cl-codefield .input {
  direction: ltr;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .32em;
  font-weight: 700;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.cl-codefield .input::placeholder { letter-spacing: normal; text-transform: none; font-weight: 500; font-size: 16px; }
.cl-latlng { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); }
.cl-latlng .field + .field { margin-top: 0; }
.cl-or {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s4) 0 var(--s3);
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.cl-or::before, .cl-or::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--hairline); }
.link-btn.cl-danger-link { color: var(--danger); }
@media (hover: hover) { .link-btn.cl-danger-link:hover { background: var(--danger-soft); } }

/* Prize inputs: "#1 [ prize ]" -------------------------------------------- */
.cl-prizes { display: grid; gap: var(--s2); }
.cl-prize-f { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cl-prize-n { flex: none; width: 34px; font-size: 14px; font-weight: 700; color: var(--accent); text-align: center; font-variant-numeric: tabular-nums; }
.cl-prize-f .input { flex: 1 1 auto; min-width: 0; }

/* Status lines (sync) ------------------------------------------------------ */
.cl-status { display: flex; align-items: center; gap: 8px; margin-top: var(--s3); font-size: 13px; font-weight: 600; color: var(--ink-3); line-height: 1.4; }
.cl-status-ic { flex: none; display: inline-flex; color: var(--accent); }

/* Join code display -------------------------------------------------------- */
.cl-codebox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: var(--s4);
  padding: 12px 16px;
  border-radius: var(--r-block);
  background: var(--card-2);
}
.cl-code {
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 360px) { .cl-code { font-size: 22px; letter-spacing: .16em; } }
/* The join code is always Latin and left to right: it keeps its spacing in the languages whose text has none
   (app.css sets letter-spacing: 0 !important for ar, ur, bn, hi and zh) */
html[lang] .cl-code { letter-spacing: .22em !important; }
html[lang] .cl-codefield .input { letter-spacing: .32em !important; }
html[lang] .cl-codefield .input::placeholder { letter-spacing: normal !important; }
@media (max-width: 360px) { html[lang] .cl-code { letter-spacing: .16em !important; } }

/* Hero extras -------------------------------------------------------------- */
.cl-hero-prize { display: flex; align-items: center; gap: 8px; color: var(--hero-ink-2); font-size: 14px; font-weight: 600; line-height: 1.4; }
.cl-hero-prize .ic { flex: none; color: var(--hero-accent); }
.hero .loading { justify-content: flex-start; padding: 10px 0 2px; color: var(--hero-ink-2); }
.hero .spinner { border-color: var(--hero-track); border-top-color: var(--hero-accent); }

/* Leaderboard rows: rank (accent marks the top three, no medals), name, prize line, points ------------- */
.cl-seg { margin-bottom: var(--s3); }
.cl-rank {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.cl-rank.is-top { color: var(--accent-ink); background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cl-rank.is-1 { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.row.cl-lb { align-items: center; }
.cl-pts { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; text-align: end; }
.cl-pts-n { font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cl-pts-u { margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.cl-prize { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--accent-ink); font-weight: 650; }
.cl-prize .ic { flex: none; }
.cl-you {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 6px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  vertical-align: 1px;
}
.row.cl-me {
  width: calc(100% + 20px);
  margin-inline: -10px;
  padding-inline: 10px;
  border-radius: 14px;
  background: var(--accent-soft);
}
.cl-ellipsis { padding: 2px 0; text-align: center; color: var(--ink-3); font-weight: 700; letter-spacing: .3em; line-height: 1; }

/* Organiser dashboard ---------------------------------------------------------- */
/* The five tabs stay on one row and scroll sideways inside it (bleeding to the screen edges); the page itself never
   scrolls horizontally. Vertical padding keeps the chips' enlarged tap areas inside the scroller. */
.chips.cl-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter));
  padding: 4px var(--gutter);
  scroll-padding-inline: var(--gutter);
}
.chips.cl-tabs::-webkit-scrollbar { display: none; }
.cl-tabs .chip { flex: none; min-height: 40px; padding-inline: 14px; background: transparent; border-color: var(--hairline-2); color: var(--ink-2); }
.cl-tabs .chip[aria-selected="true"] { background: var(--card); border-color: var(--accent); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
.cl-danger-card .kicker .ic { color: var(--danger); }
.cl-acts { flex: none; display: flex; align-items: center; margin-inline-end: -8px; }
.cl-acts .icon-btn { color: var(--ink-2); }
.cl-acts .icon-btn .ic { width: 20px; height: 20px; }
.icon-btn.cl-danger { color: var(--danger); }
.cl-mark { display: inline-flex; vertical-align: -2px; margin-inline-start: 6px; color: var(--ink-3); }
.cl-mark.is-warn { color: var(--danger); }
.row.cl-ros.is-dim .row-title { color: var(--ink-3); }
.row.cl-danger-row .row-title { color: var(--danger); }
.row.cl-danger-row .row-ic { background: var(--danger-soft); color: var(--danger); }
.cl-set-tgl .row-sub { max-width: 46ch; }

/* Prayer times card and sheet -------------------------------------------------- */
.cl-prayer .row.cl-pr { min-height: 52px; }
.cl-prayer .row.cl-pr .row-val { font-size: 16px; font-weight: 650; color: var(--ink); }
.row.cl-cur {
  width: calc(100% + 20px);
  margin-inline: -10px;
  padding-inline: 10px;
  border-radius: 14px;
  background: var(--accent-soft);
}
.row.cl-cur .row-title, .row.cl-cur .row-val { color: var(--accent-ink); }
.cl-now {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 8px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.cl-where { display: flex; align-items: center; gap: 6px; margin-top: var(--s3); }
.cl-where > .ic { flex: none; color: var(--accent); }
.cl-where-t { flex: 1 1 auto; min-width: 0; }

/* Prayer selects: long option names end with an ellipsis instead of being cut (the labels are short in English) */
#cl-method, #cl-madhab, #cl-setup-method, #cl-setup-madhab, #cl-push-hour { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

/* Dua at iftar (Arabic in Amiri via RS.ui.arabic) ------------------------------------------ */
.cl-dua { margin-top: var(--s4); padding: 14px 16px; border-radius: var(--r-block); background: var(--card-2); }
.cl-dua .ar-text { margin-top: 6px; color: var(--ink); }
.cl-translit { margin-top: 2px; font-size: 14.5px; font-style: italic; color: var(--ink-2); text-align: start; }
[dir="rtl"] .cl-translit { text-align: left; }
.cl-dua-mean { margin-top: 6px; font-size: 14.5px; color: var(--ink); }

/* AI explanation ------------------------------------------------------------------- */
.cl-ai { color: var(--ink); font-size: 15.5px; line-height: 1.6; }
.cl-ai p + p { margin-top: 10px; }

/* Prayer setup: city search, the chosen place, coordinates and advanced settings ------------------------------ */
.cl-city-sel {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: 12px 14px; border-radius: 16px; background: var(--accent-soft); color: var(--ink);
}
.cl-city-sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-city-sel > .ic { flex: none; margin-top: 2px; color: var(--accent-ink); }
.cl-city-sel-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cl-city-sel-n { font-weight: 700; overflow-wrap: anywhere; }
.cl-city-status { min-height: 1.4em; margin-top: 6px; }
.cl-city-status:empty { min-height: 0; margin: 0; }
#cl-city-res .list { margin-top: var(--s2); }
.cl-suggest:empty { display: none; }
.cl-suggest { margin-top: 6px; color: var(--accent-ink); font-weight: 600; }
.cl-more { border-top: 1px solid var(--hairline); padding-top: var(--s3); }
.cl-more > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  min-height: 44px; font-weight: 700; color: var(--ink); border-radius: 12px;
}
.cl-more > summary::-webkit-details-marker { display: none; }
.cl-more > summary::after { content: ''; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-inline-end: 6px; transition: transform .2s; }
.cl-more[open] > summary::after { transform: rotate(-135deg); }
.cl-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-adj { border: 0; padding: 0; margin-inline: 0; min-inline-size: 0; }
.cl-adj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s2); }
.cl-adj-grid .field { margin-top: 0; }
@media (max-width: 360px) { .cl-adj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }