/* Demos of widgets that already exist in the panel (p-*): kanban, calendar, detail, file attachment, etc. */
.kb { display: flex; gap: 10px; overflow: auto; padding-bottom: 4px; direction: rtl; }
.kb-col { flex: 1 1 0; min-width: 150px; background: var(--muted); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: auto; transition: background var(--dur) var(--ease); }
.kb-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; display: grid; gap: 6px; cursor: grab; transition: opacity var(--dur), border-color var(--dur); }
.kb-card:hover, .kb-card:focus-visible { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); outline: none; }
.kb-card.pend { opacity: .55; }
.kb-mv { all: unset; font-size: 11.5px; color: var(--muted-foreground); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.kb-mvl { display: flex; flex-wrap: wrap; gap: 4px; } .kb-mvl:empty { display: none; }
.kb-mvl button { all: unset; cursor: pointer; font-size: 11.5px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 99px; background: var(--card); }
.kb-mvl button:hover { background: var(--accent); }
.kb-ghost { position: absolute; z-index: 40; pointer-events: none; width: 150px; background: var(--card); border: 1px solid var(--primary); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; box-shadow: var(--shadow-pop); left: 0; top: 0; }
.rel { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; gap: 4px; display: inline-flex; align-items: center; }
.cal-c { all: unset; box-sizing: border-box; height: 40px; display: grid; place-items: center; border-radius: 8px; cursor: pointer; font-size: 14px; transition: background var(--dur) var(--ease); }
.cal-c:hover { background: var(--accent); }
.cal-c.today { box-shadow: inset 0 0 0 1.5px var(--border); font-weight: 700; }
.cal-c.sel { background: var(--primary); color: var(--primary-foreground); }
.cal-c.rng { background: color-mix(in srgb, var(--primary) 16%, var(--card)); border-radius: 0; }
.cal-c.off { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.dtl-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 11px 4px; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.9; }
.dtl-row:last-child { border-bottom: 0; }
.dtl-k { color: var(--muted-foreground); font-size: 13px; line-height: 1.9; }
.dtl-v { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px; text-align: start; overflow-wrap: anywhere; color: var(--foreground); }
.dtl-v > * { flex: none; max-width: 100%; }
.dtl-tag { width: auto; align-self: center; }
.dtl-rel { all: unset; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--primary); text-decoration: underline; text-underline-offset: 4px; border-radius: 6px; }
.dtl-rel:hover { text-decoration-thickness: 2px; } .dtl-rel:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .dtl-rel .i { width: 15px; height: 15px; }
.dtl-num { font-variant-numeric: tabular-nums; }
.dtl .sk { align-self: center; }
.dtl.narrow { border: 1px dashed var(--border); border-radius: 10px; padding: 0 12px; margin: 0 auto; }
.dtl.narrow .dtl-row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; } .dtl.narrow .dtl-k { font-size: 12px; }
.fa-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.fa-ic { width: 36px; height: 36px; border-radius: 8px; background: var(--secondary); display: grid; place-items: center; flex: none; }
.fa-chip { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; line-height: 1.5; width: auto; max-width: 100%; }
.fa-chip:hover { background: var(--muted); } .fa-chip .i { width: 15px; height: 15px; flex: none; }
.fa-chip small { color: var(--muted-foreground); } .fa-chip.busy { opacity: .5; pointer-events: none; }
.tabular { font-variant-numeric: tabular-nums; }
.stage .codebox { white-space: pre-wrap; word-break: break-word; }
.dp-pop { position: fixed; z-index: 10000; width: 300px; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: var(--shadow-pop); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; direction: rtl; }
.dp-c { all: unset; box-sizing: border-box; height: 34px; display: grid; place-items: center; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.dp-c:hover { background: var(--accent); } .dp-c.today { box-shadow: inset 0 0 0 1.5px var(--border); font-weight: 700; } .dp-c.sel { background: var(--primary); color: var(--primary-foreground); }
.fi-wrap { position: relative; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--muted); }
.fi-img { display: block; width: 100%; max-height: 380px; object-fit: contain; }
.fi-nav { position: absolute; top: 50%; translate: 0 -50%; background: var(--card); }
.fi-cnt { position: absolute; bottom: 10px; inset-inline-start: 10px; }

