/* مُرشدي — additions on top of the shared site design system (site.css). */

.brand-mark { color: var(--orange); }
.brand-mark g { stroke: currentColor; }

/* the equalizer ring becomes a ring of theme colours */
.eq line { stroke-linecap: round; }

/* tools panels: copy beside a phone */
.tool { display: grid; grid-template-columns: 1fr minmax(220px, 280px); gap: clamp(24px, 5vw, 64px); align-items: center; justify-content: center; max-inline-size: 880px; margin-inline: auto; padding-block-start: 28px; }
.tool-copy h3 { font-family: var(--display); font-size: var(--fs-h2); line-height: 1.15; margin-block-end: 12px; }
.tool-copy > p { color: var(--muted); font-size: var(--fs-lead); }
.tool-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.tool-list li { display: flex; gap: 10px; align-items: center; }
.tool-list .i { inline-size: 20px; block-size: 20px; color: var(--orange); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool .device { inline-size: 100%; max-inline-size: 280px; justify-self: center; }
@media (max-width: 720px) { .tool { grid-template-columns: 1fr; } .tool .device { max-inline-size: 240px; } }

/* theme picker */
.themes { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-block-start: 28px; }
@media (max-width: 820px) { .themes { grid-template-columns: 1fr; justify-items: center; } }
.theme-card { --t-bg: #FFF4DE; --t-sf: #FFFBF2; --t-ac: #C73A5F; --t-tx: #3D2127; --t-r: 26px;
  inline-size: 100%; max-inline-size: 340px; padding: 18px; border-radius: 30px; background: var(--t-bg); color: var(--t-tx);
  border: 1px solid color-mix(in srgb, var(--t-ac) 25%, transparent); box-shadow: 0 40px 90px -40px rgb(0 0 0 / .9), 0 0 0 6px rgb(255 255 255 / .04);
  transition: background .45s, color .45s, border-radius .45s; display: grid; gap: 14px; }
.tc-top { display: flex; align-items: center; gap: 12px; }
.tc-top b { display: block; font-size: 1.05rem; }
.tc-top small, .tc-main small { opacity: .65; font-size: .78rem; }
.tc-av { inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--t-ac); color: var(--t-bg); display: grid; place-items: center; font-weight: 800; transition: background .45s, color .45s; }
.tc-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; background: var(--t-sf); border-radius: var(--t-r); transition: background .45s, border-radius .45s; }
.tc-main strong { display: block; font-size: 2rem; line-height: 1.1; font-weight: 900; }
.tc-main strong i { font-size: .8rem; font-style: normal; opacity: .6; font-weight: 500; }
.tc-btn { display: inline-block; margin-block-start: 10px; padding: 7px 16px; border-radius: 999px; background: var(--t-ac); color: var(--t-bg); font-weight: 700; font-size: .85rem; transition: background .45s, color .45s; }
.tc-ring { inline-size: 84px; block-size: 84px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--t-ac) 0 72%, color-mix(in srgb, var(--t-ac) 18%, transparent) 72% 100%); position: relative; transition: background .45s; }
.tc-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--t-sf); transition: background .45s; }
.tc-ring b { position: relative; font-size: 1.05rem; font-weight: 900; }
.tc-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tc-chips span { text-align: center; padding: 10px 4px; background: color-mix(in srgb, var(--t-ac) 14%, var(--t-sf)); border-radius: calc(var(--t-r) * .7); font-weight: 900; font-size: 1.3rem; transition: background .45s, border-radius .45s; }
.tc-chips small { display: block; font-size: .7rem; font-weight: 500; opacity: .7; }

.theme-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; inline-size: 100%; }
.theme-chip { display: grid; gap: 8px; justify-items: start; padding: 10px; text-align: start; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface); color: var(--text); cursor: pointer; font: inherit; font-size: .88rem; transition: transform .25s var(--ease-spring), border-color .2s, background .2s; }
.theme-chip:hover { transform: translateY(-2px); border-color: var(--orange); }
.theme-chip[aria-pressed="true"] { border-color: var(--orange); background: var(--surface-2); box-shadow: 0 0 0 3px var(--glow); }
.theme-chip .sw { display: flex; inline-size: 100%; block-size: 26px; border-radius: 9px; overflow: hidden; border: 1px solid rgb(255 255 255 / .12); }
.theme-chip .sw i { flex: 1; }
.theme-chip .sw i:first-child { flex: 2; }
.theme-chip small { color: var(--faint); font-size: .7rem; }

/* new badges */
.badge-new b { background: var(--orange); color: var(--on-accent); }
@media (prefers-reduced-motion: reduce) { .theme-card, .theme-card * { transition: none !important; } }