/* Text keys, 5.11.2026 («בכל מקום שיש כפתורים כאלה פשוטים תעשה יותר עם נוכחות אבל גם אסתטי ונקי», ג׳ «שורה»); the same as the bot's actions.css.
   Loaded last, over each room's own rules. One class (.linkbtn) is split by what the word is doing where it stands:
     action  – the default: a white paper pill you can see is a button
     quiet   – beside a real key, or the same tool on every row (ביטול, הסרה, הגדרות): an outline, never competes
     danger  – removing something: the err colour, the same shape as quiet
     inline  – inside a sentence or on a dark band: stays an underlined word */

:root {
  --act-bg: var(--sheet);
  --act-bg-hover: #fff;
  --act-edge: 0 0 0 1px rgba(27, 26, 23, 0.075);
  --act-lift: 0 1px 1px rgba(27, 26, 23, 0.04), 0 6px 14px -6px rgba(27, 26, 23, 0.2);
  --act-lift-hover: 0 2px 3px rgba(27, 26, 23, 0.06), 0 10px 20px -8px rgba(27, 26, 23, 0.28);
  --act-quiet-edge: rgba(27, 26, 23, 0.2);
  --act-quiet-hover: rgba(27, 26, 23, 0.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --act-bg: rgba(246, 243, 236, 0.1);
    --act-bg-hover: rgba(246, 243, 236, 0.16);
    --act-edge: inset 0 0 0 0.5px rgba(246, 243, 236, 0.2);
    --act-lift: 0 6px 14px -8px rgba(0, 0, 0, 0.6);
    --act-lift-hover: 0 10px 20px -8px rgba(0, 0, 0, 0.7);
    --act-quiet-edge: rgba(246, 243, 236, 0.26);
    --act-quiet-hover: rgba(246, 243, 236, 0.07);
  }
}

/* ── action ── */
.linkbtn {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 18px;
  color: var(--ink);
  background: var(--act-bg);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--act-edge), var(--act-lift);
  font: 16px/1.25 var(--f-ui);
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}
@media (hover: hover) {
  html:root .linkbtn:hover {
    background: var(--act-bg-hover);
    box-shadow: var(--act-edge), var(--act-lift-hover);
    text-decoration: none;
    transform: translateY(-1px);
  }
}
html:root .linkbtn:active { transform: scale(0.97); box-shadow: var(--act-edge); opacity: 1; transition-duration: 0.08s; }
html:root .linkbtn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
html:root .linkbtn:disabled { color: var(--ink-soft); background: none; box-shadow: inset 0 0 0 1px var(--act-quiet-edge); transform: none; cursor: not-allowed; }
/* the one that is open: yellow, as before */
html:root .linkbtn[aria-expanded="true"] { color: var(--ink); background: var(--yellow); }

/* ── quiet: beside a real key, on every row, or the way back ── */
html:root :is(.btn ~ .linkbtn, .linkbtn:has(~ .btn), .gate__other, .pay__back, .callchips__seen, .carrier-more, .item__acts > .linkbtn, .weekrow .linkbtn, #push-more .linkbtn, #sub-billing .linkbtn, #sub-cancel .linkbtn, .askchange__btns .linkbtn, .helpline .linkbtn, .apps-rule .linkbtn, #agent-foot .linkbtn, #ag-hook-more .linkbtn, #ag-leads-live .linkbtn, .voicebar__acts .linkbtn) {
  color: var(--ink-2);
  background: none;
  box-shadow: inset 0 0 0 1px var(--act-quiet-edge);
  font-size: 15px;
}
@media (hover: hover) {
  html:root :is(.btn ~ .linkbtn, .linkbtn:has(~ .btn), .gate__other, .pay__back, .callchips__seen, .carrier-more, .item__acts > .linkbtn, .weekrow .linkbtn, #push-more .linkbtn, #sub-billing .linkbtn, #sub-cancel .linkbtn, .askchange__btns .linkbtn, .helpline .linkbtn, .apps-rule .linkbtn, #agent-foot .linkbtn, #ag-hook-more .linkbtn, #ag-leads-live .linkbtn, .voicebar__acts .linkbtn):hover {
    background: var(--act-quiet-hover);
    box-shadow: inset 0 0 0 1px var(--act-quiet-edge);
    transform: none;
  }
}

