/* Circle screens (design sprint v19 and v20, 29 September 2026). Tokens only: no length, colour, weight or tracking is typed here, and every
   corner is square. The page's own sidebar rows and headings (.hgroup, .hempty) are reused, so the Circles tab reads like its neighbours.
   Rows are children of a flex column, so they stretch to the column's width without being told to. */

/* ---- the list under the sidebar's Circles tab ---- */
.cir-root{display:flex;flex-direction:column;gap:var(--sp1);padding:var(--sp1) var(--sp2) var(--sp3)}
.cir-root svg,.cir-sheet svg{flex:none;width:var(--icon);height:var(--icon);fill:none;stroke:currentColor;stroke-linecap:square}
.cir-gold{display:flex;align-items:center;justify-content:center;gap:var(--sp1);min-height:var(--sp-tap);padding:0 var(--sp2);border:0;border-radius:0;
  background:var(--gold-organic);color:var(--gold-ink);font:var(--w-semi) var(--fs-md)/var(--lh-tight) var(--ff-product);box-shadow:var(--glow-tile-gold);cursor:pointer}
.cir-gold:hover{filter:brightness(1.06)}
.cir-gold:disabled{opacity:.5;box-shadow:none;cursor:default}
.cir-row,.cir-line{display:grid;grid-template-columns:var(--tile-s) minmax(0,1fr) auto;align-items:center;gap:var(--sp2);min-height:var(--sp-tap);
  padding:var(--sp1) 0;border:0;border-bottom:var(--bw-hair) solid var(--line);border-radius:0;background:none;color:var(--ink);font:inherit;text-align:start}
