/* Tora shape system (founder 2026-10-06: "let's just also use Apple's thing on the website").
   The site follows the corner convention the app adopted (tora-corner-levels, after Apple's
   capsule / concentric / fixed-shape rules). Loaded last on every page.

   Roles:
   - Card, 24px: a standalone content surface (tiles, step cards, question rows, the contact and
     tools cards, research art, pop-ups). The app's 24pt card fallback.
   - Nested card: concentric with its card, the card's radius minus the inset, never below 12px
     (the glass panels and chat cards inside the tiles).
   - Input, 12px: text fields, selects, text areas, file drops and the small number fields.
   - Capsule: buttons, chips, tags, segmented controls and tabs, the nav bar. Half the height.
   - Flat row, 0: rows inside a rounded container that never light up (the set rows) take the
     container's corners, not their own.
   - Highlight row (captain 2026-10-30: "highlighted selection doesn't actually have a full-on proper
     rounding ... fix it everywhere"): a row that lights up inside a rounded menu (an article's Share
     panel and chapter list) sits the menu's padding in from its edge and takes the
     menu's radius minus that padding, so the highlight's corners nest in the menu's.
   - Chamfered card (captain 2026-10-16, round 9: "I just want to use that shape a lot more instead of the
     rounded edges ... because it's part of the app"): the photos' cut corner (.chamfer, grid.css) as Tora's
     own card. The What sets Tora apart tiles, the Ask Nova cards, the How Tora works steps and floating cards, and every All
     features tile and panel take square corners with one corner cut at 45 degrees; small cards cut less (--cut). Which
     corner follows one rule, never chance (captain on PR #60: vary it like the photos, but on purpose):
     cards alternate top left and bottom right in reading order, so neighbours mirror each other
     diagonally, and the All features wall is a checkerboard of the two.
   Unchanged: circles (icons, swatches, dots, the Nova disc and rings, close and pause buttons),
   the iPhone drawings and the member card, the drawn iOS keyboard, chat bubbles, data marks.

   :not(#\#):not(#\#) only outranks the older !important radii in look26.css; it adds no IDs. */
:root{--r-card:24px;--r-chip:16px;--r-input:12px;--r-pill:999px;--cut:2.75rem}

