/* «المواضيع» (js/pages/topics.js): the owner's design "V4 Topics" (desktop) and "MK Phone Topics" (phone).
   Every colour / radius / size comes from tokens.css; the tile colour rule is components.js scoreTone(). */

/* ---------- Head ---------- */
.tp-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tp-weak { display: none; }
.tp-head-end { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tp-pick { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--muted); }
.tp-pick .ph { font-size: 17px; color: var(--ac); }
.tp-main { display: flex; flex-direction: column; gap: var(--gap-section); min-width: 0; transition: opacity var(--t-fast); }
.tp-main.tp-busy { opacity: .55; pointer-events: none; }
.tp-notes .tip { align-items: center; }

/* ---------- «الخلاصة» ---------- */
.tp-sum { border-radius: var(--r-sheet); }
.tp-sum-h { display: flex; align-items: center; gap: 10px; font-size: var(--fs-section); }
.tp-sum-h .ph { font-size: 20px; color: var(--ac); }
.tp-sum-line { font-size: 17px; line-height: 1.7; text-wrap: pretty; }
.tp-sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.tp-box { border-radius: var(--r-tile); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.tp-box.best { background: var(--ac); }
.tp-box.worst { background: var(--white); }
.tp-box-h { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); font-weight: 500; }
.tp-box-h .ph { font-size: 18px; }
.tp-box.worst .tp-box-h .ph { color: var(--bad-warn); }
.tp-rank-row {
  display: flex; align-items: center; gap: 10px; border: none; border-radius: var(--r-chip); padding: 10px 12px;
  text-align: start; color: var(--ink); background: rgba(0, 0, 0, .08); transition: background var(--t-fast); min-height: var(--hit);
}
.tp-rank-row:hover { background: rgba(0, 0, 0, .16); }
.tp-box.worst .tp-rank-row { background: var(--light-row); }
.tp-box.worst .tp-rank-row:hover { background: var(--light-row-hover); }
.tp-rank-i {
  font-family: var(--font-num); font-size: var(--fs-meta); width: 24px; height: 24px; border-radius: 50%;
  background: #000; color: var(--text); display: grid; place-items: center; flex: none;
}
.tp-box.worst .tp-rank-i { background: var(--bad); color: var(--ink); }
.tp-rank-n { flex: 1; min-width: 0; font-size: var(--fs-ui); }
.tp-rank-c { font-size: var(--fs-small); opacity: .7; white-space: nowrap; }
.tp-box.worst .tp-rank-c { color: var(--bad-ink); opacity: 1; }
.tp-rank-s { font-family: var(--font-num); font-size: 20px; font-weight: 500; width: 40px; text-align: left; /* dir-ok: dir=ltr, so "end" would be right in Arabic too */ }
:root[dir="ltr"] .tp-rank-s { text-align: right; }