button.cir-row,button.cir-line{cursor:pointer}
.cir-row:hover,button.cir-line:hover{background:color-mix(in srgb,var(--cyan) 6%,transparent)}
.cir-mid{display:flex;flex-direction:column;gap:var(--sp-half);min-width:0}
.cir-name{font:var(--w-semi) var(--fs-md)/var(--lh-tight) var(--ff-product);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cir-sub{font-size:var(--fs-xs);line-height:var(--lh-snug);color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cir-sub.live{color:var(--good-tx)}
.cir-time{font:var(--fs-2xs) var(--ff-mono);color:var(--faint)}
.cir-join{display:flex;align-items:center;justify-content:center;gap:var(--sp1);min-height:var(--sp-tap);padding:0 var(--sp2);border:0;border-radius:0;background:var(--good-tx);color:var(--chrome-ink);font:var(--w-semi) var(--fs-sm)/var(--lh-tight) var(--ff-product);cursor:pointer}
.cir-join:disabled{opacity:.5;cursor:default}
.cir-quiet{display:flex;align-items:center;justify-content:center;gap:var(--sp1);min-height:var(--sp-tap);padding:0 var(--sp2);border:var(--bw-hair) solid var(--line2);border-radius:0;background:none;color:var(--ink);font:var(--w-medium) var(--fs-sm)/var(--lh-tight) var(--ff-product);cursor:pointer}
.cir-line>svg{color:var(--faint)}

/* ---- pictures: a square on the 44, 72, 116 ladder, a mosaic of the members, never a circle ---- */
.cir-tile{display:grid;flex:none;overflow:hidden;border-radius:0;background:var(--chip)}
.cir-s{width:var(--tile-s);height:var(--tile-s)}
.cir-m{width:var(--tile-m);height:var(--tile-m)}
.cir-l{width:var(--tile-l);height:var(--tile-l)}
.cir-tile[data-n="2"]{grid-template-columns:1fr 1fr}
.cir-tile[data-n="3"],.cir-tile[data-n="4"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.cir-cell{display:flex;align-items:center;justify-content:center;min-width:0;font:var(--w-bold) var(--fs-xs)/var(--lh-tight) var(--ff-product);color:var(--ink)}
.cir-s .cir-cell{font-size:var(--fs-2xs)}
.cir-l .cir-cell{font-size:var(--fs-lg)}
.cir-tile[data-n="1"].cir-s .cir-cell{font-size:var(--fs-md)}
.cir-tile[data-n="1"].cir-m .cir-cell{font-size:var(--fs-xl)}
.cir-tile[data-n="1"].cir-l .cir-cell{font-size:var(--fs-2xl)}
.cir-t0{background:color-mix(in srgb,var(--cyan) 22%,var(--chip))}
.cir-t1{background:color-mix(in srgb,var(--gold-organic) 28%,var(--chip))}
.cir-t2{background:color-mix(in srgb,var(--good) 26%,var(--chip))}
.cir-t3{background:color-mix(in srgb,var(--bad) 20%,var(--chip))}
.cir-t4{background:color-mix(in srgb,var(--cyan-soft) 20%,var(--chip))}
.cir-t5{background:color-mix(in srgb,var(--gold2) 20%,var(--chip))}

/* ---- a sheet: the Circle page, an invitation, the setup, Elara's settings. On a phone it fills the screen; on a wide screen it is the right-hand panel ---- */
.cir-sheet{position:fixed;inset:0;inset-inline-start:auto;z-index:var(--z-project);display:flex;flex-direction:column;width:var(--dock-w);max-width:100vw;
  background:var(--navy);color:var(--ink);border-inline-start:var(--bw-hair) solid var(--line2);overflow:hidden}
@media (max-width:896px){.cir-sheet{inset-inline-start:0;width:auto;max-width:none;border:0}}
.cir-sheet.cir-docked{position:relative;inset:auto;z-index:auto;flex:0 0 var(--dock-w);height:auto;min-height:0}
.cir-top{display:flex;align-items:center;gap:var(--sp1);min-height:var(--sp-tap);padding:var(--sp1) var(--sp2);border-bottom:var(--bw-hair) solid var(--line);position:relative}
.cir-top h2{flex:1;min-width:0;margin:0;font:var(--w-bold) var(--fs-lg)/var(--lh-tight) var(--ff-product);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cir-top small{display:block;font:var(--w-regular) var(--fs-xs)/var(--lh-snug) var(--ff-mono);color:var(--mut)}
.cir-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--sp-tap);height:var(--sp-tap);border:0;border-radius:0;background:none;color:var(--ink);cursor:pointer}
.cir-body{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--sp2);padding:var(--sp2) var(--sp2) calc(var(--sp3) + env(safe-area-inset-bottom))}
.cir-foot{display:flex;gap:var(--sp1);padding:var(--sp1half) var(--sp2) calc(var(--sp1half) + env(safe-area-inset-bottom));border-top:var(--bw-hair) solid var(--line)}
.cir-foot>*{flex:1}
.cir-centre{display:flex;flex-direction:column;align-items:center;gap:var(--sp1);text-align:center}
.cir-title{margin:0;font:var(--w-bold) var(--fs-xl)/var(--lh-tight) var(--ff-product);overflow-wrap:anywhere}
.cir-note{margin:0;font:var(--w-regular) var(--fs-sm)/var(--lh-snug) var(--ff-product);color:var(--mut);overflow-wrap:anywhere}
.cir-meta{margin:0;font:var(--w-regular) var(--fs-xs)/var(--lh-snug) var(--ff-mono);color:var(--mut);text-align:center;overflow-wrap:anywhere}
.cir-sec{margin:0;padding:0 0 var(--sp-half);font:var(--w-bold) var(--fs-2xs)/var(--lh-snug) var(--ff-mono);letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--label)}

/* ---- Elara's strip and the four tiles ---- */
.cir-strip{display:flex;align-items:center;gap:var(--sp1);min-height:var(--sp-tap);padding:var(--sp-half) var(--sp1half);border:var(--bw-hair) solid var(--line2);border-radius:0;background:var(--panel)}
.cir-strip b{font:var(--w-semi) var(--fs-sm)/var(--lh-tight) var(--ff-product);color:var(--cyan)}
.cir-say{flex:1;min-width:0;font-size:var(--fs-xs);color:var(--mut)}
.cir-strip button{min-height:var(--sp-tap);padding:0 var(--sp1);border:0;border-radius:0;background:none;color:var(--cyan);font:var(--w-semi) var(--fs-sm)/var(--lh-tight) var(--ff-product);cursor:pointer}
.cir-mark{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--icon);height:var(--icon);border:var(--bw-rule) solid var(--gold);border-radius:0;color:var(--gold);font:var(--w-bold) var(--fs-2xs)/var(--lh-tight) var(--ff-mono)}
.cir-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp1)}
.cir-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-half);min-height:var(--tile-m);min-width:0;padding:var(--sp1);border:0;border-radius:0;background:var(--panel);color:var(--ink);
  font:var(--w-medium) var(--fs-xs)/var(--lh-tight) var(--ff-product);box-shadow:var(--glow-tile);cursor:pointer}