/* ── small: a line's own tools, where a full key would outweigh the line ── */
html:root :is(.weekrow, .item__acts, .apps-rule, .voicebar__acts, .callchips__seen, .carrier-more) :is(.linkbtn),
html:root :is(.callchips__seen, .carrier-more) { min-height: 36px; padding: 4px 14px; }
html:root :is(.weekrow, .item__acts, .apps-rule, .voicebar__acts) .linkbtn::after,
html:root :is(.callchips__seen, .carrier-more)::after { content: ""; position: absolute; inset: -4px 0; }

/* ── danger: one notch over quiet, or a word that deletes beside a real key reads as «ביטול» ── */
html:root:root :is(#contacts-clear, #delete-ask, #ag-hook-del, [data-apps-remove].linkbtn, .linkbtn[data-remove], .item__acts > .linkbtn, .linkbtn.is-danger) {
  color: var(--err);
  background: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--err) 34%, transparent);
}
@media (hover: hover) {
  html:root:root :is(#contacts-clear, #delete-ask, #ag-hook-del, [data-apps-remove].linkbtn, .linkbtn[data-remove], .item__acts > .linkbtn, .linkbtn.is-danger):hover {
    background: color-mix(in srgb, var(--err) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--err) 50%, transparent);
    transform: none;
  }
}

/* ── inline: inside a sentence, or on a band that has its own colour ── */
html:root :is(.plancard__state, .demobar, .gate__app, #push-help, .loadfail, .tour__acts) .linkbtn {
  display: inline;
  min-height: 0;
  padding: 0;
  color: inherit;
  background: none;
  border-radius: 0;
  box-shadow: none;
  font-size: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
  transform: none;
}
html:root :is(.tour__acts, .demobar, .loadfail) .linkbtn { display: inline-flex; min-height: 44px; }
html:root .plancard__state .linkbtn { color: var(--ink); }

/* ── the underlined ones outside .linkbtn: «לכל השיחות», «ועוד 2 מחכים», what opens more.
   #_ only lifts the weight over a room's own #id rule. A key that opens has a chevron that turns. ── */