/* ---------- Tiles (left / right column) + sticky detail ---------- */
.tp-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.tp-tiles { flex: 1 1 360px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.tp-tap { display: none; }
.tp-detail { flex: 1.4 1 460px; position: sticky; top: 16px; gap: 22px; scroll-margin-top: 16px; }

.tp-tile { border: 2px solid transparent; border-radius: var(--r-tile); padding: 14px 16px; min-height: 128px; gap: 10px; }
.tp-tile[aria-pressed="true"] { border-color: var(--white); }
.tp-tile.tp-none { background: var(--card); color: var(--muted); }
.tp-tile.tp-none .tp-tile-name { color: var(--text); }
.tp-tile-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 6px; width: 100%; }
.tp-tile-name { font-size: var(--fs-ui); line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.tp-chip {
  display: flex; align-items: center; gap: 4px; font-size: var(--fs-tiny); padding: 3px 8px; border-radius: var(--r-pill);
  white-space: nowrap; background: rgba(0, 0, 0, .1); color: inherit; flex: none;
}
.tp-chip .ph { font-size: 12px; }
.tone-raised .tp-chip, .tp-none .tp-chip { background: rgba(255, 255, 255, .12); }
.tp-chip.down { background: var(--bad); color: var(--ink); }
.tp-chip.sel { background: var(--white); color: var(--ink); }
.tp-tile-mid { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; }
.tp-tile .num { font-size: 32px; }
.tp-tile .num .unit { font-size: 13px; color: inherit; opacity: .55; }
.tp-tile-counts { font-size: var(--fs-small); opacity: .75; text-align: end; }
.tp-tile .split.mini { width: 100%; }
/* design: praise is black only on the accent tile; accent on the pale / grey tiles */
.tp-tile.tone-pale .split > span.good, .tp-tile.tone-grey-2 .split > span.good { background: var(--ac); }
.tp-pchip { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(0, 0, 0, .12); }
.tone-raised .tp-pchip, .tp-none .tp-pchip { background: rgba(255, 255, 255, .14); }
.tp-pchip.sel { background: var(--white); color: var(--ink); }
.tp-pchip .ph { font-size: 14px; }
.tp-ptile-hint { font-size: var(--fs-tiny); opacity: .7; text-align: end; white-space: nowrap; }
/* phone tiles: when the hint does not fit beside the score (360 px), it moves under it instead of breaking */
.tp-tile-mid:has(.tp-ptile-hint) { flex-wrap: wrap; row-gap: 4px; }

/* ---------- Detail head ---------- */
.tp-d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tp-d-title { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tp-d-name { font-size: 28px; font-weight: 400; line-height: 1.3; }
.tp-d-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tp-dchip {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-small); padding: 4px 10px;
  border-radius: var(--r-pill); white-space: nowrap; background: var(--track); color: var(--soft-2);
}
.tp-dchip .ph { font-size: 13px; }
.tp-dchip.up { background: var(--ac); color: var(--ink); }
.tp-dchip.down { background: var(--bad); color: var(--ink); }
.tp-d-score { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tp-d-score .num { font-size: 64px; }
.tp-d-score .num .unit { font-size: 20px; color: var(--muted-2); }
.tp-detail .num.bad { color: var(--bad); }
.tp-d-prev { font-size: var(--fs-small); color: var(--muted-2); white-space: nowrap; }
.tp-d-note { font-size: var(--fs-small); color: var(--muted-2); line-height: 1.6; }
.tp-d-note a { color: var(--ac); }

/* ---------- Detail sections ---------- */
.tp-sec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tp-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tp-sec-t { font-size: var(--fs-body); }
.tp-sec-side { font-size: var(--fs-meta); color: var(--muted); }
.tp-sec-side .n { color: var(--text); }
.tp-split3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tp-sbox {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-inner); background: var(--card-2);
  color: var(--text); text-decoration: none; min-width: 0; transition: background var(--t-fast);
}
a.tp-sbox:hover { background: var(--raised); color: var(--text); }
.tp-sbox-l { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--muted); }
.tp-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ac); }
.tp-dot.bad { background: var(--bad); }
.tp-dot.mixed { background: var(--muted-2); }
.tp-sbox-n { display: flex; align-items: baseline; gap: 6px; }
.tp-sbox-n .tp-sbox-v { font-size: 28px; }
.tp-sbox-p { font-size: var(--fs-meta); color: var(--muted-2); font-weight: 400; }
.tp-sbox-h { font-size: var(--fs-tiny); color: var(--muted-2); }

.tp-sub { display: flex; flex-direction: column; gap: 10px; }
.tp-sub-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-meta); color: var(--muted); }
.tp-items { display: flex; flex-direction: column; gap: 14px; }
.tp-rows { display: flex; flex-direction: column; gap: 10px; }
.tp-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 34px; align-items: center; gap: 12px; font-size: var(--fs-meta); }
.tp-row-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tp-row-l .ph { font-size: 15px; color: var(--muted-2); flex: none; }
.tp-row-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-part .tp-row-name { white-space: normal; } /* a part's name wraps (a restaurant's «حرارة الأكل عند التقديم») */
/* English part names are longer ("Food temperature when served"): the name keeps the room next to its icon and the
   "N reviews" line drops under it when both don't fit (Arabic as before; phones wrap the row already) */
@media (min-width: 701px) {
  :root[dir="ltr"] .tp-part .tp-row-l { flex-wrap: wrap; row-gap: 0; }
  :root[dir="ltr"] .tp-part .tp-row-name { max-width: calc(100% - 24px); } /* the icon (14-16px wide) + the 6px gap */
}
.tp-row-sub { font-size: var(--fs-tiny); color: var(--muted-2); white-space: nowrap; }
/* a <bdi> of digits is left-to-right itself, so "end" would be its right side in Arabic too: the page end side by hand */
.tp-row-n { font-family: var(--font-num); font-size: var(--fs-body); text-align: left; /* dir-ok: see the ltr rule */ }
:root[dir="ltr"] .tp-row-n { text-align: right; }
.tp-row .split.thin { background: var(--track); }