/* ---- choice rows (Elara's three modes, who brings her in): a labelled radio group ---- */
.cir-choice,.cir-pick{display:grid;grid-template-columns:var(--tile-s) minmax(0,1fr) var(--icon);align-items:center;gap:var(--sp2);min-height:var(--sp-tap);padding:var(--sp1) 0;
  border:0;border-bottom:var(--bw-hair) solid var(--line);border-radius:0;background:none;color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.cir-choice[disabled]{opacity:.5;cursor:default}
.cir-box{display:inline-flex;align-items:center;justify-content:center;width:var(--icon);height:var(--icon);border:var(--bw-rule) solid var(--line2);border-radius:0}
.cir-choice[aria-checked="true"] .cir-box,.cir-pick[aria-checked="true"] .cir-box{border-color:var(--cyan);background:var(--cyan)}
.cir-choice[aria-checked="true"] .cir-box::after,.cir-pick[aria-checked="true"] .cir-box::after{content:"";width:var(--sp1);height:var(--sp1);background:var(--navy)}
.cir-field{display:flex;flex-direction:column;gap:var(--sp-half)}
.cir-field label{font:var(--w-medium) var(--fs-xs)/var(--lh-snug) var(--ff-product);color:var(--mut)}
.cir-field input,.cir-search{min-height:var(--sp-tap);padding:0 var(--sp1half);border:var(--bw-hair) solid var(--line2);border-radius:0;background:var(--panel);color:var(--ink);font:var(--w-regular) var(--fs-md)/var(--lh-tight) var(--ff-product)}
.cir-field input:focus-visible,.cir-search:focus-visible,.cir-sheet button:focus-visible{outline:var(--bw-rule) solid var(--cyan);outline-offset:var(--bw-rule)}
.cir-err{margin:0;padding:var(--sp1) var(--sp1half);border:var(--bw-hair) solid var(--bad);border-radius:0;color:var(--bad-tx);font:var(--w-medium) var(--fs-sm)/var(--lh-snug) var(--ff-product);overflow-wrap:anywhere}
.cir-menu{position:absolute;inset-inline-end:var(--sp1);top:var(--sp-tap);z-index:var(--z-header);display:flex;flex-direction:column;min-width:calc(var(--tile-l) + var(--sp5));border:var(--bw-hair) solid var(--line2);border-radius:0;background:var(--panel)}
.cir-menu button{min-height:var(--sp-tap);padding:0 var(--sp2);border:0;border-radius:0;background:none;color:var(--ink);font:var(--w-medium) var(--fs-sm)/var(--lh-tight) var(--ff-product);text-align:start;cursor:pointer}
.cir-menu button:hover{background:color-mix(in srgb,var(--cyan) 8%,transparent)}

/* ---- Elara's strip in the chat thread: under the room's own strip, above the conversation (elara_circle_thread.js) ---- */
.cir-thread{display:flex;flex-direction:column;gap:var(--sp1);padding:var(--sp1) var(--sp2)}
.cir-thread-head{display:flex;align-items:center;gap:var(--sp1)}
.cir-thread-head>:first-child{flex:1;min-width:0}
.cir-thread-calls{display:flex;gap:var(--sp-half)}
.cir-thread-call{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sp-tap);min-height:var(--sp-tap);border-radius:0}
/* v19 Circles in day and night: the thread strip sits under the room header, which points --ink at the light chrome ink in both themes;
   in day that drew initials at 1.16:1 and the strip's cyan words at 1.81:1 (tests/test_circle_thread_night_browser.py) */
body.light .cir-thread{--ink:var(--paper-ink);--chip:var(--panel2);color:var(--paper-ink)}   /* --chip too: the header points it at its dark chrome */
body.light .cir-thread .cir-strip b,body.light .cir-thread .cir-strip button,body.light .cir-thread .cir-thread-call{color:var(--paper-cyan)}

