/* ═══════════════════════════════════════════════════════════════════════════
   ROUNDED.CSS - the shape layer.

   Aluma is used by children. A corner that comes to a point reads as a warning
   in a product like this, so nothing in the interface is allowed to have one.

   The radius LADDER lives in styles.css / redesign.css / dashboard.css and was
   lifted so that even its smallest step (--r-xs, 12px) is visibly soft. Every
   component rule that already declared a radius therefore rounds itself.

   This file exists for the two cases that cannot fix themselves:

     1. Surfaces that declared NO radius at all and so inherited a hard 90°
        corner from the browser - media, code blocks, tables, scrollbars,
        native form controls.
     2. Controls where "softer" is not enough and the right answer is a full
        pill - the things a student actually clicks.

   It loads LAST so it is the final word on shape, and it touches ONLY
   border-radius / overflow. Nothing here changes layout, colour or spacing.

   Deliberately NOT rounded: the app shell itself (.sidebar, .topbar, .main,
   .view) and the modal backdrop. Those are full-bleed edges that meet the
   viewport - rounding them would expose the page behind, not soften anything.
   Segmented controls keep their squared inner joins so the group still reads
   as one object; only the group's outer corners are round.
   ═══════════════════════════════════════════════════════════════════════════ */

/* This sheet defines NO tokens. --r-touch / --r-field / --r-media / --r-surface
   are declared in redesign.css, which owns the design system; a component sheet
   that minted its own would fork it. Shape is spent here, never minted. */

/* ── 1. Controls ───────────────────────────────────────────────────────────
   The primary / ghost / danger / icon buttons are the app's tap targets, and
   a pill is the friendliest shape a tap target can be: there is no corner to
   find at all. These four classes are never used as segment members inside a
   joined control, so a full pill is safe on every instance.

   THIS SECTION HAD NO EFFECT AT ALL until the `:is()` doubling below.
   styles.css carries one catch-all - `button:not(.send-btn):not([class*=
   "hero"]):not([class*="orb"]), .ghost-btn, .primary-btn, .danger-btn,
   .toggle-btn { border-radius: var(--r-md) !important }` - at specificity
   (0,3,1). These selectors were (0,1,0). Specificity is read before load
   order and `!important` does not change that, so being the last sheet on
   the page bought nothing: every control a student taps was a 20px
   rectangle, and the file written to shape them was dead.

   The fix is not to weaken that catch-all. Removing its `!important` was
   measured, and it hands those buttons not to this file but to the older,
   SHARPER rules underneath - 326 controls to 16px, 142 to 14px, 18 to 12px,
   and only 63 to the pill asked for here. It is the floor under the whole
   app's button shape.

   So this section reaches (0,3,0) the way feel.css reaches (0,5,0): by
   repeating its own `:is()` list, which costs nothing at runtime and states
   plainly that it is answering something specific. It also needs the bang,
   because the rule it answers has one. */
:is(.primary-btn, .ghost-btn, .danger-btn, .send-btn, .icon-btn,
    .upgrade-cta, .oauth-btn, .dash-tutor-send, .suggestion-chip,
    button.text-button):is(.primary-btn, .ghost-btn,
    .danger-btn, .send-btn, .icon-btn, .upgrade-cta, .oauth-btn,
    .dash-tutor-send, .suggestion-chip,
    button.text-button):is(.primary-btn, .ghost-btn, .danger-btn, .send-btn,
    .icon-btn, .upgrade-cta, .oauth-btn, .dash-tutor-send, .suggestion-chip,
    button.text-button) {
  border-radius: var(--r-touch) !important;
}

/* The tutor-mode choices are cards - an icon, a name and a line under it,
   two or three lines tall. Pilled like a one-line button, the curve ran
   through the icon and squeezed the caption ("diagrams and examples" read as
   clipped). A card takes the field radius. (0,3,1): the button catch-all in
   styles.css is (0,3,1) too, and this sheet loads after it. */