/* buckets: the chosen bucket's row + the diverging bars */
.tp-wk {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: var(--r-chip);
  background: var(--card-2); font-size: var(--fs-meta); flex-wrap: wrap; min-height: var(--hit); color: var(--text);
  text-decoration: none; transition: background var(--t-fast);
}
a.tp-wk:hover { background: var(--raised); color: var(--text); }
.tp-wk-c { display: flex; align-items: center; gap: 14px; }
.tp-wk-c .n { font-size: 16px; }
.tp-wk-c .ph { font-size: 14px; color: var(--muted); }
.tp-wk-nav { display: flex; align-items: center; gap: 8px; }
.tp-wk-nav .tp-wk-box { flex: 1; min-width: 0; }
.tp-sec .dv-labels > div { overflow: visible; } /* the newest label at the edge is not cut (it sits over the padding) */
.tp-dense .dv-labels { display: none; }
.tp-dense .dv-bars { gap: 1px; }
.tp-dense .dv-bar { padding: 0; border-radius: 3px; }
.tp-axis { display: flex; gap: 8px; }
.tp-axis-pad { width: 16px; flex: none; }
.tp-axis > div { flex: 1; min-width: 0; display: flex; gap: 1px; }
.tp-axis > div > span {
  flex: 1; min-width: 0; display: flex; justify-content: center; font-family: var(--font-num); font-size: 10px;
  white-space: nowrap; color: var(--muted-2);
}

