/* Social OS dashboard plugin — inherits the Hermes dashboard tokens (--color-*, --radius); the text colour of coloured
   surfaces comes from --sos-on-* (computed at runtime from the actual token colour), with theme fallbacks.
   Typography follows the theme: --theme-font-sans/--theme-font-mono and rem sizes (the root is the theme base size).
   Never var(--font-sans)/var(--font-mono): in the Hermes dashboard they are the Nous display fonts ('Collapse'). */
.sos-root { color: var(--color-card-foreground, #111827); font-family: var(--theme-font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.9375rem; line-height: 1.45; letter-spacing: normal; text-transform: none; }
.sos-root * { box-sizing: border-box; }
.sos-root a { color: var(--color-primary, #0e7490); text-decoration: none; }
.sos-root a:hover { text-decoration: underline; }
.sos-root :where(button, select, input, textarea) { font: inherit; color: inherit; }
.sos-header { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.sos-title { font-size: 1.333rem; font-weight: 700; margin-right: 6px; }
.sos-sub, .sos-muted { color: var(--color-muted-foreground, #6b7280); font-size: 0.8rem; }
.sos-select, .sos-input, .sos-textarea { border: 1px solid var(--color-input, #e5e7eb); background: var(--color-card, #fff);
  color: var(--color-card-foreground, #111827); border-radius: var(--radius, 8px); padding: 6px 8px; min-width: 120px; }
.sos-textarea { width: 100%; min-height: 72px; resize: vertical; }
.sos-btn { border: 1px solid var(--color-border, #e5e7eb); background: var(--color-card, #fff); color: var(--color-card-foreground, #111827);
  border-radius: var(--radius, 8px); padding: 6px 12px; cursor: pointer; }
.sos-btn:hover { border-color: var(--color-ring, #0e7490); }
.sos-btn[disabled] { opacity: .5; cursor: not-allowed; }
.sos-root .sos-btn-primary { background: var(--color-primary, #0e7490); color: var(--sos-on-primary, var(--color-primary-foreground, #fff)); border-color: transparent; font-weight: 600; }
.sos-root .sos-btn-danger { background: var(--color-destructive, #b91c1c); color: var(--sos-on-destructive, #fff); border-color: transparent; font-weight: 600; }
.sos-root .sos-btn-warn { background: var(--color-warning, #b45309); color: var(--sos-on-warning, #fff); border-color: transparent; font-weight: 600; }
.sos-btn-sm { padding: 3px 8px; font-size: 0.8rem; }
.sos-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--color-border, #e5e7eb); margin-bottom: 14px; }
.sos-tab { border: 0; background: transparent; padding: 8px 12px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--color-muted-foreground, #6b7280); }
.sos-tab.is-active { color: var(--color-card-foreground, #111827); border-bottom-color: var(--color-primary, #0e7490); font-weight: 600; }
.sos-tab .sos-count { margin-left: 4px; }
.sos-card { background: var(--color-card, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius, 8px); padding: 12px 14px; margin-bottom: 12px; }
.sos-card h3 { margin: 0 0 8px; font-size: 0.9375rem; font-weight: 600; }
.sos-grid { display: grid; gap: 12px; }
.sos-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.sos-kpi { background: var(--color-card, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius, 8px); padding: 10px 12px; cursor: pointer; }
.sos-kpi-value { font-size: 1.6rem; font-weight: 700; }
.sos-kpi-label { color: var(--color-muted-foreground, #6b7280); font-size: 0.8rem; }
.sos-badge { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: 0.8rem; font-weight: 600; background: var(--color-muted, #f3f4f6); color: var(--color-card-foreground, #111827); white-space: nowrap; }
.sos-badge-fail { background: var(--color-destructive, #b91c1c); color: var(--sos-on-destructive, #fff); }
.sos-badge-warn { background: var(--color-warning, #b45309); color: var(--sos-on-warning, #fff); }
.sos-badge-ok { background: var(--color-success, #15803d); color: var(--sos-on-success, #fff); }
.sos-badge-info { background: var(--color-primary, #0e7490); color: var(--sos-on-primary, var(--color-primary-foreground, #fff)); }
.sos-chip { display: inline-block; border: 1px solid var(--color-border, #e5e7eb); border-radius: 999px; padding: 2px 9px; font-size: 0.8rem; margin: 0 4px 4px 0; background: var(--color-muted, #f3f4f6); color: var(--color-card-foreground, #111827); cursor: pointer; }
.sos-chip.is-active { border-color: var(--color-primary, #0e7490); background: var(--color-card, #fff); font-weight: 600; }
.sos-status { display: inline-block; border-radius: 4px; padding: 1px 6px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; background: var(--color-muted, #f3f4f6); color: var(--color-card-foreground, #111827); }
.sos-status-plan { opacity: .8; }
.sos-status-production { border: 1px solid var(--color-border, #e5e7eb); background: var(--color-card, #fff); }
.sos-status-review { background: var(--color-warning, #b45309); color: var(--sos-on-warning, #fff); }
.sos-status-approved, .sos-status-postiz { background: var(--color-primary, #0e7490); color: var(--sos-on-primary, var(--color-primary-foreground, #fff)); }
.sos-status-out { background: var(--color-success, #15803d); color: var(--sos-on-success, #fff); }
.sos-status-archive { opacity: .55; text-decoration: line-through; }
.sos-format { display: inline-block; border-radius: 4px; padding: 1px 6px; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--color-border, #e5e7eb); background: var(--color-muted, #f3f4f6); color: var(--color-card-foreground, #111827); margin-right: 4px; }
.sos-progress { display: inline-flex; gap: 6px; font-size: 0.8rem; color: var(--color-muted-foreground, #6b7280); flex-wrap: wrap; }
.sos-progress .is-done { color: var(--color-success, #15803d); font-weight: 600; }
.sos-progress .is-now { color: var(--color-warning, #b45309); font-weight: 600; }
.sos-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.sos-table th, .sos-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--color-border, #e5e7eb); vertical-align: top; }
.sos-table th { color: var(--color-muted-foreground, #6b7280); font-weight: 600; font-size: 0.8rem; }
.sos-table tr.is-clickable { cursor: pointer; }
.sos-table tr.is-clickable:hover td { background: var(--color-muted, #f3f4f6); }
.sos-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.sos-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.sos-col { background: var(--color-muted, #f3f4f6); border-radius: var(--radius, 8px); padding: 8px; min-height: 120px; }
.sos-col h4 { margin: 0 0 8px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted-foreground, #6b7280); }
.sos-item { background: var(--color-card, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius, 8px); padding: 8px; margin-bottom: 8px; cursor: pointer; }
.sos-item:hover { border-color: var(--color-ring, #0e7490); }
.sos-item.is-late { border-left: 3px solid var(--color-destructive, #b91c1c); }
.sos-item.sos-working, .sos-card.sos-working { border-color: var(--color-warning, #b45309); box-shadow: 0 0 0 2px var(--color-warning, #b45309) inset; }
.sos-item-id { font-family: var(--theme-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.8rem; color: var(--color-muted-foreground, #6b7280); }
.sos-item-topic { font-weight: 600; margin: 2px 0; }
.sos-item-meta { font-size: 0.8rem; color: var(--color-muted-foreground, #6b7280); }
.sos-plat { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; border: 1px solid var(--color-border, #e5e7eb); border-radius: 4px; padding: 0 4px; margin-right: 3px; }
.sos-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 60; }
.sos-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 96vw); background: var(--color-card, #fff); color: var(--color-card-foreground, #111827);
  border-left: 1px solid var(--color-border, #e5e7eb); z-index: 61; overflow-y: auto; padding: 16px 18px; box-shadow: -8px 0 24px rgba(0,0,0,.15); }
.sos-drawer h2 { margin: 0 0 4px; font-size: 1.125rem; }
.sos-drawer h3 { margin: 16px 0 6px; font-size: 0.875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted-foreground, #6b7280); }
.sos-close { position: absolute; top: 10px; right: 12px; }
.sos-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sos-thumb { border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius, 8px); overflow: hidden; background: var(--color-muted, #f3f4f6); font-size: 0.8rem; }
.sos-thumb.is-selected { border-color: var(--color-warning, #b45309); box-shadow: 0 0 0 2px var(--color-warning, #b45309) inset; }
.sos-thumb img, .sos-thumb video { width: 100%; height: 140px; object-fit: cover; display: block; background: #000; }
.sos-thumb .sos-thumb-cap { padding: 4px 6px; display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.sos-thumb-empty { height: 140px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; color: var(--color-muted-foreground, #6b7280); }
.sos-copy { white-space: pre-wrap; background: var(--color-muted, #f3f4f6); border-radius: var(--radius, 8px); padding: 8px 10px; margin: 4px 0; font-size: 0.875rem; }
.sos-copy .sos-stripped { color: var(--color-destructive, #b91c1c); text-decoration-thickness: 2px; }
.sos-timeline { list-style: none; margin: 0; padding: 0; font-size: 0.8rem; }
.sos-timeline li { padding: 3px 0; border-bottom: 1px dashed var(--color-border, #e5e7eb); }
.sos-request { border-left: 3px solid var(--color-warning, #b45309); padding: 4px 8px; margin: 4px 0; font-size: 0.875rem; background: var(--color-muted, #f3f4f6); border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0; }
.sos-request.is-done { border-left-color: var(--color-success, #15803d); opacity: .8; }
.sos-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 70; display: flex; align-items: center; justify-content: center; }
.sos-modal { background: var(--color-card, #fff); color: var(--color-card-foreground, #111827); border-radius: var(--radius, 8px); padding: 0; width: min(720px, 94vw); max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column; overflow: hidden; }
.sos-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--color-border, #e5e7eb); flex: 0 0 auto; }
.sos-modal h3 { margin: 0; }
.sos-modal-body { padding: 0 18px 18px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; overflow-wrap: anywhere; }
.sos-modal-footer { padding: 10px 18px 14px; border-top: 1px solid var(--color-border, #e5e7eb); flex: 0 0 auto; }
.sos-modal-footer p { margin: 0; }
.sos-modal-footer .sos-actions { margin-top: 8px; }
.sos-modal-footer .sos-error { max-height: 18vh; overflow: auto; margin: 0; overflow-wrap: anywhere; }
.sos-modal-body pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.sos-modal-body .sos-alert-warn { font-weight: 400; }
.sos-field { margin-bottom: 10px; }
.sos-field label { display: block; font-size: 0.8rem; color: var(--color-muted-foreground, #6b7280); margin-bottom: 3px; }
.sos-effect { font-size: 0.8rem; padding: 6px 8px; border-radius: var(--radius, 8px); background: var(--color-muted, #f3f4f6); margin-bottom: 10px; }
.sos-asset-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.sos-asset-pick label { display: block; border: 1px solid var(--color-border, #e5e7eb); border-radius: 6px; padding: 4px; font-size: 0.75rem; text-align: center; cursor: pointer; }
.sos-asset-pick label img, .sos-asset-pick label video { width: 100%; height: 64px; object-fit: cover; display: block; background: #000; }
.sos-upload-list { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; }
.sos-upload-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid var(--color-border, #e5e7eb); border-radius: 6px; padding: 4px; }
.sos-upload-list img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; background: #000; }
.sos-upload-list span { min-width: 0; overflow-wrap: anywhere; }
.sos-upload-list small { display: block; color: var(--color-muted-foreground, #6b7280); }
.sos-upload-tools { display: flex; gap: 4px; }
.sos-modal progress { width: 100%; }
.sos-asset-pick input:checked + span { font-weight: 700; color: var(--color-warning, #b45309); }
.sos-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.sos-toast { position: fixed; bottom: 18px; right: 18px; z-index: 80; background: var(--color-card, #fff); color: var(--color-card-foreground, #111827); border: 1px solid var(--color-border, #e5e7eb); border-left: 4px solid var(--color-success, #15803d);
  border-radius: var(--radius, 8px); padding: 10px 14px; max-width: 460px; box-shadow: 0 8px 24px rgba(0,0,0,.15); white-space: pre-wrap; font-size: 0.875rem; }
.sos-toast.is-error { border-left-color: var(--color-destructive, #b91c1c); }
.sos-alert-fail { color: var(--color-destructive, #b91c1c); font-weight: 600; }
.sos-alert-warn { color: var(--color-warning, #b45309); font-weight: 600; }
.sos-day { border: 1px solid var(--color-border, #e5e7eb); border-radius: 6px; min-height: 58px; padding: 4px; font-size: 0.8rem; background: var(--color-card, #fff); }
.sos-day.is-empty { background: transparent; border-style: dashed; }
.sos-day-num { color: var(--color-muted-foreground, #6b7280); }
.sos-day .sos-status { display: block; margin-top: 3px; cursor: pointer; font-size: 0.75rem; text-transform: none; }
.sos-spark { vertical-align: middle; }
.sos-mono { font-family: var(--theme-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.8rem; }
.sos-empty { color: var(--color-muted-foreground, #6b7280); padding: 12px; text-align: center; }
.sos-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.sos-asset { border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius, 8px); overflow: hidden; background: var(--color-card, #fff); cursor: pointer; font-size: 0.8rem; }
.sos-asset img, .sos-asset video { width: 100%; height: 130px; object-fit: cover; display: block; background: #000; }
.sos-asset .sos-asset-cap { padding: 6px 8px; }
.sos-error { background: var(--color-destructive, #b91c1c); color: var(--sos-on-destructive, #fff); padding: 10px 12px; border-radius: var(--radius, 8px); margin-bottom: 12px; }
.sos-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sos-card-head h3 { margin: 0; }
.sos-next-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted-foreground, #6b7280); margin-top: 6px; }
.sos-next { font-size: 1.125rem; font-weight: 600; line-height: 1.35; padding: 8px 10px; margin: 4px 0 6px; border-left: 4px solid var(--color-success, #15803d); background: var(--color-muted, #f3f4f6); border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0; }
.sos-next-warn { border-left-color: var(--color-warning, #b45309); }
.sos-next-fail { border-left-color: var(--color-destructive, #b91c1c); }
.sos-next-when { display: inline-block; font-size: 0.8rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--color-primary, #0e7490); color: var(--sos-on-primary, var(--color-primary-foreground, #fff)); vertical-align: middle; margin-left: 4px; }
.sos-kv th { width: 96px; white-space: nowrap; }
.sos-jobs { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.sos-jobs td { padding: 2px 6px 2px 0; border-bottom: 1px dashed var(--color-border, #e5e7eb); vertical-align: top; }
.sos-event-kind { display: inline-block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--color-border, #e5e7eb); border-radius: 4px; padding: 0 4px; color: var(--color-muted-foreground, #6b7280); }
.sos-event-request, .sos-event-run { border-color: var(--color-warning, #b45309); color: var(--color-warning, #b45309); }
.sos-event-publish_error { border-color: var(--color-destructive, #b91c1c); color: var(--color-destructive, #b91c1c); }
.sos-report { white-space: pre-wrap; font-family: var(--theme-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.8rem; background: var(--color-muted, #f3f4f6); border-radius: var(--radius, 8px); padding: 10px 12px; max-height: 60vh; overflow: auto; margin-top: 8px; }
.sos-skeleton { background: linear-gradient(90deg, var(--color-muted, #f3f4f6) 25%, var(--color-border, #e5e7eb) 50%, var(--color-muted, #f3f4f6) 75%); background-size: 200% 100%; animation: sos-shimmer 1.2s infinite; border-radius: var(--radius, 8px); min-height: 90px; margin-bottom: 12px; }
@keyframes sos-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (max-width: 720px) { .sos-kanban { grid-auto-columns: minmax(80vw, 1fr); } .sos-drawer { width: 100vw; } }

/* Keyboard and narrow screens retain access to every action and column. */
.sos-modal fieldset { border: 1px solid var(--color-border, #d1d5db); border-radius: var(--radius, 8px); margin: 12px 0; padding: 12px; }
.sos-modal label { display: block; margin: 8px 0; }
.sos-modal input:not([type=checkbox]):not([type=radio]), .sos-modal textarea { width: 100%; box-sizing: border-box; }
[data-action]:focus-visible, .sos-btn:focus-visible, .sos-modal input:focus-visible, .sos-modal textarea:focus-visible { outline: 3px solid var(--color-ring, var(--color-primary, #0e7490)); outline-offset: 2px; }
@media (max-width: 640px) { .sos-actions { flex-wrap: wrap; } }

/* Live work, client context and post detail */
.sos-work-title { font-size: 1.125rem; font-weight: 600; margin: 8px 0; }
.sos-work h4 { margin: 16px 0 8px; }
.sos-work-phases { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; list-style: none; padding: 0; }
.sos-work-phases li { border: 1px solid var(--color-border,#e5e7eb); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.sos-work-phases li span,.sos-work-phases li small { font-size: 0.8rem; color: var(--color-muted-foreground,#6b7280); }
.sos-work-phases .is-current { border: 2px solid var(--color-primary,#0e7490); padding: 9px; }
.sos-work-phases .is-current small { font-weight: 700; color: var(--color-primary,#0e7490); }
.sos-work-phases .is-done b::before { content: '✓ '; }
.sos-work-times { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8rem; }
.sos-work-detail { font-weight: 500; }
.sos-work-last { margin: 6px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sos-status-alerts,.sos-lessons { grid-column: 1 / -1; }
.sos-status-alerts summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; cursor: pointer; }
.sos-status-alerts summary::before { content: '▸'; }
.sos-status-alerts details[open] summary::before { content: '▾'; }
.sos-status-alerts > p { margin: 8px 0 0; font-size: 0.8rem; }
.sos-alert-group { padding-top: 10px; }
.sos-lesson { padding: 14px 0; border-top: 1px solid var(--color-border,#e5e7eb); }
.sos-lesson p { margin: 8px 0; white-space: pre-wrap; }
.sos-skill-choice { display: block; margin: 6px 0; }
.sos-client-filter { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; margin: 0 18px 12px 0; }
.sos-platform-copy { margin: 20px 0; padding: 16px; border: 1px solid var(--color-border,#e5e7eb); border-radius: 10px; }
.sos-platform-copy h3 { display: flex; gap: 10px; align-items: center; margin-top: 0; }
.sos-social-logo { width: 22px; height: 22px; flex: 0 0 22px; fill: currentColor; }
.sos-drawer details { margin: 12px 0; }
.sos-drawer summary { font-weight: 600; cursor: pointer; padding: 8px 0; }
.sos-photo-button { display: block; padding: 0; width: 100%; border: 0; background: transparent; cursor: zoom-in; }
.sos-lightbox-backdrop { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 16px; }
.sos-lightbox { width: min(1200px,100%); max-height: 96dvh; background: var(--color-card,#fff); color: var(--color-card-foreground,#111827); border-radius: 12px; display: flex; flex-direction: column; padding: 12px; }
.sos-lightbox header,.sos-lightbox footer { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex: 0 0 auto; }
.sos-lightbox-stage { position: relative; overflow: auto; min-height: 80px; margin: 12px 0; text-align: center; }
.sos-lightbox-stage img { display: block; max-width: 100%; max-height: 73dvh; width: auto; height: auto; margin: auto; object-fit: contain; }
.sos-lightbox-stage.is-zoomed img { max-width: none; max-height: none; }
.sos-lightbox-stage [data-image-status]:empty { display: none; }
.sos-root :focus-visible { outline: 2px solid var(--color-primary,#0e7490); outline-offset: 3px; }
@media(max-width:600px) {
  .sos-work-phases { grid-template-columns: 1fr 1fr; }
  .sos-lightbox-backdrop { padding: 4px; }
  .sos-lightbox { padding: 8px; }
  .sos-lightbox footer { gap: 4px; }
  .sos-lightbox footer button { padding: 8px; }
  .sos-platform-copy { padding: 10px; }
}
.sos-grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sos-status-alerts details[open] + p { display: none; }
@media(max-width:720px) { .sos-grid-2 { grid-template-columns: minmax(0,1fr); } }

/* 0.8: global workspace and client knowledge */
.sos-global-nav {display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--color-border, #e5e7eb);padding:0 0 8px;margin-bottom:16px}
.sos-global-nav .sos-tab {font-size:.94rem}
.sos-client-grid,.sos-memory-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:16px;margin-bottom:16px}
.sos-client-numbers {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
.sos-client-numbers span {display:flex;flex-direction:column;font-size:.82rem}
.sos-client-numbers b {font-size:1.5rem}
.sos-next-events {list-style:none;padding:0;font-size:.9rem}
.sos-next-events li {display:flex;flex-wrap:wrap;gap:6px 14px;padding:8px 0;border-bottom:1px solid var(--color-border, #e5e7eb)}
.sos-next-events li span {flex-basis:100%;font-weight:600}
.sos-next-events small {opacity:.8}
.sos-calendar {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:20px}
.sos-calendar-day {border:1px solid var(--color-border, #e5e7eb);border-radius:8px;padding:8px;min-height:110px}
.sos-calendar-day h3 {font-size:.8rem;margin:0 0 8px}
.sos-calendar-event {display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;border:1px solid var(--color-border, #e5e7eb);border-left:4px solid var(--sos-info,#638dd3);border-radius:5px;padding:8px;margin:5px 0;background:transparent;color:inherit;cursor:pointer;font-size:.78rem;overflow-wrap:anywhere}
.sos-calendar-event.is-scheduled {border-left-color:var(--color-warning,#d89a32)}
.sos-calendar-event.is-published {border-left-color:var(--color-success,#3ab77c)}
.sos-calendar-event.is-approved {border-left-color:var(--color-primary,#638dd3)}
.sos-calendar.is-agenda {grid-template-columns:1fr}
.sos-calendar.is-agenda .sos-calendar-day {min-height:0}
.sos-memory-text {white-space:pre-wrap;overflow-wrap:anywhere;font-size:.9rem;line-height:1.55;margin:12px 0;max-height:65vh;overflow:auto}
.sos-memory-row {padding:16px 0;border-bottom:1px solid var(--color-border, #e5e7eb)}
.sos-memory-row .sos-btn {margin-right:8px}
.sos-account {min-width:0;overflow-wrap:anywhere;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 0;border-bottom:1px solid var(--color-border, #e5e7eb)}
.sos-onboarding-steps {display:flex;flex-wrap:wrap;gap:12px 30px;padding-left:20px}
.sos-onboarding-stages {list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;padding:0}
.sos-onboarding-stages li {padding:12px;border:1px solid var(--color-border,#e5e7eb);border-left:4px solid var(--color-border,#e5e7eb);border-radius:8px;min-width:0}
.sos-onboarding-stages li b,.sos-onboarding-stages li span {display:block;overflow-wrap:anywhere}
.sos-onboarding-stages li span {font-size:.82rem;margin-top:6px}
.sos-onboarding-stages .is-running {border-left-color:var(--sos-info,#638dd3)}
.sos-onboarding-stages .is-completed {border-left-color:var(--color-success,#3ab77c)}
.sos-onboarding-stages .is-blocked {border-left-color:var(--color-warning,#d89a32)}
.sos-onboarding-timing {padding:8px 14px;background:var(--color-muted,rgba(127,127,127,.08));border-radius:8px}
.sos-onboarding>details {padding:10px 0;border-bottom:1px solid var(--color-border,#e5e7eb)}
.sos-onboarding summary {cursor:pointer;overflow-wrap:anywhere}
.sos-editorial-drafts>details {margin:14px 0;padding:12px;border:1px solid var(--color-border,#e5e7eb);border-radius:8px}
.sos-editorial-drafts>details>summary {font-weight:600}
.sos-editorial-cards {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:12px;margin:14px 0}
.sos-editorial-cards article {padding:14px;border:1px solid var(--color-border,#e5e7eb);border-radius:8px;min-width:0;overflow-wrap:anywhere}
.sos-editorial-cards h5 {font-size:1rem;margin:0 0 12px}
.sos-editorial-cards h6 {font-size:.9rem;margin:16px 0 8px}
.sos-editorial-cards p,.sos-editorial-cards li {font-size:.9rem;line-height:1.5;margin:8px 0}
.sos-editorial-cards ul {padding-left:20px}
.sos-research-text {white-space:normal}
.sos-research-text h5 {font-size:.95rem;margin:16px 0 8px}
.sos-research-text p {margin:8px 0}
.sos-research-table {overflow:auto;max-width:100%}
.sos-research-table th,.sos-research-table td {padding:8px;white-space:normal;min-width:110px;vertical-align:top;border-bottom:1px solid var(--color-border,#e5e7eb)}
.sos-research-sources {border:1px solid var(--color-border,#e5e7eb);border-radius:8px;padding:12px;margin:16px 0;min-width:0;overflow-wrap:anywhere}
.sos-research-sources ul {padding-left:20px}
.sos-research-sources li {margin:10px 0}
.sos-modal details {margin:12px 0}
.sos-modal label {display:block;margin:10px 0}
.sos-modal label>.sos-input,.sos-modal label>.sos-textarea {display:block;width:100%;box-sizing:border-box;margin-top:4px}
@media(max-width:767px){.sos-calendar{grid-template-columns:1fr}.sos-calendar-day:has(>h3:only-child){display:none}.sos-global-nav .sos-tab{padding:8px}.sos-account{align-items:flex-start}.sos-client-grid{grid-template-columns:1fr}}
.sos-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sos-change { border-top: 1px solid var(--color-border, #e5e7eb); padding: 8px 0; }
.sos-change:first-of-type { border-top: 0; }
.sos-change-effects { margin: 4px 0; padding-left: 18px; }
.sos-change-effects li { margin: 2px 0; overflow-wrap: anywhere; }
.sos-block { border: 1px solid var(--color-destructive, #b91c1c); border-radius: var(--radius, 6px); padding: 8px 10px; margin: 8px 0; }
.sos-block p { margin: 4px 0; overflow-wrap: anywhere; }
.sos-root [data-role="video-form"] { display:grid; gap:12px; margin:12px 0; }
.sos-root [data-role="video-form"] .sos-field { display:grid; gap:6px; margin:0; }
.sos-root [data-role="video-form"] :is(.sos-input,.sos-textarea,.sos-select) { width:100%; max-width:100%; padding:8px 10px; margin:0; }
.sos-root [data-role="video-form"] textarea { min-height:110px; resize:vertical; }
.sos-root [data-role="video-form"] > button[type="submit"] { justify-self:end; }
.sos-root [data-role="video-form"] fieldset { margin:0; }
.sos-video-log{margin:.5rem 0 0;padding-left:1.2rem;max-height:18rem;overflow:auto;font-size:.85em;line-height:1.4;overflow-wrap:anywhere}.sos-video-log time{opacity:.65;font-variant-numeric:tabular-nums;margin-right:.35rem}
.sos-drive-auth{margin:.25rem 0 .75rem}.sos-drive-steps{padding-left:1.2rem;line-height:1.5}.sos-drive-steps li{margin:.35rem 0}
.sos-check{display:flex;gap:.5rem;align-items:flex-start;margin:.5rem 0}

/* 0.14.4: popups, detail panel, gallery and toast in their own layer on <body>, above the Hermes header (z-40) and
   sidebar (z-50), below its own dialogs (z-200). The close button sits in a header that never scrolls away and is
   at least 44 px; on a phone popups take the whole screen, inside the safe area. */
.sos-overlay-root { position: fixed; inset: 0; z-index: 190; pointer-events: none; }
.sos-overlay-root > [data-layer] > * { pointer-events: auto; }
html.sos-overlay-open, html.sos-overlay-open body, html.sos-overlay-open #root { overflow: hidden; }
.sos-drawer { display: flex; flex-direction: column; padding: 0; overflow: hidden; max-height: 100vh; max-height: 100dvh; }
.sos-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); }
.sos-overlay-head { flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 8px 12px;
  border-bottom: 1px solid var(--color-border, #e5e7eb); background: var(--color-card, #fff); }
.sos-root .sos-close { position: static; min-height: 44px; min-width: 44px; padding: 8px 14px; font-weight: 600; font-size: 0.9375rem; white-space: nowrap; flex: 0 0 auto; }
.sos-modal-header .sos-btn, .sos-modal-footer .sos-btn { min-height: 44px; }
.sos-modal-body, .sos-lightbox-stage { overscroll-behavior: contain; }
@media (max-width: 767px) {
  .sos-drawer { width: 100vw; border-left: 0; }
  .sos-modal-backdrop { align-items: stretch; }
  .sos-modal { width: 100vw; max-height: none; height: 100vh; height: 100dvh; border-radius: 0; }
  .sos-modal-header { padding: calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left)); }
  .sos-modal-body { flex: 1 1 auto; padding: 0 calc(14px + env(safe-area-inset-right)) 14px calc(14px + env(safe-area-inset-left)); }
  .sos-modal-footer { padding: 10px calc(14px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left)); }
  .sos-lightbox-backdrop { padding: 0; }
  .sos-lightbox { width: 100vw; max-height: none; height: 100vh; height: 100dvh; border-radius: 0;
    padding: calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)); }
  .sos-lightbox-stage { flex: 1 1 auto; min-height: 0; display: flex; background: #111; border-radius: 6px; margin: 8px 0; }
  .sos-lightbox-stage img { max-height: 100%; }
  .sos-toast { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; }
}
/* iOS zooms the page into a field whose text is under 16 px, and the popup slid off screen. */
@media (max-width: 1023px) { .sos-root input, .sos-root select, .sos-root textarea { font-size: 16px; } }

/* 0.15: PED detail, pillars and proposed topics */
.sos-row-summary { display: block; margin-top: 3px; color: var(--color-muted-foreground, #6b7280); font-size: 0.8rem; line-height: 1.35; }
.sos-mix { margin: 6px 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.sos-mix b { margin-right: 4px; font-size: 0.8rem; }
.sos-idea-list { list-style: none; margin: 6px 0 12px; padding: 0; }
.sos-idea-list li { padding: 8px 0; border-bottom: 1px solid var(--color-border, #e5e7eb); overflow-wrap: anywhere; }
.sos-idea-list li:last-child { border-bottom: 0; }
.sos-card h4 { margin: 12px 0 4px; font-size: 0.875rem; }
.sos-prose { white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; }
.sos-modal fieldset legend { font-weight: 600; padding: 0 4px; }

/* 0.16: one look on every page, on a phone and on a desktop */
.sos-root { --sos-info: var(--color-primary, #0e7490); }
.sos-root .sos-btn { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.2; text-align: center; }
.sos-root .sos-btn-sm { min-height: 32px; padding: 4px 10px; }
.sos-root a.sos-btn { text-decoration: none; }
@media (pointer: coarse) {
  .sos-root .sos-btn { min-height: 44px; }
  .sos-root .sos-btn-sm { min-height: 40px; }
  .sos-root .sos-tab { min-height: 44px; }
  .sos-root .sos-chip { padding: 6px 12px; }
}
/* tab bars: one row that scrolls sideways when it does not fit */
.sos-tabs, .sos-global-nav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sos-tabs::-webkit-scrollbar, .sos-global-nav::-webkit-scrollbar { display: none; }
.sos-tab { white-space: nowrap; flex: 0 0 auto; }
.sos-card-head { flex-wrap: wrap; }
/* tables: the whole card width on a desktop, a list of cards on a phone (stackTables adds the labels) */
.sos-table { display: table; width: 100%; }
@media (max-width: 1023px) { .sos-card { overflow-x: auto; } }
@media (max-width: 767px) {
  .sos-card { overflow-x: visible; }
  .sos-table.sos-stack, .sos-table.sos-stack tbody, .sos-table.sos-stack tr, .sos-table.sos-stack td { display: block; width: 100%; }
  .sos-table.sos-stack thead { display: none; }
  .sos-table.sos-stack tr { border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius, 8px); padding: 8px 12px; margin-bottom: 8px; background: var(--color-card, #fff); }
  .sos-table.sos-stack td { border: 0; padding: 4px 0; }
  .sos-table.sos-stack td::before { content: attr(data-label); display: inline-block; width: 96px; margin-right: 8px; vertical-align: top; color: var(--color-muted-foreground, #6b7280); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding-top: 2px; }
  .sos-table.sos-stack td[data-label=""]::before, .sos-table.sos-stack td:not([data-label])::before { content: none; }
  .sos-table.sos-stack td:empty { display: none; }
  .sos-table.sos-stack tr.is-clickable:hover td { background: transparent; }
  .sos-header { gap: 8px; }
  .sos-header .sos-select { flex: 1 1 160px; }
  .sos-title { font-size: 1.15rem; }
}
/* PED calendar: a month grid on a desktop, the days with posts as an agenda on a phone */
.sos-weekday { text-align: center; color: var(--color-muted-foreground, #6b7280); font-size: 0.8rem; }
.sos-day small { display: block; }
.sos-day.is-pad { border: 0; background: transparent; }
.sos-day-wd { display: none; }
@media (max-width: 767px) {
  .sos-weekday, .sos-day.is-pad, .sos-day.is-empty { display: none; }
  .sos-day { min-height: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; }
  .sos-day-num { font-weight: 700; min-width: 64px; color: var(--color-card-foreground, #111827); }
  .sos-day-wd { display: inline; font-weight: 400; color: var(--color-muted-foreground, #6b7280); }
  .sos-day .sos-status { display: inline-block; margin: 0; }
}
.sos-day.is-empty small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sos-day { position: relative; }
.sos-table td.sos-mono { white-space: nowrap; }

/* 0.18: Video page (header, cards in a grid, popups for the forms) and the Claude login row */
.sos-card h2 { margin: 0 0 8px; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.sos-card-head h2 { margin: 0; }
.sos-root .sos-actions.sos-start { justify-content: flex-start; }
.sos-card-head .sos-actions { margin-top: 0; }
.sos-video-head p { margin: 8px 0 0; }
.sos-video-head .sos-filters { margin-top: 10px; }
.sos-video-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
@media (min-width: 1024px) { .sos-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .sos-video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sos-video-grid > .sos-card { margin: 0; min-width: 0; }
.sos-video-card > p { margin: 6px 0; }
.sos-video-card details { margin-top: 8px; }
.sos-video-card summary { cursor: pointer; font-size: 0.875rem; }
.sos-video-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sos-video-card-head h3 { margin: 0; overflow-wrap: anywhere; }
.sos-video-frame { margin: 10px auto; max-height: 360px; background: #111; border-radius: var(--radius, 8px); overflow: hidden; display: flex; justify-content: center; }
.sos-video-frame.is-9x16 { aspect-ratio: 9 / 16; width: min(100%, 202px); }
.sos-video-frame.is-4x5 { aspect-ratio: 4 / 5; width: min(100%, 288px); }
.sos-video-frame.is-1x1 { aspect-ratio: 1 / 1; width: min(100%, 360px); }
.sos-video-frame.is-16x9 { aspect-ratio: 16 / 9; width: 100%; }
.sos-root .sos-video-preview { display: block; width: 100%; height: 100%; object-fit: contain; background: #111; margin: 0; }
.sos-video-note { font-size: 0.875rem; padding: 6px 10px; border-radius: var(--radius, 8px); background: var(--color-muted, #f3f4f6); border-left: 3px solid var(--color-border, #e5e7eb); overflow-wrap: anywhere; }
.sos-video-note.is-ok { border-left-color: var(--color-success, #15803d); }
.sos-video-note.is-warn { border-left-color: var(--color-warning, #b45309); }
.sos-video-note.is-fail { border-left-color: var(--color-destructive, #b91c1c); }
.sos-video-note.is-info { border-left-color: var(--color-primary, #0e7490); }
.sos-video-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.sos-video-modal [data-role="video-form"] { margin-top: 4px; }
.sos-auth-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 10px; margin: 8px 0;
  border-radius: var(--radius, 8px); background: var(--color-muted, #f3f4f6); border-left: 3px solid var(--color-border, #e5e7eb); }
.sos-auth-row p { margin: 0; flex: 1 1 260px; overflow-wrap: anywhere; }
.sos-auth-row.is-ok { border-left-color: var(--color-success, #15803d); }
.sos-auth-row.is-warn { border-left-color: var(--color-warning, #b45309); }
.sos-auth-row.is-fail { border-left-color: var(--color-destructive, #b91c1c); }
.sos-auth-row.is-info { border-left-color: var(--color-primary, #0e7490); }
@media (max-width: 767px) {
  .sos-video-card .sos-actions .sos-btn { flex: 1 1 calc(50% - 8px); }
  .sos-auth-row .sos-btn { width: 100%; }
}

/* 0.18: client logo, mailbox of the alerts, «Da fare» in «Da approvare» */
.sos-logo { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 6px; overflow: hidden; vertical-align: middle; background: var(--color-muted, #f3f4f6); color: var(--color-muted-foreground, #6b7280);
  font-size: 0.7rem; font-weight: 700; letter-spacing: .02em; border: 1px solid var(--color-border, #e5e7eb); }
.sos-logo.is-lg { width: 40px; height: 40px; font-size: 0.85rem; border-radius: 8px; }
.sos-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 2px; }
.sos-logo.is-broken img { display: none; }
.sos-client-title { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.sos-root .sos-mailbox { gap: 6px; font-weight: 600; }
.sos-mailbox svg { width: 18px; height: 18px; }
.sos-mailbox b { min-width: 22px; padding: 0 6px; border-radius: 999px; font-size: 0.8rem; line-height: 20px; text-align: center;
  background: var(--color-success, #15803d); color: var(--sos-on-success, #fff); }
.sos-mailbox.is-warn b { background: var(--color-warning, #b45309); color: var(--sos-on-warning, #fff); }
.sos-mailbox.is-fail b { background: var(--color-destructive, #b91c1c); color: var(--sos-on-destructive, #fff); }
.sos-mailbox-body h4 { margin: 16px 0 6px; }
.sos-mailbox-list { list-style: none; margin: 0; padding: 0; }
.sos-mailbox-list li { padding: 8px 0 8px 10px; border-left: 3px solid var(--color-border, #e5e7eb); margin-bottom: 6px; overflow-wrap: anywhere; }
.sos-mailbox-list li.is-fail { border-left-color: var(--color-destructive, #b91c1c); }
.sos-mailbox-list li.is-warn { border-left-color: var(--color-warning, #b45309); }
.sos-mailbox-list li .sos-btn { margin-top: 6px; }
.sos-todo-action { border-left: 3px solid var(--color-warning, #b45309); padding-left: 8px; }
.sos-todo-action.is-fail { border-left-color: var(--color-destructive, #b91c1c); }
@media (max-width: 767px) { .sos-header .sos-mailbox span { display: none; } }
.sos-logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; }
.sos-recommended { list-style: none; margin: 6px 0; padding: 0; }
.sos-recommended li { border-bottom: 1px solid var(--color-border, #e5e7eb); }
.sos-recommended li:last-child { border-bottom: 0; }
.sos-recommended .sos-mono { overflow-wrap: anywhere; }
.sos-video-claude { margin: 6px 0; font-size: 0.8rem; }
.sos-video-claude pre { margin: 4px 0 0; padding: 6px 8px; max-height: 9rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--color-muted, #f3f4f6); border-radius: var(--radius, 8px); font-family: var(--theme-font-mono, ui-monospace, monospace); }
.sos-change-why { margin: 4px 0; font-size: 0.8rem; color: var(--color-muted-foreground, #6b7280); overflow-wrap: anywhere; }
.sos-change-why b { color: var(--color-card-foreground, #111827); font-weight: 600; }

/* 0.19: Risultati — channel colours, charts (inline SVG), best content, bars, insights */
.sos-root { --sos-plat-instagram: #d62976; --sos-plat-facebook: #1877f2; --sos-plat-x: var(--color-card-foreground, #111827);
  --sos-plat-tiktok: #0f9d9a; --sos-plat-threads: #7c7c7c; }
.sos-plat-instagram { --sos-plat: var(--sos-plat-instagram); } .sos-plat-facebook { --sos-plat: var(--sos-plat-facebook); }
.sos-plat-x { --sos-plat: var(--sos-plat-x); } .sos-plat-tiktok { --sos-plat: var(--sos-plat-tiktok); } .sos-plat-threads { --sos-plat: var(--sos-plat-threads); }
.sos-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.sos-chips .sos-chip { margin: 0; }
.sos-stats-head .sos-card-head h2 { margin: 0; }
.sos-stats-kpis .sos-kpi { cursor: default; }
.sos-kpi-delta { font-size: 0.75rem; margin-top: 2px; }
.sos-kpi-delta.is-up { color: var(--color-success, #15803d); }
.sos-kpi-delta.is-down { color: var(--color-destructive, #b91c1c); }
.sos-chart-wrap { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 200px auto; column-gap: 6px; margin-top: 6px; }
.sos-chart-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 0.72rem; color: var(--color-muted-foreground, #6b7280); text-align: right; margin: -0.45em 0; }
.sos-chart { width: 100%; height: 200px; display: block; overflow: visible; }
.sos-chart-x { grid-column: 2; display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--color-muted-foreground, #6b7280); margin-top: 2px; }
.sos-chart-grid { stroke: var(--color-border, #e5e7eb); stroke-width: 1; }
.sos-chart polyline { stroke: var(--sos-plat, var(--color-primary, #0e7490)); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sos-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.8rem; margin-top: 6px; }
.sos-legend span { display: inline-flex; align-items: center; gap: 4px; }
.sos-legend i { width: 12px; height: 3px; border-radius: 2px; background: var(--sos-plat); display: inline-block; }
.sos-legend .sos-social-logo, .sos-top-plats .sos-social-logo, .sos-result-row .sos-social-logo, .sos-table .sos-social-logo { width: 14px; height: 14px; fill: var(--sos-plat, currentColor); vertical-align: -2px; margin-right: 3px; }
.sos-top-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.sos-top-card { border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius, 8px); overflow: hidden; cursor: pointer; background: var(--color-card, #fff); display: flex; flex-direction: column; }
.sos-top-card:hover, .sos-top-card:focus-visible { border-color: var(--color-ring, #0e7490); }
.sos-top-media { position: relative; aspect-ratio: 4 / 3; background: var(--color-muted, #f3f4f6); display: flex; align-items: center; justify-content: center; }
.sos-top-media img, .sos-top-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sos-top-noimg { color: var(--color-muted-foreground, #6b7280); font-size: 0.8rem; }
.sos-top-rank { position: absolute; top: 6px; left: 6px; min-width: 24px; height: 24px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem; background: var(--color-primary, #0e7490); color: var(--sos-on-primary, #fff); }
.sos-top-body { padding: 8px 10px; }
.sos-top-body p { margin: 2px 0; }
.sos-top-title { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sos-top-numbers { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 0.8rem; }
.sos-top-plats { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.8rem; color: var(--color-muted-foreground, #6b7280); }
.sos-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sos-bars li { display: grid; grid-template-columns: minmax(0, 38%) 1fr auto; gap: 8px; align-items: center; font-size: 0.85rem; }
.sos-bar-label { overflow-wrap: anywhere; }
.sos-bar-label small { color: var(--color-muted-foreground, #6b7280); }
.sos-bar-track { background: var(--color-muted, #f3f4f6); border-radius: 999px; height: 10px; overflow: hidden; }
.sos-bar { display: block; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--color-primary, #0e7490) 55%, transparent); }
.sos-bar.is-best { background: var(--color-primary, #0e7490); }
.sos-insights { list-style: none; margin: 6px 0; padding: 0; }
.sos-insights li { padding: 6px 8px; margin-bottom: 4px; border-radius: var(--radius, 8px); background: var(--color-muted, #f3f4f6); border-left: 3px solid var(--color-border, #e5e7eb); overflow-wrap: anywhere; }
.sos-insights li.is-up { border-left-color: var(--color-success, #15803d); }
.sos-insights li.is-down { border-left-color: var(--color-warning, #b45309); }
.sos-result-row { margin: 4px 0; font-size: 0.85rem; overflow-wrap: anywhere; }
@media (max-width: 767px) { .sos-bars li { grid-template-columns: minmax(0, 45%) 1fr auto; } }
@media (max-width: 767px) {
  .sos-top-grid { grid-template-columns: 1fr; gap: 8px; }
  .sos-top-card { flex-direction: row; }
  .sos-top-media { width: 96px; flex: 0 0 96px; aspect-ratio: auto; min-height: 96px; }
  .sos-top-title { -webkit-line-clamp: 2; }
  .sos-chart-wrap { grid-template-rows: 160px auto; }
  .sos-chart { height: 160px; }
  /* every post as a short card: date, post and the three numbers */
  .sos-stats-table td:nth-child(3), .sos-stats-table td:nth-child(4), .sos-stats-table td:nth-child(5) { display: none; }
}

/* 0.19.1: social accounts of a client (one Postiz organization for every client) */
.sos-accounts h4 { margin: 14px 0 6px; }
.sos-account { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-bottom: 1px solid var(--color-border, #e5e7eb); }
.sos-account:last-of-type { border-bottom: 0; }
.sos-account-who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.sos-account-who .sos-social-logo { width: 18px; height: 18px; fill: currentColor; }
.sos-account.is-other { opacity: .75; }
.sos-accounts .sos-btn .sos-social-logo { width: 14px; height: 14px; fill: currentColor; }