/* widget page: video header (case study ⟷ CRUD), icon-only transport, manual mode */
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cs-row { display: flex; align-items: center; gap: 8px; }
.demo-shell .crud-ribbon { position: static; translate: none; direction: ltr; backdrop-filter: none; background: var(--card); pointer-events: none; }
.demo-shell .crud-ribbon span { min-width: 30px; justify-content: center; padding: 0 8px; }
.transport [data-a="interact"][aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.is-interactive .stage-box { outline: 2px solid var(--primary); outline-offset: -2px; }
.crud-matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.crud-matrix th, .crud-matrix td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: start; vertical-align: top; }
.crud-matrix tbody tr:last-child td { border-bottom: 0; }
.crud-matrix th { color: var(--muted-foreground); font-weight: 600; font-size: 12px; }
.pd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pd-list li { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; line-height: 1.9; }
.pd-list b { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--secondary); display: grid; place-items: center; font-size: 12px; }

/* market tables: right-to-left, fixed columns, vertically centred */
.mk-table.rtl { direction: rtl; table-layout: fixed; }
.mk-table.rtl th, .mk-table.rtl td { text-align: start; vertical-align: middle; overflow-wrap: anywhere; }
.crud-matrix.rtl-j { direction: rtl; min-width: 760px; } .crud-matrix.rtl-j td, .crud-matrix.rtl-j th { vertical-align: top; }
.pe-av { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--secondary); display: grid; place-items: center; font-family: Morabba; font-size: 24px; }

/* transport: icons sit dead-centre in their buttons */
.transport .btn.icon { display: inline-flex; align-items: center; justify-content: center; }
.transport .btn.icon .pi { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.transport .btn.icon svg { display: block; flex: none; }
.page-h .row.cacts { margin-inline-start: auto; }

/* market tables never scroll sideways: fixed layout, wrapping headers, tighter cells, low-priority columns drop out on narrow screens */
.mk-table.rtl { width: 100%; }
.mk-table.rtl th { white-space: normal; padding: 10px 10px; }
.mk-table.rtl td { padding: 11px 10px; }
.card:has(> .mk-table.rtl) { overflow: hidden !important; }
@media (max-width: 1280px) { .mk-table.rtl .c-lo { display: none; } }
@media (max-width: 980px) { .mk-table.rtl .c-lo2 { display: none; } }
.mk-table.rtl .pill { max-width: 100%; white-space: normal; height: auto; min-height: 22px; padding-block: 2px; text-align: center; }

/* ticket images */
.tk-imgs { display: flex; flex-wrap: wrap; gap: 10px; }
.tk-img { position: relative; margin: 0; width: 120px; height: 90px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--muted); }
.tk-img img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.tk-img .tk-x { position: absolute; top: 4px; inset-inline-start: 4px; background: var(--card); opacity: 0; transition: opacity var(--dur) var(--ease); }
.tk-img:hover .tk-x, .tk-img .tk-x:focus-visible { opacity: 1; }
.tk-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 120px; height: 90px; border: 1px dashed var(--border); border-radius: 10px; background: transparent; color: var(--muted-foreground); cursor: pointer; font: inherit; font-size: 12.5px; }
.tk-add:hover { background: var(--accent); color: var(--foreground); }

/* RecordForm: responsive by the widget's own width (container query) */
.rf-wrap { container-type: inline-size; margin: 0 auto; width: 100%; transition: width .4s; flex: 1; min-height: 0; overflow: auto; }
.rf-wrap.is-narrow { border: 1px dashed var(--border); border-radius: 10px; padding: 12px; }
.rf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-content: start; max-width: 720px; }
.rf .field { margin: 0; min-width: 0; position: relative; }
.rf .hint:empty { display: none; }
.rf-full { grid-column: 1 / -1; }
.rf-req { color: var(--destructive); font-weight: 400; }
.rf-drop { border: 1.5px dashed var(--border); border-radius: 10px; padding: 14px; text-align: center; font-size: 12.5px; color: var(--muted-foreground); cursor: pointer; }
.rf-drop:hover, .rf-drop:focus-visible { border-color: var(--primary); color: var(--primary); outline: 0; }
.rf-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rf-foot .btn { min-width: 120px; }
@container (max-width: 520px) {
  .rf { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rf-foot { flex-direction: column; align-items: stretch; }
  .rf-foot .btn { width: 100%; height: 40px; }
  .rf-foot p { text-align: center; }
}