/* The panel: shared by every product.
 *
 * The shell (rail, header, cards, tables, forms, empty states) lives here and
 * `assets/panel/<product>.js` only writes markup against these classes. That is
 * what keeps a new product's dashboard to one file instead of one stylesheet.
 *
 * Extracted from panel.html the day the second product needed it. */
/* The panel is a working tool, not a brochure. It borrows the site's tokens so
   it feels like the same company, but nothing here animates or persuades. */
.pn{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0;min-height:70vh;
  max-width:1180px;margin:0 auto;padding:0 24px}
.pn-side{border-inline-end:1px solid var(--line);padding:32px 22px 32px 0}
.pn-main{padding:32px 0 80px;padding-inline-start:34px;min-width:0}
.pn-biz{font-weight:800;font-size:17px;margin-bottom:2px}
.pn-plan{font-size:12.5px;color:var(--muted);margin-bottom:22px}
.pn-nav{display:flex;flex-direction:column;gap:2px}
.pn-nav button{text-align:start;background:none;border:0;font:inherit;font-size:15px;
  padding:9px 12px;border-radius:9px;color:var(--ink-2);cursor:pointer;display:flex;
  justify-content:space-between;align-items:center;gap:8px}
.pn-nav button:hover{background:var(--paper-2);color:var(--ink)}
.pn-nav button[aria-current=page]{background:var(--ink);color:var(--paper);font-weight:700}
.pn-badge{font-size:11px;font-weight:800;padding:1px 7px;border-radius:999px;
  background:var(--lime);color:var(--on-lime)}
.pn-nav button[aria-current=page] .pn-badge{background:var(--lime);color:var(--on-lime)}
.pn-out{margin-top:26px;font-size:13px;color:var(--muted);background:none;border:0;
  cursor:pointer;padding:6px 8px;margin-inline-start:-8px;text-decoration:underline;
  min-height:24px}   /* padding, not bare text: WCAG 2.2 wants 24x24 */

.pn h1{font-size:27px;margin:0 0 6px}
.pn-lede{color:var(--muted);margin:0 0 26px;font-size:15px;max-width:62ch}
.pn-sec{margin-bottom:38px}
.pn-sec h2{font-size:17px;margin:0 0 12px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.card{border:1px solid var(--line);border-radius:13px;padding:16px;background:var(--paper)}
.card b{display:block;font-size:27px;line-height:1.1}
.card span{font-size:13px;color:var(--muted)}
.bar{height:6px;border-radius:3px;background:var(--paper-2);margin-top:9px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink);border-radius:3px}
.bar i.hot{background:#A3352A}

.pn-row{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:9px;
  background:var(--paper)}
.pn-row-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.pn-row-q{font-weight:700;font-size:15px}
.pn-row-meta{font-size:12.5px;color:var(--muted);white-space:nowrap}
.pn-row-body{font-size:14.5px;color:var(--ink-2);margin-top:6px;white-space:pre-wrap}
.pn-row button.link{background:none;border:0;font:inherit;font-size:13.5px;color:var(--lime-ink);
  cursor:pointer;padding:0;text-decoration:underline;margin-top:8px}

.fld{margin-bottom:16px}
.fld label{display:block;font-size:13.5px;font-weight:700;margin-bottom:5px}
.fld small{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;font-weight:400}
.fld input,.fld textarea,.fld select{width:100%;font:inherit;padding:10px 12px;
  border:1px solid var(--line-2);border-radius:10px;background:var(--paper);color:var(--ink)}
.fld textarea{min-height:110px;resize:vertical;line-height:1.6}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:2px solid var(--ink);
  outline-offset:1px;border-color:transparent}
.fld input[type=color]{height:42px;padding:4px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.snip{background:var(--ink);color:#E8EDEA;border-radius:12px;padding:15px 17px;
  font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;direction:ltr;text-align:left;
  white-space:pre-wrap;word-break:break-all;max-height:176px;overflow-y:auto}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 0}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 11px;direction:ltr}
.chip button{background:none;border:0;cursor:pointer;color:var(--muted);font-size:15px;
  line-height:1;padding:0 3px}