/* card */
:is(.w3h-tile,.fl-tile-in,.fl-panel,.w3h-light,.how-step,.faq-item,.co-view,.cta-card,.tools,.c-card,.tool-out,.ap-role,.m-card,.m-art,.a-notice,.a-related,.a-pop,.a-menu,.a-chapter-list,.nvd-wrap,.nvb-phone,.privacy-dialog,.wl-modal:not(.is-done)):not(#\#):not(#\#){border-radius:var(--r-card)!important}
.wl-modal .tora-glass-layer:not(#\#),.wl-modal liquid-glass:not(#\#){border-radius:var(--r-card)!important}
.wl-modal .tora-glass-layer:not(#\#)::after{border-radius:calc(var(--r-card) - 1px)!important}

/* content sits at least one radius in from a curved edge (founder 2026-10-11, review F12), as in the
   app: the small floating chips and the PRO result cards are 16px cards with 16px of inset (12 and 12
   on phones), the 24px cards that held their text closer than 24px now inset it 24px, and the phone
   step card, which keeps its 12px inset, takes a 12px corner */
:is(.chip-glass,.pro-res,.a-tip):not(#\#):not(#\#):not(#\#){border-radius:var(--r-chip)!important}
.how .chip-glass:not(#\#):not(#\#):not(#\#){padding:1rem 1.25rem 1rem 1rem!important}
.how .chip-glass.has-pro:not(#\#):not(#\#):not(#\#){padding-right:4.75rem!important}
.how .chip-glass.chart:not(#\#):not(#\#):not(#\#){padding:1rem!important}
.pro-res:not(#\#):not(#\#):not(#\#){padding:1rem 1.125rem!important}
@media(min-width:821px){:is(.see-item,.how-step):not(#\#):not(#\#):not(#\#){padding:1.5rem!important}}
@media(max-width:820px){
  :is(.chip-glass,.pro-res):not(#\#):not(#\#):not(#\#){border-radius:var(--r-input)!important}
  .how .chip-glass:not(#\#):not(#\#):not(#\#),.how .chip-glass.chart:not(#\#):not(#\#):not(#\#),.pro-res:not(#\#):not(#\#):not(#\#){padding:.75rem!important}
  .how .chip-glass.has-pro:not(#\#):not(#\#):not(#\#){padding-right:3.5rem!important}
  .how-step:not(#\#):not(#\#):not(#\#){border-radius:var(--r-input)!important}
}

/* nested card: the glass panel sits about 5% in from its 24px tile, so the inner floor of 12px
   governs; the panels inside the glass sit 14px in, so they also take 12px */
:is(.w3h-glass,.w3h-card,.w3h-dia,.w3h-chip,.gl-entry,.gl-field,.a-related img):not(#\#):not(#\#){border-radius:var(--r-input)!important}
.w3h-glass .gl-top img:not(#\#){border-radius:8px!important}

/* input */
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,.c-drop,.al-chip):not(#\#):not(#\#){border-radius:var(--r-input)!important}

/* capsule */
:is(.header-inner,.btn-pill,.nav-join,.pro-cta,.wl-submit,.submit-btn,.wl-trigger,.co-apply-btn,.hero-badge,.pro-bill,.pro-knob,.ft-chips,.ft-knob,.sc-ticks,.sc-ticks button,.sc-knob,.sc-themes,.sc-tknob,.al-pills>span,.tog,.gl-field>em,.nb-foot>em,
  .seg,.tools-tab,.see-pro,.co-tag,.tag,.pro-src,.scan-conf,.tg-goal>i,.nv-sw>span,.a-crumb,.a-reading,.a-reading-knob,.a-tool,.a-chapter-btn,.a-more-all,.a-cite,.a-listen,.a-listen-rate):not(#\#):not(#\#){border-radius:var(--r-pill)!important}
.header-inner::before,.co-apply-btn::before,.sc-ticks button::before{border-radius:var(--r-pill)!important}

/* the feature list in All features: two-line row cards on wide screens, chips on phones */
.see-item:not(#\#):not(#\#){border-radius:var(--r-card)!important}
@media(max-width:820px){.see-item:not(#\#):not(#\#){border-radius:var(--r-pill)!important}}

/* the Everything in Tora chips become a 2 x 2 grid on phones: its frame is no longer a capsule (look26.css) */
@media(max-width:600px){.ft-chips:not(#\#):not(#\#):not(#\#){border-radius:0!important}}

/* chamfered card: square corners and one cut corner (the panels inside stay nested cards). The clip cuts
   each corner whose flag is 1: --tl, --tr, --br, --bl. Default top left; .is-cut-br (by position, below)
   takes the bottom right instead. */
:is(.w3h-tile,.w3h-light,.how-step,:where(.how) .chip-glass,.fl-tile-in,.fl-panel,.nvd-wrap,.nvb-phone):not(#\#):not(#\#):not(#\#){border-radius:0!important}
:is(.w3h-tile,.how-step,:where(.how) .chip-glass,.fl-tile-in,.fl-panel,.nvd-wrap,.nvb-phone){--tl:1;--tr:0;--br:0;--bl:0}
:is(.w3h-tile,.how-step,:where(.how) .chip-glass,.fl-tile-in,.fl-panel,.nvd-wrap,.nvb-phone):not(#\#):not(#\#):not(#\#){clip-path:polygon(
  calc(var(--cut) * var(--tl)) 0,calc(100% - var(--cut) * var(--tr)) 0,100% calc(var(--cut) * var(--tr)),
  100% calc(100% - var(--cut) * var(--br)),calc(100% - var(--cut) * var(--br)) 100%,
  calc(var(--cut) * var(--bl)) 100%,0 calc(100% - var(--cut) * var(--bl)),0 calc(var(--cut) * var(--tl)))}
/* the alternation, in reading order: What sets Tora apart reads tracker, Nova, program on a wide screen and
   left to right along the rail on a phone; Ask Nova reads the diagram, then the phone (the phone first on a
   phone); the steps, the deck panels and the wall's checkerboard */
:is(.w3h-b,.nvb-phone,.how-step:nth-child(even),:where(.how) .chip-glass:nth-child(even),.fl-panel:nth-child(even)){--tl:0;--br:1}
@media(max-width:820px){.nova .nvb-phone{--tl:1;--br:0}.nova .nvd-wrap{--tl:0;--br:1}}
@media(min-width:1024px){:is(.fl-col:nth-child(odd) .fl-tile:nth-child(even),.fl-col:nth-child(even) .fl-tile:nth-child(odd)) .fl-tile-in{--tl:0;--br:1}}
@media(max-width:820px){.w3h-c:not(.w3h-d){--tl:0;--br:1}}
/* on a tablet or phone the wall is a five-column grid in feature order (features-light.css), so the tile's
   order alone makes the checkerboard */
@media(max-width:1023px){.fl-tile-in{--tl:calc(1 - mod(var(--k),2));--br:mod(var(--k),2)}}
:is(.how-step,.fl-panel){--cut:1.75rem}
/* Floating cards share the step shape, with a cut that fits their smaller text inset. */
:where(.how) .chip-glass{--cut:1rem}
@media(max-width:820px){:where(.how) .chip-glass{--cut:.75rem}}
.fl-tile-in{--cut:2.25rem}
@media(max-width:820px){:is(.w3h-tile,.nvd-wrap,.nvb-phone){--cut:2rem}.how-step{--cut:1.25rem}}
@media(max-width:1023px){.fl-tile-in{--cut:1rem}.fl-panel{--cut:1rem}}

/* a research article's hero runs edge to edge under the nav (article.css, captain 2026-10-30): square */
.a-art:not(#\#):not(#\#){border-radius:0!important}

/* flat rows inside a rounded container */
.al-row:not(#\#):not(#\#){border-radius:0!important}
/* highlight rows: the menu's padding is the inset, its radius minus that is the row's */
:root{--menu-inset:.5rem;--r-row:calc(var(--r-card) - var(--menu-inset))}
:is(.a-menu,.a-chapter-list):not(#\#):not(#\#){padding:var(--menu-inset)!important}
:is(.a-menu-row,.a-chapter-list a,.a-next a):not(#\#):not(#\#){border-radius:var(--r-row)!important}
/* a sheet from the bottom: a card's top corners, square where it meets the screen's edge */
.a-drawer-in:not(#\#):not(#\#){border-radius:var(--r-card) var(--r-card) 0 0!important}
.a-chapter-list:not(#\#):not(#\#)::before{border-radius:var(--r-row)!important}

/* layers drawn over a shaped box follow its corners */
:is(.w3h-card,.w3h-dia,.w3h-glass,.gl-field,.gl-entry,.wl-modal,.a-art,.w3h-light,.w3h-tile,.tools,.c-card,.cta-card,.chip-glass,.how-step,.nvd-wrap):not(#\#):not(#\#)::after,
:is(.gl-field,.tools,.c-card,.a-art):not(#\#):not(#\#)::before{border-radius:inherit!important}

/* iOS draws these rounded rectangles and capsules with continuous corners: the curve eases into the
   straight edge instead of a circular arc meeting it. CSS has no cross-browser way to say that
   (corner-shape is browser-dependent and is not Apple's curve), so assets/corners.js clips every rounded
   rectangle and capsule on the page to Apple's exact path at these same radii, in every browser.
   Circles stay circles. */
/* where the frosted glass is the box's own ::before or ::after (the nav), corners.js puts the curve on that layer */
[data-apple-clip~=before]::before{clip-path:var(--apple-clip-before,none)}
[data-apple-clip~=after]::after{clip-path:var(--apple-clip-after,none)}

/* Nova's light follows the drawn phone hardware; it is not a content container. */
.nv-glow,.ng-halo,.ng-edge,.ng-rim,.ng-fill{border-radius:18.8% 18.8% 0 0 / 12.07% 12.07% 0 0}