/* e'thix — PK-W7-1/2 (linked before the program's last eight stylesheets, so before usage.css: every rule here
   out-specifies the usage.css rule it changes, and the order does not matter): the rings, the compact balance as a button, the fit line above the composer, the cost sheet and
   «رصيدك» in full (usage-live.js, usage-pages.js). Mobile first, logical properties only (RTL by the document), the
   theme's tokens only; heights and fills are custom properties set through the CSSOM (no style attribute: the CSP). */

/* ── K4: the three windows as rings — the same row, bar, fill, value and renewal time as the bars ── */
.usage-live--rings .usage-live__rows{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.usage-live--rings .usage-live__row{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:.35rem}
.usage-live--rings .usage-live__label{grid-row:1;grid-column:1;font-weight:600}
.usage-live--rings .usage-live__bar{grid-row:2;grid-column:1;inline-size:clamp(4.5rem,22vw,6.5rem);block-size:auto;aspect-ratio:1;border-radius:50%;
  background:var(--sunken,var(--line));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - .55rem),#000 calc(100% - .55rem));mask:radial-gradient(farthest-side,transparent calc(100% - .55rem),#000 calc(100% - .55rem))}
.usage-live--rings .usage-live__fill{inset:0;inline-size:auto;border-radius:50%;background:conic-gradient(var(--accent-b,var(--gold)) var(--usage-left,0%),transparent 0)}
.usage-live--rings .usage-live__bar.is-low .usage-live__fill{background:conic-gradient(var(--warn,var(--danger)) var(--usage-left,0%),transparent 0)}
.usage-live--rings .usage-live__pct{grid-row:2;grid-column:1;align-self:center;font-size:1.05rem;font-weight:700;min-inline-size:0;text-align:center}
.usage-live--rings .usage-live__reset{grid-row:3;grid-column:1;font-size:.74rem;line-height:1.35}
@media (prefers-reduced-motion:no-preference){.usage-live--rings .usage-live__fill{transition:none}}

/* ── K3: the compact balance is one button (a transparent layer over the bars, which stay readable as progress bars) ── */
.usage-live--compact{position:relative;border-radius:var(--r-sm,10px)}
.usage-live__open{position:absolute;inset:0;inline-size:100%;block-size:100%;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;color:inherit}
.usage-live__open:hover{background:color-mix(in srgb,var(--accent-b,var(--gold)) 7%,transparent)}
.usage-live__open:focus-visible{outline:2px solid var(--gold-deep,var(--gold));outline-offset:2px}
@media (max-width:640px){
  /* one line on a phone: the lowest window only */
  .usage-live.usage-live--compact .usage-live__rows{grid-auto-flow:row;grid-auto-columns:auto}
  .usage-live--compact .usage-live__row:not(.is-lowest){display:none}
  .usage-live--compact .usage-live__row.is-lowest{grid-template-columns:auto 1fr auto}
  .usage-live--compact .usage-live__row.is-lowest .usage-live__pct{grid-column:auto}
  .usage-live__open{min-block-size:44px}
}

/* ── K2: the line above the composer when its model does not fit (and the quiet one at 20% or less) ── */
.usage-fit-line{display:grid;gap:.3rem;margin-block-end:8px;padding:.6rem .8rem;border:1px solid var(--warn,var(--line));border-radius:var(--r-sm,10px);background:var(--surface-2,transparent);color:var(--ink)}
.usage-fit-line p{margin:0}
.usage-fit-line__text{font-weight:600;font-size:.9rem}
.usage-fit-line__detail{font-size:.84rem;color:var(--ink-soft,var(--ink))}
.usage-fit-line__use{margin-block-start:.15rem}
.usage-fit-line.is-quiet{padding:.2rem .6rem;border:0;background:transparent}
.usage-fit-line.is-quiet .usage-fit-line__text{font-weight:400;font-size:.78rem;color:var(--muted)}
/* J1: the chip warns before sending; the picker says which model fits */
.model-chip.usage-unfit{box-shadow:inset 0 0 0 1px var(--warn,var(--danger));color:var(--warn,var(--danger))}
.pop-item .usage-fit{display:block;margin-block-start:.15rem;font-size:.72rem}
.pop-item .usage-fit.is-ok{color:var(--ok,var(--accent-c,var(--muted)))}
.pop-item .usage-fit.is-out{color:var(--warn,var(--danger))}
.pop-item.is-unfit{opacity:.78;cursor:not-allowed}
.pop-head .usage-fit-note{display:block;font-weight:400;font-size:.72rem;color:var(--muted);margin-block-start:.15rem}

/* ── K1: the cost tag on a card, and the confirmation sheet ── */
.usage-cost{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .5rem;border-radius:999px;font-size:.74rem;background:var(--sunken,var(--line));color:var(--ink-soft,var(--ink));font-variant-numeric:tabular-nums}
.usage-cost.is-free{background:color-mix(in srgb,var(--accent-c,var(--gold)) 16%,transparent)}
.usage-cost.is-out{background:color-mix(in srgb,var(--warn,var(--danger)) 16%,transparent);color:var(--warn,var(--danger))}
/* wave-3 merge (A9): on the agent home's task cards, the tag sits at the start of its line, under «تحتاج: …» */
.sc-txt .usage-cost{justify-self:start;margin-top:2px}
.usage-cost-sheet{display:grid;gap:.6rem}
.usage-cost-sheet p{margin:0}
.usage-cost-sheet__what{color:var(--muted);font-size:.9rem}
.usage-cost-sheet__big{font-size:1.15rem;font-weight:700;line-height:1.5}
.usage-cost-sheet__after{font-size:.92rem}
.usage-cost-sheet__hold{font-size:.82rem;color:var(--muted)}
.usage-cost-dlg .sheet-foot{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}
.usage-cost-dlg .sheet-foot .b{min-block-size:44px}

/* ── K4 / K5: «رصيدك» in full ── */
.usage-pages{display:grid;gap:1rem;margin-block-start:1rem}
.up-sec{display:grid;gap:.6rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r,14px);background:var(--surface,transparent);min-inline-size:0}
.up-sec__title{margin:0;font-size:1rem;font-weight:700}
.up-sec__desc,.up-muted{margin:0;font-size:.84rem;color:var(--muted);line-height:1.6}
.up-sub{margin:.4rem 0 0;font-size:.9rem;font-weight:700}
.up-chart__bars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:end;gap:2px;block-size:8.5rem;padding-block-end:1.3rem;position:relative}
.up-chart__col{position:relative;display:flex;align-items:flex-end;justify-content:center;block-size:100%}
.up-chart__bar{display:block;inline-size:100%;max-inline-size:14px;block-size:max(var(--h,0%),2px);border-radius:4px 4px 1px 1px;background:var(--sunken,var(--line))}
.up-chart__col.has-use .up-chart__bar{background:linear-gradient(180deg,var(--accent-b,var(--gold)),var(--accent-c,var(--gold)))}
.up-chart__tick{position:absolute;inset-block-start:calc(100% + .2rem);white-space:nowrap;font-size:.66rem;color:var(--muted)}
.up-chart__col:first-child .up-chart__tick{inset-inline-start:0}
.up-chart__col:last-child .up-chart__tick{inset-inline-end:0}
.up-chart__table summary,.up-diff summary{cursor:pointer;font-size:.84rem;color:var(--ink-soft,var(--ink));min-block-size:32px;display:flex;align-items:center}
.up-table{inline-size:100%;border-collapse:collapse;font-size:.84rem}
.up-table th,.up-table td{padding:.3rem .4rem;text-align:start;border-block-end:1px solid var(--line)}
.up-split{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.up-donut{flex:0 0 auto;color:var(--ink)}
.up-legend{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;flex:1 1 12rem;min-inline-size:0}
.up-legend__row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.5rem;font-size:.86rem}
.up-legend--models .up-legend__row{grid-template-columns:1fr auto auto}
.up-legend__dot{inline-size:.7rem;block-size:.7rem;border-radius:50%;background:var(--muted)}
.up-legend__dot[data-kind="consultation"]{background:var(--accent-b,#6c8cff)}
.up-legend__dot[data-kind="followup"]{background:var(--accent-c,#3fb8a0)}
.up-legend__dot[data-kind="case_refresh"]{background:var(--accent-a,#b58cff)}
.up-legend__dot[data-kind="agent"]{background:var(--gold,#d4a24c)}
.up-legend__dot[data-kind="document"]{background:var(--muted,#8a8f98)}
.up-legend__n{color:var(--muted);font-size:.78rem}
.up-history{list-style:none;margin:0;padding:0;display:grid}
.up-item{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.55rem 0;border-block-end:1px solid var(--line);min-inline-size:0}
.up-item:last-child{border-block-end:0}
.up-item__main{display:grid;gap:.1rem;min-inline-size:0}
.up-item__what{font-size:.9rem;overflow-wrap:anywhere}
.up-item__meta{font-size:.76rem;color:var(--muted)}
.up-item__side{display:grid;justify-items:end;gap:.15rem;flex:0 0 auto;text-align:end}
.up-item__pct{font-weight:700;font-size:.9rem}
.up-status{font-size:.7rem;padding:.05rem .45rem;border-radius:999px;background:var(--sunken,var(--line));color:var(--ink-soft,var(--ink))}
.up-status--counting{background:color-mix(in srgb,var(--warn,var(--gold)) 18%,transparent)}
.up-status--released{background:transparent;border:1px solid var(--line);color:var(--muted)}
.up-plan{display:grid;gap:.35rem;padding:.75rem .85rem;border:1px solid var(--line);border-radius:var(--r-sm,10px)}
.up-plan--current{border-color:var(--accent-b,var(--gold))}
.up-plan__top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.up-plan__name{font-size:.98rem}
.up-plan p{margin:0;font-size:.84rem}
.up-plan__list{margin:0;padding-inline-start:1.1rem;display:grid;gap:.25rem;font-size:.86rem}
.up-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.6rem}
.up-badge{font-size:.72rem;padding:.1rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--accent-b,var(--gold)) 16%,transparent)}
.up-badge--soon{background:var(--sunken,var(--line));color:var(--muted)}
.up-diff p{margin:.35rem 0 0;font-size:.86rem;line-height:1.6}
.up-settings-link{margin-block-start:.75rem;justify-self:start}
@media (max-width:380px){
  .up-sec{padding:.75rem}
  .usage-live--rings .usage-live__rows{gap:.4rem}
  .usage-live--rings .usage-live__reset{font-size:.68rem}
}

/* ── K5 (N20): «خطتك» in full (usage-pages.js mountPlan) — the current plan, what it includes, every plan side by side ── */
.usage-live__plan{color:var(--muted);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--muted) 45%,transparent);text-underline-offset:.2em}
.usage-live__plan:hover,.usage-live__plan:focus-visible{color:var(--ink)}
.up-plan-more{justify-self:start;margin-block-start:.25rem}
.pl-page{display:grid;gap:1rem;min-inline-size:0}
.pl-state{margin:0}
.pl-hero{position:relative;display:grid;gap:.4rem;padding:1.1rem 1.15rem;border:1px solid color-mix(in srgb,var(--accent-b) 55%,var(--line));border-radius:var(--r-md,14px);background:linear-gradient(160deg,color-mix(in srgb,var(--accent-b) 14%,var(--surface)) 0%,var(--surface) 70%);overflow:hidden}
.pl-hero__eyebrow{margin:0;font-size:.76rem;font-weight:600;color:var(--muted)}
.pl-hero__name{margin:0;font-size:clamp(1.45rem,5vw,1.9rem);line-height:1.15;letter-spacing:-.01em}
.pl-hero__lead{margin:0;font-size:.9rem;color:var(--ink-soft,var(--ink))}
.pl-sub{margin:.5rem 0 0;font-size:.8rem;font-weight:700;color:var(--muted)}
.pl-incl,.pl-card__list{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:.88rem;line-height:1.55}
.pl-incl li,.pl-card__list li{display:grid;grid-template-columns:auto 1fr;gap:.45rem;align-items:start}
.pl-ic{display:inline-grid;place-items:center;inline-size:1.15rem;block-size:1.15rem;margin-block-start:.12rem;border-radius:50%;background:color-mix(in srgb,var(--accent-b) 22%,transparent);color:var(--accent-c,var(--ink))}
.pl-ic .i{inline-size:.72rem;block-size:.72rem}
.pl-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:.35rem}
.pl-all{display:grid;gap:.65rem}
.pl-all__title{margin:0;font-size:1rem}
.pl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));gap:.65rem}
.pl-card{display:grid;align-content:start;gap:.45rem;padding:.85rem .9rem;border:1px solid var(--line);border-radius:var(--r-sm,10px);background:var(--surface);min-inline-size:0}
.pl-card.is-current{border-color:var(--accent-b);box-shadow:0 0 0 1px var(--accent-b) inset}
.pl-card__top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.pl-card__name{margin:0;font-size:1.05rem}
.pl-card__balance{margin:0;font-size:.84rem;font-weight:600}
.pl-card__list{font-size:.82rem;color:var(--ink-soft,var(--ink))}
.pl-meter{block-size:.4rem;border-radius:999px;background:var(--sunken,var(--line));overflow:hidden}
.pl-meter__fill{display:block;block-size:100%;inline-size:var(--w,4%);border-radius:inherit;background:var(--g-accent,var(--accent-b))}
.pl-card.is-soon .pl-meter__fill{opacity:.55}
.pl-note{margin:0;font-size:.82rem}
.pl-diff{padding:.6rem .8rem;border:1px solid var(--line);border-radius:var(--r-sm,10px)}
.pl-diff summary{cursor:pointer;font-weight:600;font-size:.88rem}
@media (max-width:380px){.pl-hero{padding:.9rem}.pl-card{padding:.75rem}}