.note{font-size:14px;border-radius:11px;padding:12px 14px;margin-bottom:16px}
.note.ok{background:color-mix(in srgb,#1F7A4C 9%,var(--paper));color:#175E3B}
.note.warn{background:color-mix(in srgb,#8A5D0F 11%,var(--paper));color:#6B4708}
.empty{color:var(--muted);font-size:15px;padding:22px 0}

.chat-log{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--paper-2);
  display:flex;flex-direction:column;gap:9px;max-height:420px;overflow-y:auto}
.chat-log .b{max-width:80%;padding:9px 13px;border-radius:14px;font-size:14.5px;white-space:pre-wrap}
.chat-log .b.visitor{align-self:flex-start;background:var(--paper);border:1px solid var(--line)}
.chat-log .b.assistant{align-self:flex-end;background:var(--ink);color:var(--paper)}

/* Sign-in stands alone: no navigation, nothing to explore until you are in. */
.gate{max-width:380px;margin:70px auto 120px}
.gate h1{font-size:26px;margin:0 0 6px}
.gate p{color:var(--muted);margin:0 0 22px;font-size:15px}
.err{color:#A3352A;font-size:14px;margin-top:10px}

/* ------------------------------------------------------- shell additions */

/* Tenant and product switchers. The tenant one only exists for staff, so it is
   hidden by default rather than conditionally rendered. */
.pn-switch{width:100%;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line-2);
  border-radius:9px;background:var(--paper);color:var(--ink);margin-bottom:14px}
.pn-group{font-size:11.5px;font-weight:800;letter-spacing:.07em;color:var(--muted);
  margin:18px 0 7px;text-transform:uppercase}
.pn-group:first-of-type{margin-top:0}
.pn-more{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.pn-more button{width:100%;justify-content:flex-start;text-align:start;background:none;
  border:0;font:inherit;font-size:14.5px;padding:8px 12px;border-radius:9px;
  color:var(--ink-2);cursor:pointer}
.pn-more button:hover{background:var(--paper-2);color:var(--ink)}

/* The catalogue. Empty is a real state and says so rather than showing nothing. */
.cat{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.cat-card{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--paper);
  display:flex;flex-direction:column}
.cat-card h3{font-size:19px;margin:0 0 6px}
.cat-card .line{color:var(--muted);font-size:14.5px;margin:0 0 14px}
.cat-card ul{margin:0 0 18px;padding:0;list-style:none;font-size:14px}
.cat-card li{padding-inline-start:20px;position:relative;margin-bottom:7px;line-height:1.5}
.cat-card li::before{content:"";position:absolute;inset-inline-start:0;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--lime)}
.cat-card .price{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.cat-card .price b{font-size:20px}
.cat-card .price small{color:var(--muted);font-size:13px;display:block;font-weight:400}

/* Staff. Same shell, different home. */
.q-item{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;margin-bottom:9px;background:var(--paper)}
.q-item.high{border-inline-start:3px solid var(--bad)}
.q-dot{width:9px;height:9px;border-radius:50%;background:var(--line-2);margin-top:7px;flex:0 0 auto}
.q-item.high .q-dot{background:var(--bad)}
.q-body{min-width:0;flex:1}
.q-body b{display:block;font-size:15px}
.q-body span{font-size:13.5px;color:var(--muted);display:block;margin-top:2px;
  overflow-wrap:anywhere}
.q-biz{font-size:12.5px;color:var(--muted);white-space:nowrap}
table.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
table.tbl th{text-align:start;font-size:12.5px;color:var(--muted);font-weight:700;
  padding:0 12px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
table.tbl td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
table.tbl tr:hover td{background:var(--paper-2)}
.pn-tag{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:var(--paper-2);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap}
.pn-tag.ok{background:color-mix(in srgb,#1F7A4C 12%,var(--paper));color:#175E3B;border-color:transparent}
.pn-tag.bad{background:color-mix(in srgb,#A3352A 12%,var(--paper));color:#8A2D24;border-color:transparent}
.scroll-x{overflow-x:auto}

/* --------------------------------------------------------------- phone

   The rail is a column on a desktop and a strip on a phone. Before this, the
   business name, the plan line, seven nav items and two buttons ate 359px of a
   812px screen - you scrolled past the whole chrome to reach the first number.

   The nav becomes one horizontally scrollable line of pills. It is the pattern
   every phone app uses for section switching, and it costs 44px instead of 200. */
@media(max-width:820px){
  /* minmax(0,1fr), NOT 1fr. A bare `1fr` track takes its minimum from the
     content's min-content width, and the nav below is a nowrap pill row about
     650px wide - so the column grew to 650, the page opened scrolled sideways,
     and in Hebrew that reads as the text being swallowed on the right. */
  .pn{grid-template-columns:minmax(0,1fr);padding:0}
  /* min-width:0 on both, or the nowrap pill row inside refuses to shrink and
     puts the width back. */
  .pn-side,.pn-main{min-width:0;max-width:100%}
  .pn-nav{min-width:0}
  .pn-side{border-inline-end:0;border-bottom:1px solid var(--line);
    padding:14px 18px 0;position:sticky;top:var(--hdr-h,68px);z-index:60;background:var(--paper)}
  .pn-main{padding:22px 18px 72px}

  /* One flex row: name and plan on the right, the controls on the left, and
     the pills wrapping onto a second line. No absolute positioning, so nothing
     can end up underneath anything else. */
  .pn-side{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px}
  .pn-switch{order:1;flex:1 1 100%;margin-bottom:10px}
  .pn-biz{order:2;font-size:16px;margin:0}
  .pn-plan{order:3;margin:0}
  .pn-more{order:4;margin:0 0 0 auto;padding:0;border-top:0;display:flex;gap:6px}
  .pn-more button{width:auto;font-size:13px;padding:5px 11px;border:1px solid var(--line);
    border-radius:999px}
  /* 22px was not a tap target. */
  .pn-out{order:5;margin:0;font-size:13.5px;padding:8px 4px;min-height:36px}
  .pn-nav{order:6;flex:1 1 100%}

  .pn-nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px;
    margin:10px -18px 0;padding:0 18px 10px;scrollbar-width:none}
  .pn-nav::-webkit-scrollbar{display:none}
  .pn-nav button{flex:0 0 auto;padding:8px 14px;border:1px solid var(--line);
    border-radius:999px;font-size:14px;white-space:nowrap}
  .pn-nav button[aria-current=page]{border-color:var(--ink)}
  .pn-group{display:none}          /* the product switcher below carries this */

  .pn h1{font-size:23px}
  .pn-lede{font-size:14.5px;margin-bottom:20px}
  .two{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .card{padding:13px}
  .card b{font-size:22px}

  /* A queue item on a phone reads top to bottom: what, then who, then the action. */
  .q-item{flex-wrap:wrap;gap:8px 10px;padding:13px 14px}
  .q-body{flex:1 1 100%;order:2}
  .q-dot{order:1;margin-top:4px}
  .q-biz{order:3;flex:1 1 auto}
  .q-item .btn{order:4;margin-inline-start:auto}

  /* The customers table stops being a table. Each row becomes a card and each
     cell keeps its column name, so nothing has to be scrolled sideways. */
  .scroll-x{overflow-x:visible}
  table.tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.tbl,table.tbl tbody,table.tbl tr,table.tbl td{display:block;width:100%}
  table.tbl tr{border:1px solid var(--line);border-radius:12px;padding:12px 14px;
    margin-bottom:10px;background:var(--paper)}
  table.tbl td{border:0;padding:3px 0;display:flex;justify-content:space-between;
    align-items:baseline;gap:14px}
  table.tbl td::before{content:attr(data-label);font-size:12.5px;color:var(--muted);
    white-space:nowrap}
  table.tbl td:first-child{display:block;padding-bottom:9px;margin-bottom:6px;
    border-bottom:1px solid var(--line)}
  table.tbl td:first-child::before{content:none}
  table.tbl tr:hover td{background:transparent}

  .cat{grid-template-columns:1fr}
  .gate{margin:40px auto 80px;padding:0 20px}
  .snip{font-size:12px;padding:13px}
}

/* A phone in portrait cannot show a 44px-tall input and a soft keyboard at the
   same time if the input is smaller, and iOS zooms anything under 16px. */
@media(max-width:520px){
  /* iOS zooms the page when a focused control is under 16px, and never zooms
     back out. Every control, not just the ones inside .fld. */
  .fld input,.fld textarea,.fld select,.pn-switch,input,textarea,select{font-size:16px}
  .pn-switch{padding:10px 12px}
  .pn-main{padding-inline:16px}
  .pn-side{padding-inline:16px}
  .pn-nav{margin-inline:-16px;padding-inline:16px}
  .pn-nav{margin-inline:-16px;padding-inline:16px}
}

/* ── תצוגה מקדימה של הווידג'ט (מסך "שם ומראה") ─────────────────────
   ⚠️ כל מחלקה כאן בקידומת pn- לפי המלכודת ב-CLAUDE.md: tacit.css מחזיק
   שמות כלליים כמו .row ו-.tag, ושיתוף שם קרס פעם כל כרטיס ל-34 פיקסלים.

   הצבעים --wb/--wo הם **של הלקוח** ולא של Tacit, כי זו הדמיה של הווידג'ט
   באתר שלו. הנייטרלים מגיעים מאותם טוקנים שב-w.js, כדי שמה שרואים כאן
   יהיה בדיוק מה שיוצא שם. */
.pn-look{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start}
.pn-look-fields{min-width:0}
.pn-look-side{position:sticky;top:calc(var(--hdr-h,60px) + 16px);min-width:0}
.pn-look-kick{margin:0 0 8px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pn-look-note{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.5}

.pn-wprev{
  /* ⚠️ כיוון מפורש: הווידג'ט האמיתי יורש RTL מהאתר העברי של
     הלקוח, ובלעדיו הלוגו בתצוגה מופיע בצד ההפוך ממה שיצא בפועל. */
  direction:rtl;
  --wp-paper:#FFFFFF;--wp-paper-2:#F7F8F7;--wp-ink:#0E1417;
  --wp-muted:#687178;--wp-line:#E7E9E8;
  border:1px solid var(--wp-line);border-radius:5px;overflow:hidden;
  background:var(--wp-paper);color:var(--wp-ink);
  box-shadow:0 10px 34px rgba(14,20,23,.10);font-size:13px;
}
.pn-wprev[data-theme="dark"]{
  --wp-paper:#0B0E10;--wp-paper-2:#101416;--wp-ink:#EDEFEE;
  --wp-muted:#78807F;--wp-line:#1D2225;
}
.pn-wprev-head{display:flex;align-items:center;gap:9px;padding:11px 13px;background:var(--wb);color:var(--wo)}
.pn-wprev-av{
  width:30px;height:30px;border-radius:4px;flex:none;display:grid;place-items:center;
  font-weight:700;font-size:13px;background:rgba(127,127,127,.28);
  background-size:cover;background-position:center;
}
.pn-wprev-head b{display:block;font-size:13px;line-height:1.2}
.pn-wprev-head i{font-style:normal;font-size:11px;opacity:.85}
.pn-wprev-list{background:var(--wp-paper-2);padding:13px;display:flex;flex-direction:column;gap:8px;min-height:116px}
.pn-wprev-msg{margin:0;max-width:84%;padding:8px 11px;border-radius:5px;line-height:1.45}
.pn-wprev-bot{align-self:flex-start;background:var(--wp-paper);border:1px solid var(--wp-line);border-end-start-radius:2px}
.pn-wprev-me{align-self:flex-end;background:var(--wb);color:var(--wo);border-end-end-radius:2px}
.pn-wprev-form{display:flex;gap:7px;padding:10px;border-top:1px solid var(--wp-line);background:var(--wp-paper);align-items:center}
.pn-wprev-input{flex:1;border:1px solid var(--wp-line);border-radius:2px;padding:7px 9px;color:var(--wp-muted);font-size:12px}
.pn-wprev-send{width:32px;height:32px;border-radius:2px;background:var(--wb);color:var(--wo);display:grid;place-items:center;flex:none}
.pn-wprev-credit{margin:0;text-align:center;padding:6px;font-size:10px;color:var(--wp-muted);background:var(--wp-paper);border-top:1px solid var(--wp-line)}

/* מתחת ל-900 הסרגל הצדי נעלם ממילא, והתצוגה עולה מעל השדות */
@media(max-width:900px){
  .pn-look{grid-template-columns:minmax(0,1fr)}
  .pn-look-side{position:static;order:-1}
}

/* The dashboard's primary button is solid ink, not lime. A list of unanswered
   questions puts a "שמירה" on every row, and lime on each would be ten limes on
   one screen - the rule is one, and it is spent on the page's single way forward.
   --ink is paired with --paper so it flips correctly in dark mode; a literal
   colour here is how four other places once went invisible. */
.pn .btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pn .btn-primary:hover{background:var(--ink-2);border-color:var(--ink-2)}

/* The logo picker in the dashboard. Mirrors .wimg on the onboarding form. */
.pn-img{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pn-img-prev{width:48px;height:48px;border-radius:8px;object-fit:contain;flex:none;
  border:1.5px solid var(--line-2);background:var(--paper);padding:4px}
.pn-img .btn{padding:9px 16px;font-size:14.5px}
.pn-img-clear{background:none;border:none;font:inherit;font-size:13.5px;color:var(--muted);
  text-decoration:underline;cursor:pointer;padding:6px 4px;min-height:24px}
.pn-img-clear:hover{color:var(--ink)}
.pn-img-note{flex-basis:100%}

/* Where the closed bubble will sit. direction:ltr so that "left" in the setting
   is left on the screen - inside this RTL page a logical start would put it on
   the right and the preview would lie about the one thing it exists to show. */
.pn-wprev-corner{display:flex;direction:ltr;justify-content:flex-start;margin-top:12px}
.pn-wprev-corner[data-side="right"]{justify-content:flex-end}
.pn-wprev-launch{width:44px;height:44px;border-radius:4px;background:var(--wb);
  box-shadow:0 4px 14px rgba(14,20,23,.14);display:block}

/* Numbered instructions inside a dashboard section. */
.pn-steps{margin:10px 0 0;padding-inline-start:20px;font-size:15px;line-height:1.9;max-width:62ch}
.pn-steps li::marker{font-weight:700}