html:root :is(.cb-quiet, .slip__all, .agree__read, #login-mail > summary, .codes > summary, .sumprev > summary, .memadd > summary, #_):not([hidden]) {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  margin-inline: 0;
  padding: 6px 16px;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--act-quiet-edge);
  font: 16px/1.25 var(--f-ui);
  text-decoration: none;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.16s ease;
}
html:root :is(#login-mail, .codes, .sumprev, .memadd, #_) > summary::-webkit-details-marker { display: none; }
html:root :is(#login-mail, .codes, .sumprev, .memadd, #_) > summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-block-start: -3px;
  border: 0;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}
html:root :is(#login-mail, .codes, .sumprev, .memadd, #_)[open] > summary::after { margin-block-start: 3px; transform: rotate(-135deg); }
@media (hover: hover) {
  html:root :is(.cb-quiet, .slip__all, .agree__read, #login-mail > summary, .codes > summary, .sumprev > summary, .memadd > summary, #_):hover { background: var(--act-quiet-hover); text-decoration: none; }
}
html:root :is(.cb-quiet, .slip__all, .agree__read, #login-mail > summary, .codes > summary, .sumprev > summary, .memadd > summary, #_):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* smaller, under a door's own key */
html:root :is(.fi-more, .fi-in, #_) {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 2px 14px;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--act-quiet-edge);
  font: 14.5px/1.25 var(--f-ui);
  text-decoration: none;
}

/* the row of a sign-in's other ways keeps its centre and its distance */
html:root .gate__other { display: flex; width: fit-content; margin: 12px auto 0; }

@media (prefers-reduced-motion: reduce) {
  .linkbtn { transition: none; }
  html:root .linkbtn:hover, html:root .linkbtn:active { transform: none; }
}

/* ── tiles, 5.11.2026 («זה מידי מלל דחוס», «דברים כאלה אמורים להיות מתוחמים»); the language of the bot's «תיק»
   (app-rooms.css .cc-fact): each thing in its own tile, a small grey word over its value. Short ones pair up, a long one
   takes the row (app.js factGrid). What has passed and matters less: the same shape, outlined. ── */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 10px; margin: 0; }
.fact--wide { grid-column: 1 / -1; }
.fact { display: grid; align-content: start; gap: 2px; min-width: 0; margin: 0; padding: 14px 16px; background: var(--ivory); border-radius: 18px; }
.fact--past { background: none; box-shadow: inset 0 0 0 1px var(--line-strong); }
.fact__k { color: var(--ink-soft); font: 14.5px/1.3 var(--f-ui); }
.fact__v { margin: 0; color: var(--ink); font: 16px/1.4 var(--f-ui); overflow-wrap: anywhere; }
.fact__v[dir="ltr"] { justify-self: start; }
.fact--big .fact__v { font: 22px/1.3 var(--f-display); font-variant-numeric: tabular-nums lining-nums; }
.fact__act { justify-self: start; margin-top: 10px; }
#sub-receipts { display: grid; gap: 10px; margin-top: 10px; }
#details-now:empty { display: none; }
:is(.slip, .plancard, .calltalk, .item__body) .facts, .plancard > .fact, .editor > #act-block > .fact { margin-top: 12px; }
#act-block > .fact + .editor__acts { margin-top: 14px; }
.monthfacts { margin-top: 18px; }
.apptstate:not([hidden]) { margin-top: 2px; }
.slip__meta { margin-top: 4px; }
.row--appt .row__value { white-space: normal; }
#conn { white-space: pre-line; }

/* the same tile on what was already a line of its own */
html:root .connrow, html:root .learned li, html:root :is(#agent-state, #tasks-state):has(.state__sub:not(:empty)), html.lg #lead-reminder, html:root .callwhy { padding: 14px 16px; background: var(--ivory); border-radius: 18px; }
html:root .connrow { overflow-wrap: anywhere; }
html:root .learned li { position: relative; display: block; padding-inline-end: 44px; }
html:root .learned .xbtn { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; }
html:root .callwhy { margin-top: 0; gap: 2px; }
html:root .callwhy .calltalk__label { margin: 0; color: var(--ink-soft); font: 14.5px/1.3 var(--f-ui); }
html:root .callwhy .callrow__what { padding: 0; color: var(--ink); background: none; border: 0; font: 16px/1.4 var(--f-ui); }
html:root .callwhy > .linkbtn { margin-top: 8px; }
html:root .callwhy > .linkbtn + .linkbtn { margin-top: 2px; }
/* the line that was over «חזרתי» belonged to the quiet rows, and this one is not */
html:root :is(.callscreen, .callpane) .callscreen__handled > button { border-top: 0; }

/* what a list means, a chip to each: joined by «·» it broke mid-sentence under the road's picture */
html:root .cpath__note { display: flex; flex-wrap: wrap; gap: 6px; }
html:root .cpath__note > span { padding: 3px 10px; color: var(--ink-2); background: var(--ivory); border-radius: 12px; font: 15px/1.35 var(--f-ui); }

/* numbers and people: a tile each, no stripes between them; a person's keys under the name, so a phone number stays whole */
.numlist { display: grid; gap: 10px; }
.numlist .numrow { gap: 10px 12px; padding: 10px 16px; background: var(--ivory); border: 0; border-radius: 18px; }
.numrow__num { white-space: nowrap; }
#contacts-list .numrow { flex-wrap: wrap; }
#contacts-list .numrow__who { flex: 1 1 100%; }
#contacts-list .numrow__acts { flex: 1 1 100%; justify-content: flex-start; }

/* a list's row: the name and the time on one line, the tags on their own, the words under them. Three in one line cut
   the number short («0-000-0202...»), and with a date they broke somewhere different on every row */
html:root:root :is(#calls-list, .rowlist) .callrow__top { flex-wrap: wrap; gap: 6px 8px; }
html:root:root :is(#calls-list, .rowlist) .callrow__who { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html:root:root :is(#calls-list, .rowlist) .callrow__when { order: 0; flex: none; margin-inline-start: 0; }
html:root:root :is(#calls-list, .rowlist) .callrow__top > :is(.badge, .tstate) { order: 2; }
html:root:root :is(#calls-list, .rowlist) .callrow__top:has(> :is(.badge, .tstate))::after { content: ""; order: 1; flex-basis: 100%; height: 0; }

/* «הקלטת השיחות»: the note takes the whole width, or three sentences stand in a column a third of the row wide */
#record-row .toggle__text { display: contents; }
#record-row small { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; font: 14.5px/1.5 var(--f-body); color: var(--ink-soft); }
#record-row > input { grid-row: 1; grid-column: 3; }