button.tutor-mode-btn.tutor-mode-btn.tutor-mode-btn {
  border-radius: var(--r-field) !important;
}

/* The row under a walkthrough: its link ("Open assignment") is an <a>, which
   no button rule reaches, so it came out square between two pills. */
.guided-workbar :is(a, button).gwb-link.gwb-link,
.guided-workbar button.gwb-next.gwb-next {
  border-radius: var(--r-touch) !important;
}

/* Icon-only controls are square boxes, so a pill radius renders them circular
   - which is what they should have been all along.

   FOUR repetitions, not three. This has to beat the catch-all at (0,3,1)
   AND the pill above at (0,3,3) - `button.text-button` in that list carries
   an element, which this one does not - or an icon button comes out a
   capsule. On a square box the two render identically, so nothing on screen
   said which had won; the shape would only have diverged the first time one
   of these was not square. */
:is(.icon-btn, .send-btn, .rail-toggle, .notif-bell-btn, .close-btn, .td-close):is(.icon-btn, .send-btn, .rail-toggle, .notif-bell-btn, .close-btn, .td-close):is(.icon-btn, .send-btn, .rail-toggle, .notif-bell-btn, .close-btn, .td-close):is(.icon-btn, .send-btn, .rail-toggle, .notif-bell-btn, .close-btn, .td-close) {
  border-radius: 50% !important;
}

/* Buttons that carry a block of text (a two-line menu row, a card action) look
   wrong as a pill - they get the surface radius instead. Three repetitions
   reaches (0,3,3) on `.account-popover button`, which ties the pill above
   and wins on being later in this file. */
:is(.account-popover button, .account-popover a, .nav-item, .settings-tab, .hub-next-action, .dash-primary-action):is(.account-popover button, .account-popover a, .nav-item, .settings-tab, .hub-next-action, .dash-primary-action):is(.account-popover button, .account-popover a, .nav-item, .settings-tab, .hub-next-action, .dash-primary-action) {
  border-radius: var(--r-lg) !important;
}

/* ── 2. Fields ─────────────────────────────────────────────────────────────
   Native inputs render with a hard corner in every browser unless told
   otherwise. :where() keeps specificity at zero so any component rule that
   wants a different field shape still wins. */
:where(input, select, textarea) { border-radius: var(--r-field); }
/* The Assignments search sits in a row of pill filters and is drawn as one;
   the type=text catch-all in styles.css, (0,2,1) !important, squared it
   back to 14px. */
.tasks-search input#tasks-search { border-radius: var(--r-touch) !important; }
:where(input[type="checkbox"], input[type="radio"]) { border-radius: 50%; }
:where(input[type="range"]) { border-radius: var(--r-touch); }
:where(input[type="range"])::-webkit-slider-runnable-track,
:where(input[type="range"])::-webkit-slider-thumb { border-radius: var(--r-touch); }

/* ── 3. Media and content ──────────────────────────────────────────────────
   Anything Aluma renders from a model reply or a teacher's upload: a photo of
   a worksheet, a diagram, a code sample, a results table. These arrive as raw
   HTML with no class of their own, so they are matched by element. */
.msg img, .msg video, .msg canvas, .msg svg:not([class]),
.artifact-panel-body img, .artifact-panel-body video,
.td-materials img, .composer-attachments img,
.attachments-preview img { border-radius: var(--r-media); }

.msg pre, .msg code, .msg table,
.artifact-panel-body pre, .artifact-panel-body code { border-radius: var(--r-media); }
.msg pre code { border-radius: 0; }        /* inner block, the <pre> is the shape */
.msg table { overflow: hidden; }           /* so the corners actually clip */
.msg blockquote { border-radius: var(--r-media); }

/* ── 4. Floating surfaces ──────────────────────────────────────────────────
   Menus, dropdowns and tooltips are drawn over content, so their outline is
   the most visible edge in the app. */