/* ---- the server's cartoon in a tile, your picture, the maker and the camera (elara_picture.js, elara_picture_selfie.js) ---- */
.cir-cell>svg{flex:1;align-self:stretch;min-width:0;min-height:0}
.cir-cell>img.cir-photo{display:block;flex:1;align-self:stretch;min-width:0;min-height:0;object-fit:cover}
/* v19 picture 19: the square a photo is cut to, three tap controls under it */
.cir-crop{display:block;inline-size:min(calc(var(--tile-s) * 8), calc(100vw - var(--sp2) * 4));aspect-ratio:1/1;margin:0 auto var(--sp2);background:var(--panel2);touch-action:none;cursor:grab}
.cir-croptools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp1)}
.cir-croptools button{display:flex;align-items:center;justify-content:center;gap:var(--sp1);min-height:var(--sp-tap)}
.cir-tabs{display:flex;flex-wrap:wrap;gap:var(--sp1)}
.cir-tab{min-height:var(--sp-tap);padding:0 var(--sp2);border:0;border-bottom:var(--bw-rule) solid transparent;border-radius:0;background:var(--panel);color:var(--ink);font:var(--w-semi) var(--fs-sm)/var(--lh-tight) var(--ff-product);cursor:pointer}
.cir-tab[aria-selected="true"]{border-bottom-color:var(--cyan)}
.cir-panel{display:flex;flex-direction:column;gap:var(--sp1)}
.cir-flab{margin:0;padding:var(--sp1) 0 0;font:var(--w-semi) var(--fs-xs)/var(--lh-snug) var(--ff-product);color:var(--mut)}
.cir-opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp1)}
.cir-opt{display:flex;flex-direction:column;align-items:center;gap:var(--sp-half);min-height:var(--sp-tap);padding:var(--sp-half);border:0;border-radius:0;background:none;color:var(--ink);font:var(--w-medium) var(--fs-2xs)/var(--lh-tight) var(--ff-product);cursor:pointer}
.cir-swatch{min-height:var(--sp-tap);border:var(--bw-hair) solid var(--line2);border-radius:0;cursor:pointer}
.cir-opt[aria-checked="true"],.cir-swatch[aria-checked="true"]{outline:var(--bw-rule) solid var(--cyan);outline-offset:var(--bw-rule)}
.cir-ladder{display:flex;align-items:flex-end;gap:var(--sp2)}
.cir-rung{display:flex;flex-direction:column;align-items:center;gap:var(--sp1)}
.cir-extra{display:block;color:var(--mut);font:var(--w-regular) var(--fs-xs)/var(--lh-tight) var(--ff-product)}
.cir-camera{position:relative;display:flex;aspect-ratio:1;background:var(--navy);overflow:hidden}
.cir-camera video{flex:1;min-width:0;object-fit:cover}
.cir-guide{position:absolute;inset:var(--sp5);border:var(--bw-rule) solid var(--cyan);border-radius:0;pointer-events:none}
.cir-chip{display:inline-block;width:var(--icon);height:var(--icon);border:var(--bw-hair) solid var(--line2);border-radius:0}
.cir-tabchips{display:flex;gap:var(--sp1);padding:var(--sp1) 0}
.cir-tabchip{min-height:var(--sp-tap);padding:0 var(--sp2);border:var(--bw-hair) solid var(--line2);border-radius:0;background:var(--panel);color:var(--ink);font:var(--w-semi) var(--fs-sm)/var(--lh-tight) var(--ff-product);cursor:pointer}
.cir-tabchip[aria-pressed=true]{border-color:var(--cyan);color:var(--ink);background:var(--panel2)}
.cir-mini{display:inline-flex;align-items:center;justify-content:center;min-height:var(--sp-tap);padding:0 var(--sp2);border:var(--bw-hair) solid var(--line2);border-radius:0;background:var(--panel);color:var(--ink);font:var(--w-semi) var(--fs-sm)/var(--lh-tight) var(--ff-product);cursor:pointer}
.cir-mini-go{background:var(--good-tx);border-color:var(--good-tx);color:var(--chrome-ink)}
.cir-mini-row{display:inline-flex;gap:var(--sp-half)}
.cir-switch{flex:none;width:var(--tile-s);min-height:var(--sp-tap);border:var(--bw-hair) solid var(--mut);border-radius:0;background:var(--panel);cursor:pointer}   /* off is an outline you can see; on is filled */
.cir-switch[aria-checked=true]{background:var(--good-tx);border-color:var(--good-tx)}
.cir-switch:disabled{opacity:.5;cursor:default}
.cir-join-copy{margin:var(--sp1) 0 0 var(--sp2)}
.cir-notin{display:flex;flex-direction:column;gap:var(--sp-half)}
.cir-catchup{display:flex;flex-direction:column;gap:var(--sp1);padding:var(--sp1) var(--sp2);border-left:var(--bw-rule) solid var(--gold2);background:var(--panel)}
.cir-catchup-head{margin:0;color:var(--mut);font:var(--w-semi) var(--fs-2xs)/var(--lh-tight) var(--ff-product);letter-spacing:var(--tr-wide)}
.cir-catchup-body{margin:0;color:var(--ink);font:var(--w-regular) var(--fs-sm)/var(--lh-body) var(--ff-product)}