/* quotes */
.tp-quotes { display: flex; flex-direction: column; gap: 10px; }
.tp-quote {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--card-2); color: var(--text);
  text-decoration: none; transition: background var(--t-fast);
}
.tp-quote:hover { background: var(--raised); color: var(--text); }
.tp-q-bar { width: 6px; border-radius: 4px; flex: none; background: var(--dot-off); }
.tp-q-bar.good { background: var(--ac); }
.tp-q-bar.bad { background: var(--bad); }
.tp-q-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tp-q-text { font-size: var(--fs-body); line-height: 1.7; text-align: start; overflow-wrap: anywhere; }
.tp-q-meta { font-size: var(--fs-small); color: var(--muted-2); line-height: 1.8; }
.tp-links { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-links:empty { display: none; }
.tp-links .n { opacity: .65; }

/* the sheet (phone «كل التفاصيل») reuses the sections */
.sheet .tp-d-title { flex: none; gap: 10px; }
.sheet .tp-sec { padding-top: 6px; }

/* ---------- Tablet: the detail sits under the tiles when they do not fit side by side ---------- */
@media (max-width: 1099px) {
  .tp-detail { scroll-margin-top: 12px; }
}

/* ---------- Phone (design "MK Phone Topics") ---------- */
@media (max-width: 700px) {
  .tp-eyebrow, .tp-pick, .tp-sum { display: none; }
  /* nowrap: a wrapping column would size its line to the period chips' full width (sideways scroll at 360) */
  .tp-head { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  .tp-head > * { min-width: 0; }
  .tp-weak { display: inline; font-size: var(--fs-meta); color: var(--muted-2); white-space: nowrap; }
  .tp-head-end { display: block; }
  .tp-layout { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
  .tp-tiles { flex: none; }
  .tp-detail {
    flex: none; order: -2; position: static; border-radius: 26px; padding: 16px; gap: 12px; scroll-margin-top: 12px;
  }
  .tp-tap { display: flex; order: -1; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--muted); }
  .tp-tap .ph { font-size: 18px; color: var(--ac); }
  .tp-tile { border-radius: var(--r-tile-sm); padding: 12px 14px; min-height: 118px; gap: 8px; }
  .tp-tile-name { font-size: var(--fs-meta); }
  .tp-tile .num { font-size: 26px; }

  .tp-p-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
  .tp-p-tt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .tp-p-trend { font-size: var(--fs-small); color: var(--muted-2); }
  .tp-p-name { font-size: 20px; font-weight: 400; line-height: 1.4; }
  .tp-p-head .num { font-size: 44px; flex: none; }
  .tp-p-head .num .unit { font-size: 15px; color: var(--muted-2); }
  .tp-p-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tp-p-box {
    border-radius: var(--r-inner); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px;
    text-decoration: none; min-height: 64px; min-width: 0;
  }
  .tp-p-box.good { background: var(--ac); color: var(--ink); }
  .tp-p-box.white { background: var(--white); color: var(--ink); }
  .tp-p-box.raised { background: var(--raised); color: var(--text); }
  .tp-p-box:hover { color: inherit; }
  .tp-p-box-l { font-size: var(--fs-small); }
  .tp-p-box .num { font-size: 24px; }
  .tp-p-bars .dv-y, .tp-p-bars .dv-labels, .tp-p-bars .tp-axis { display: none; }
  .tp-p-bars .dv-bar { padding: 0; }
  .tp-p-bars .dv-up span { border-radius: 4px 4px 0 0; }
  .tp-p-bars .dv-down span { border-radius: 0 0 4px 4px; }
  .tp-p-bars .dv-up { border-bottom-color: var(--raised); }
  .tp-p-cap { font-size: var(--fs-small); color: var(--muted-2); }
  .tp-p-quote {
    display: block; padding: 12px 14px; border-radius: var(--r-inner); background: var(--card-2); color: var(--text);
    text-decoration: none;
  }
  .tp-p-quote:hover { color: var(--text); }
  .tp-p-quote p { font-size: var(--fs-ui); line-height: 1.7; text-align: start; overflow-wrap: anywhere; }
  .tp-p-quote .tp-q-meta { display: block; margin-top: 4px; }
  .tp-more { width: 100%; }

  .tp-row { grid-template-columns: 112px minmax(0, 1fr) 30px; gap: 10px; }
  .tp-row-l { flex-wrap: wrap; column-gap: 6px; row-gap: 0; }
  .tp-row-l .ph { display: none; }
  .tp-row-name { max-width: 100%; }
  .tp-split3 { gap: 8px; }
  .tp-sbox { padding: 10px 12px; }
  .tp-sbox-n .tp-sbox-v { font-size: 24px; }
  .tp-d-note a { display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 4px; }
  .tp-quote { padding: 12px 14px; border-radius: var(--r-inner); }
  .tp-q-text { font-size: var(--fs-ui); }
}
/* "Complaint" in a third of a 320px phone: a little smaller, a little less padding (English only) */
@media (max-width: 359px) {
  :root[dir="ltr"] .tp-p-box { padding-inline: 8px; }
  :root[dir="ltr"] .tp-p-box-l { font-size: var(--fs-tiny); }
}

/* ---------- A problem-only topic (core/problem.js: restaurant food safety): the level instead of a 0-10 score ----------
   Also used by dashboard.js and monthly.js. The colour is never the only signal: the dot comes with the word. */
.prob-level {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: var(--r-pill); white-space: nowrap;
  font-size: var(--fs-ui); font-weight: 500; line-height: 1.4; background: rgba(255, 255, 255, .1); color: var(--text);
}
.prob-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--ac); }
.prob-level.watch .prob-dot { background: var(--alert-amber); }
.prob-level.worry .prob-dot { background: var(--bad); }
.prob-level.prob-big { font-size: 18px; padding: 7px 16px; gap: 10px; }
.prob-level.prob-big .prob-dot { width: 12px; height: 12px; }
.on-light .prob-level, .tp-box.worst .prob-level, .tone-pale .prob-level, .tone-grey-2 .prob-level { background: rgba(0, 0, 0, .08); color: var(--ink); }
.on-light .prob-level.worry .prob-dot, .tp-box.worst .prob-level.worry .prob-dot { background: var(--bad-warn); }
.on-light .prob-level.rare .prob-dot, .tp-box.worst .prob-level.rare .prob-dot { background: var(--good-ink); }
.tp-tile-prob { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; min-width: 0; }
.tp-tile-pline { font-size: var(--fs-small); line-height: 1.6; opacity: .85; text-wrap: pretty; }
.tp-rank-c.prob-c { white-space: normal; text-align: end; }
.tp-rank-row .prob-level { flex: none; }
.prob-sec { gap: 8px; }
.prob-sec .btn { align-self: flex-start; }
.prob-main { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.prob-line { font-size: var(--fs-body); line-height: 1.7; margin: 0; }
.prob-prev { font-size: var(--fs-small); color: var(--muted); line-height: 1.7; margin: 0; }
.prob-rule { line-height: 1.7; margin: 0; }
@media (max-width: 700px) {
  .prob-line { font-size: var(--fs-ui); }
}