.model-dropdown,
.composer-model-menu,
.account-popover,
.notif-panel,
.artifact-panel,
.task-detail,
[role="tooltip"],
[class$="-popover"],
[class$="-dropdown"],
[class$="-menu"] { border-radius: var(--r-surface); }

/* ── 5. Scrollbars ─────────────────────────────────────────────────────────
   A square scrollbar thumb is a small sharp rectangle that tracks the reader
   down the whole page. Pill it everywhere, including the track. */
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track { border-radius: var(--r-touch) !important; }
* { scrollbar-width: thin; }

/* ── 6. Meters and bars ────────────────────────────────────────────────────
   Progress fills are usually two nested divs; both ends need the radius or the
   fill leaves a square edge inside a rounded shell. */
progress, progress::-webkit-progress-bar, progress::-webkit-progress-value,
[class*="progress"], [class*="progress"] > *,
[class*="meter"], [class*="meter"] > *,
[class*="-bar"] > [class*="-fill"] { border-radius: var(--r-touch); }

/* ── 7. Anything still square ──────────────────────────────────────────────
   A final sweep over the naming conventions this codebase actually uses. Kept
   at low specificity via :where() so it only reaches elements that never had
   a radius of their own - a component that states its shape still wins. */
:where([class*="card"], [class*="panel"], [class*="module"],
       [class*="tile"], [class*="callout"], [class*="banner"],
       [class*="modal"]:not(.modal-backdrop)) { border-radius: var(--r-surface); }

:where([class*="chip"], [class*="pill"], [class*="badge"],
       [class*="tag"], [class*="dot"], [class*="avatar"]) { border-radius: var(--r-touch); }

:where([class*="row"], [class*="item"], [class*="cell"],
       [class*="thumb"], [class*="swatch"]) { border-radius: var(--r-md); }

/* The one shape that must stay square: the full-viewport scrim behind a
   dialog, and the app shell columns that touch the window edge. */
.modal-backdrop,
.sidebar, .main, .view, .topbar,
body, html { border-radius: 0; }

/* Test Prep's build progress bar: a pill track and fill. */
.tp-build-progress .tpb-track,
.tp-build-progress .tpb-fill {
  border-radius: var(--r-touch);
}

/* ── 8. The aluma.fun shapes ───────────────────────────────────────────────
   pop.css turns a few surfaces into the site's panels and cards; these are
   their corners. Everything else took the site's ladder (tile 14, row 22,
   card 28, frame 32) through the tokens in redesign.css.

   Home's hero is a panel now rather than bare text on the canvas, so it is
   the one surface here that had no radius before. */
.view-school .dash-hero.dash-hero { border-radius: var(--r-xl) !important; }

/* Two cards carried a hand-written radius under the ladder: an Assignments
   card was pinned at 16px by a (0,2,0) !important in styles.css, and a Home
   to-do row at the field radius by dashboard.css. Both take the row step. */
.view-tasks .task-card.task-card,
.hub-assignment.dash-assignment-card.dash-assignment-card { border-radius: var(--r-md) !important; }

/* ── 9. The clean chat ─────────────────────────────────────────────────────
   chatclean.css draws the chat the way Claude.ai does and leaves its corners
   here. Your message is a small bubble at the field step (it was 20 / 20 /
   14 / 20 at (0,4,1) !important in styles.css, so three classes here). The
   composer is one rounded box at the row step rather than a 28px capsule.
   The model name is words, not a pill: the circle rule in section 1 reached
   it at (0,4,0) and drew an 80x26 ellipse, so five classes put its hover
   back on the pill. */
.view-chat .msg.user .msg-body.msg-body.msg-body { border-radius: var(--r-field) !important; }
.view-chat .composer-inner.composer-inner.composer-inner { border-radius: var(--r-md) !important; }
/* The assessment-lock note in the thread is a card, at the row step. */
.view-chat .assess-chat-note .message-content { border-radius: var(--r-md); }
.composer-model.composer-model.composer-model.composer-model.composer-model { border-radius: var(--r-touch) !important; }