/* Video only: a compact workspace, calendar, and shared post editor.
   All scoped rules use the --v-* aliases so a single token change propagates. */
main:has(#page-video.on){max-width:none;min-width:0}
body:has(#pan[open]){overflow:hidden}

#page-video{
  --v-surface:var(--panel);
  --v-soft:var(--panel-2);
  --v-border:var(--line);
  --v-muted:var(--muted);
  --v-blue:#92b6ec;--v-green:#8bc6a4;--v-purple:#bdabe3;--v-amber:#d8b982;--v-red:#e7a09b;
  --v-r-xs:6px;--v-r-sm:10px;--v-r-md:12px;--v-r-lg:16px;--v-r-pill:999px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
}
:root[data-theme="light"] #page-video{
  --v-blue:#35659b;--v-green:#347454;--v-purple:#765799;--v-amber:#8a662b;--v-red:#b44640;
}
#page-video [hidden]{display:none!important}
#page-video button{font-family:inherit;cursor:pointer}
#page-video button:disabled{opacity:.5;cursor:not-allowed}
/* The ring is a box-shadow; forced-colors mode drops shadows and paints the transparent outline instead. */
#page-video :is(button,input,select):focus-visible{outline:2px solid transparent;box-shadow:0 0 0 2px var(--focus)}

/* ---------- page shell ---------- */
#page-video{width:min(100%,1160px);margin:56px auto 0;padding-bottom:56px}
#page-video .v-breadcrumb{font-size:12px;color:var(--v-muted);display:flex;gap:12px;align-items:center;margin-bottom:24px}
#page-video .v-breadcrumb span:last-child{color:var(--text)}
#page-video .v-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:4px}
#page-video .v-heading h2{font-family:var(--font-heading);font-size:32px;line-height:36px;font-weight:600;letter-spacing:-.7px}
#page-video .v-heading p{margin-top:8px;color:var(--v-muted);font-size:14px}

#page-video .v-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--v-border);border-radius:var(--v-r-sm);
  background:var(--v-surface);color:var(--text);
  font-size:14px;font-weight:600;padding:8px 16px;min-height:36px;
  white-space:nowrap;text-decoration:none;
  transition:background .15s,border-color .15s;
}
#page-video .v-button:hover{background:var(--v-soft)}
#page-video .v-button.v-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
#page-video .v-button.v-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
#page-video .v-icon{display:inline-block;width:16px;height:16px;vertical-align:middle;flex-shrink:0}

/* ---------- view switcher / toolbar ---------- */
#page-video .v-viewbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--v-border);gap:12px}
#page-video .v-tabs{display:flex;gap:20px}
#page-video .v-tabs button{display:flex;align-items:center;gap:8px;border:0;border-bottom:2px solid transparent;padding:8px 0px;background:none;color:var(--v-muted);font-size:14px;font-weight:600;white-space:nowrap;margin-bottom:-1px;transition:color .18s ease,border-color .18s ease}
#page-video .v-tabs button[aria-pressed="true"]{color:var(--text);border-bottom-color:var(--accent)}
/* The count badge is intentionally hidden in this layout (span kept for JS). */
#page-video .v-tools{display:flex;align-items:center;gap:8px;transform:translateY(-5px)}
#page-video .v-tools .v-button{min-height:36px;padding:8px 12px;font-size:14px}
#page-video .v-search{display:flex;align-items:center;gap:8px;min-height:36px;color:var(--v-muted);padding:0 12px;border:1px solid var(--v-border);border-radius:var(--v-r-sm);background:var(--v-surface)}
#page-video .v-search input{border:0;background:transparent;color:var(--text);width:136px;min-width:0;font-size:14px;padding:8px 0;outline:none}
#page-video .v-search input:focus-visible{outline:none;box-shadow:none}
#page-video .v-search:focus-within{border-color:var(--focus);box-shadow:none;outline:2px solid transparent}

/* Every row in the toolbar is 32px, so switching between calendar and list never changes its height. */
#page-video .v-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 0 4px;min-height:40px}
#page-video .v-month-controls{display:flex;align-items:center;gap:4px;min-width:0}
/* Fixed width (min-width:0 stops the text from stretching it), so the arrows stay put for every month and language. */
#page-video .v-month{font-family:inherit;font-size:20px;font-weight:600;text-transform:capitalize;flex:0 0 164px;min-width:0;margin-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-video .v-nav{border:0;background:none;color:var(--v-muted);width:28px;height:32px;display:grid;place-items:center;border-radius:var(--v-r-xs)}
#page-video .v-nav:hover{color:var(--text);background:var(--v-soft)}
/* The icon's wrapper span would otherwise be a full line tall and leave the 16px svg below center. */
#page-video .v-nav>[data-video-icon]{display:grid;place-items:center;line-height:0}
/* The status filter (a .v-control built by video-controls.js) and refresh share one look with the search box above. */
#page-video .v-list-actions{display:flex;align-items:center;gap:8px}
#page-video .v-list-actions .v-control{height:32px;min-height:0;max-width:172px;padding:0 8px 0 12px;background:var(--v-surface);font-size:14px}
#page-video .v-list-actions .v-nav{width:32px;border:1px solid var(--v-border);border-radius:var(--v-r-sm);background:var(--v-surface)}
#page-video .v-list-actions .v-nav:hover:not(:disabled){border-color:var(--accent);background:var(--v-surface)}

/* ---------- calendar ---------- */
#page-video #postuKalendars{padding:0 0 24px}
#page-video .v-calendar{border:1px solid var(--v-border);border-radius:var(--v-r-md);overflow:hidden;background:var(--v-surface)}
#page-video .v-weekdays,#page-video .v-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
#page-video .v-weekdays{background:var(--v-soft);border-bottom:1px solid var(--v-border)}
#page-video .v-weekdays span{padding:4px 8px;font-size:12px;line-height:16px;font-weight:600;color:var(--v-muted);border-right:1px solid var(--v-border)}
#page-video .v-weekdays span:last-child{border-right:0}
#page-video .v-day{min-height:116px;padding:4px 8px 4px;border-right:1px solid var(--v-border);border-bottom:1px solid var(--v-border);min-width:0;position:relative}
#page-video .v-day:nth-child(7n){border-right:0}
#page-video .v-day:nth-last-child(-n+7){border-bottom:0}
#page-video .v-day.v-outside{background:var(--bg)}
#page-video .v-day.v-outside .v-date{color:var(--dim)}
#page-video .v-day.v-selected{background:var(--accent-soft)}
#page-video .v-day-top{display:flex;align-items:center;justify-content:space-between;margin:0 4px 4px;min-height:20px}
#page-video .v-date,#page-video .v-day-add{width:20px;height:20px}
#page-video .v-date{display:grid;place-items:center;border:0;background:none;color:var(--v-muted);font-size:12px;border-radius:var(--v-r-xs);font-variant-numeric:tabular-nums}
#page-video .v-date[aria-current="date"]{background:var(--accent);color:var(--on-accent);font-weight:600}
#page-video .v-day-add{background:none;border:0;color:var(--v-muted);border-radius:var(--v-r-xs);opacity:0;display:grid;place-items:center}
#page-video .v-day:hover .v-day-add,#page-video .v-day:focus-within .v-day-add{opacity:1}
#page-video .v-day-add:hover{background:var(--v-border);color:var(--text)}
#page-video .v-events{display:flex;flex-direction:column;gap:4px}
/* Title, then the status, then the time: one column at every width, so the 12px status keeps its room. */
#page-video .v-event{width:100%;text-align:left;background:var(--v-soft);border:1px solid transparent;border-radius:var(--v-r-sm);padding:4px 4px;color:var(--text);min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;transition:background-color .15s}
/* No stroke (the border stays, transparent, so the card keeps its size and forced-colors mode still draws an edge); hover deepens the fill. */
#page-video .v-event:hover{background:color-mix(in srgb,var(--v-soft),var(--text) 6%)}
#page-video .v-event-top{display:flex;align-items:center;gap:4px;color:var(--v-muted);font-size:12px;line-height:1.2;grid-row:3}
#page-video .v-event-top .v-icon{width:12px;height:12px;flex-shrink:0}
#page-video .v-event-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;font-weight:600;line-height:1.35;overflow-wrap:anywhere;grid-column:1/-1;grid-row:1}
#page-video .v-event>.v-status{grid-row:2;justify-self:start;max-width:100%;display:block;font-size:12px;padding:2px 8px;line-height:16px;min-width:0;overflow:hidden;text-overflow:ellipsis}
#page-video .v-event>.v-status::before{display:inline-block;vertical-align:middle;margin:0 4px 0 0}
/* Drafts and failed posts can be dragged to another day (video.js). The lifted card follows the pointer (inline `translate`) and ignores it,
   so the day underneath can be found. Picking it up eases in `scale` and the shadow; letting go is a Web Animation (.v-settling keeps the
   card above its neighbours while it slides). The shadow is repeated in LIFT_SHADOW. The global prefers-reduced-motion rule in index.html turns the transitions off. */
#page-video .v-event[data-drag]{cursor:grab;user-select:none;-webkit-user-select:none}
#page-video .v-event.v-lifted{position:relative;z-index:30;pointer-events:none;will-change:translate,scale;scale:1.03;box-shadow:0 8px 24px #0004;transition:scale .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s cubic-bezier(.2,.8,.2,1)}
#page-video .v-event.v-settling{position:relative;z-index:30}
#page-video .v-grid.v-moving,#page-video .v-grid.v-moving *{cursor:grabbing;user-select:none;-webkit-user-select:none}
/* The target day's highlight fades in and out as the card crosses days. The colour is transparent already at rest: an outline's
   default is the text colour, so fading from it to transparent would flash every day dark when the drag starts. */
#page-video .v-day{outline-color:transparent}
#page-video .v-grid.v-moving .v-day{outline-style:solid;outline-width:2px;outline-offset:-2px;transition:background-color .15s ease,outline-color .15s ease}
#page-video .v-grid.v-moving .v-day.v-drop{background:var(--accent-soft);outline-color:var(--accent)}

/* Same palette as the home page's .home-status (dashboard.css); home has no green, so that one is derived to match. */
:is(#page-video,#pan) .v-status{--status-bg:#f6f6f5;--status-border:#e4e4e2;--status-ink:#555;display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border-radius:var(--v-r-pill);border:1px solid var(--status-border);background:var(--status-bg);color:var(--status-ink);font-size:12px;font-weight:600;line-height:1.45;white-space:nowrap}
:is(#page-video,#pan) .v-status::before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor;flex-shrink:0}
:is(#page-video,#pan) .v-status[data-tone="blue"]{--status-bg:#e9f5ff;--status-border:#cbe9ff;--status-ink:#076cbd}
:is(#page-video,#pan) .v-status[data-tone="amber"]{--status-bg:#fff6df;--status-border:#ffe2a3;--status-ink:#a85f00}
:is(#page-video,#pan) .v-status[data-tone="purple"]{--status-bg:#f4edff;--status-border:#e5d5ff;--status-ink:#7a3ed6}
:is(#page-video,#pan) .v-status[data-tone="red"]{--status-bg:#fff0ed;--status-border:#ffcfc7;--status-ink:#c73f31}
:is(#page-video,#pan) .v-status[data-tone="green"]{--status-bg:#e8f7ec;--status-border:#c4ebce;--status-ink:#167b34}
:root[data-theme="dark"] :is(#page-video,#pan) .v-status{--status-bg:#303742;--status-border:#48515e;--status-ink:#d5dce6}
:root[data-theme="dark"] :is(#page-video,#pan) .v-status[data-tone="blue"]{--status-bg:#1d3851;--status-border:#315b7d;--status-ink:#8ac8ff}
:root[data-theme="dark"] :is(#page-video,#pan) .v-status[data-tone="amber"]{--status-bg:#493b24;--status-border:#79603a;--status-ink:#f0ca81}
:root[data-theme="dark"] :is(#page-video,#pan) .v-status[data-tone="purple"]{--status-bg:#3b3154;--status-border:#5a477e;--status-ink:#d3b7ff}
:root[data-theme="dark"] :is(#page-video,#pan) .v-status[data-tone="red"]{--status-bg:#4c3036;--status-border:#79505a;--status-ink:#ffb3bc}
:root[data-theme="dark"] :is(#page-video,#pan) .v-status[data-tone="green"]{--status-bg:#1f3d2c;--status-border:#356b4b;--status-ink:#8fdcaa}

#page-video .v-more{background:none;border:0;color:var(--v-muted);text-align:left;font-size:12px;padding:4px 4px}
#page-video .v-calendar-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;color:var(--v-muted);font-size:12px}
#page-video .v-day-detail{margin-top:24px;border-top:1px solid var(--v-border);padding-top:16px}
#page-video .v-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
#page-video .v-detail-head h3{font-family:inherit;font-size:14px;font-weight:600}
/* Only the weekday's first letter: `capitalize` would also raise the month ("14. Oktobris"), which Latvian and Russian write in lower case. */
#page-video .v-detail-head h3::first-letter{text-transform:uppercase}
#page-video .v-detail-head .v-button{padding:4px 8px;min-height:28px;font-size:12px}
#page-video .v-mobile-dots{display:none}
/* Shown when the search leaves nothing in the month on screen (video.js). Empty, it takes no room; the status stays in the tree so it is announced. */
#page-video .v-calendar-note{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;font-size:14px;color:var(--v-muted)}
#page-video .v-calendar-note:has(#kal-status:not(:empty)){margin:0 0 12px}
#page-video .v-calendar-note button{padding:4px 0;background:none;border:0;color:var(--text);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- list view ---------- */
#page-video .v-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px}
#page-video .v-table th{text-align:left;color:var(--v-muted);font-size:12px;font-weight:400;padding:12px 12px;border-bottom:1px solid var(--v-border);background:var(--v-soft)}
#page-video .v-table th:first-child{width:152px}
#page-video .v-table th:nth-child(3){width:156px}
#page-video .v-table th:last-child{width:80px}
#page-video .v-table td{border-bottom:1px solid var(--v-border);padding:12px 12px;vertical-align:middle}
#page-video .v-table tbody tr:hover{background:var(--v-soft)}
#page-video .v-row-title{display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--text);text-align:left;max-width:100%;font-size:14px}
#page-video .v-row-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#page-video .v-row-title .v-icon{color:var(--v-muted)}
#page-video .v-thumbnail{width:36px;height:44px;flex:0 0 36px;object-fit:cover;border-radius:4px;background:var(--v-soft)}
#page-video .v-event-title:has(.v-thumbnail){display:flex;align-items:center;gap:8px}
#page-video .v-event-title>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0}
#page-video .v-event .v-thumbnail{width:32px;height:40px;flex-basis:32px}
#page-video .v-row-date{font-size:12px;color:var(--v-muted);font-variant-numeric:tabular-nums}
#page-video .v-row-date time{display:block;color:var(--text)}
#page-video .v-format{color:var(--v-muted);font-size:12px}

/* ---------- empties / notices ---------- */
#page-video .v-empty{padding:48px 20px;text-align:center;border:1px dashed var(--v-border);border-radius:var(--v-r-md);background:var(--v-surface);color:var(--v-muted);font-size:14px}
#page-video .v-empty strong{display:block;color:var(--text);font-weight:600;margin-bottom:4px}
#page-video .v-empty .v-button{margin-top:16px}
#page-video .v-empty-small{font-size:14px;color:var(--v-muted);padding:16px 0}
#page-video .v-notice{font-size:12px;padding:12px 12px;margin-bottom:12px;border:1px solid var(--v-border);border-radius:var(--v-r-sm);background:var(--v-soft);color:var(--v-muted);line-height:1.5}
#page-video .v-notice:is([data-kind="error"],[data-kind="success"],[data-kind="warning"]){display:flex;align-items:flex-start;gap:8px;font-weight:600;border-color:var(--tone-line);background:var(--tone-bg);color:var(--tone-fg)}
#page-video .v-notice:is([data-kind="error"],[data-kind="success"],[data-kind="warning"])::before{content:"";flex:none;width:16px;height:16px;margin-top:calc((1lh - 16px) / 2);background:currentColor;-webkit-mask:var(--tone-icon) center/contain no-repeat;mask:var(--tone-icon) center/contain no-repeat}
#page-video .v-notice[data-kind="error"]{--tone-fg:var(--error-text);--tone-bg:var(--error-bg);--tone-line:var(--error-border);--tone-icon:var(--icon-error)}
#page-video .v-notice[data-kind="success"]{--tone-fg:var(--success-text);--tone-bg:var(--success-bg);--tone-line:var(--success-border);--tone-icon:var(--icon-success)}
#page-video .v-notice[data-kind="warning"]{--tone-fg:var(--warning-text);--tone-bg:var(--warning-bg);--tone-line:var(--warning-border);--tone-icon:var(--icon-warning)}
#page-video .v-notice{margin-top:12px}

.v-upload-progress[hidden]{display:none!important}
.v-upload-progress{--v-surface:var(--panel);--v-border:var(--line);--v-muted:var(--muted);--v-green:#8bc6a4;--v-red:#e7a09b;position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:1001;width:min(352px,calc(100vw - 32px));padding:12px 16px;border:1px solid var(--v-border);border-radius:12px;background:var(--v-surface);color:var(--text);font:12px/1.4 var(--font-body);box-shadow:0 12px 38px #0005}
:root[data-theme="light"] .v-upload-progress{--v-green:#347454;--v-red:#b44640}
.v-upload-progress-head,.v-upload-progress-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
.v-upload-progress-head{font-weight:600}
.v-upload-progress-head span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#video-upload-percent{font-variant-numeric:tabular-nums;flex-shrink:0}
.v-upload-progress-track{height:8px;margin:12px 0 8px;border-radius:99px;background:var(--v-border);overflow:hidden}
#video-upload-fill{width:0;height:100%;border-radius:inherit;background:var(--v-green);transition:width .55s cubic-bezier(.2,.8,.2,1)}
.v-upload-progress-foot{color:var(--v-muted);font-size:12px}
#video-upload-reopen{padding:0;border:0;background:none;color:var(--accent-ink);font:inherit;font-weight:600;white-space:nowrap;cursor:pointer}
#video-upload-reopen:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.v-upload-progress[data-state="error"] #video-upload-fill{background:var(--v-red)}
.v-upload-progress[data-state="error"] .v-upload-progress-head{color:var(--v-red)}
.v-upload-progress[data-state="success"] #video-upload-fill{background:var(--v-green)}

/* ---------- editor dialog ---------- */
/* The editor dialog's look (frame, header, document, properties, fields, dropdowns, date picker) is in
   shared/video-editor.css, shared with the staff pages' video editor. What follows is only this editor's own. */
#pan[open]{animation:dialog-in .22s cubic-bezier(.2,.8,.2,1)}
#pan[open]::backdrop{animation:backdrop-in .22s ease-out}

#pan #pan-tiktok-options{display:grid;gap:20px;font-size:14px}
#pan #pan-tiktok-options .v-tiktok-header{display:grid;gap:4px}
#pan #pan-tiktok-options .v-tiktok-header h3{margin:0;color:var(--text);font-size:14px}
#pan #pan-tiktok-options p{margin:0;color:var(--v-muted);line-height:1.5}
#pan #pan-tiktok-options .v-tiktok-settings{overflow:hidden;border:1px solid var(--v-border);border-radius:var(--v-r-md);background:var(--v-surface)}
#pan #pan-tiktok-options .v-tiktok-group{min-width:0;margin:0;padding:16px 20px;border:0}
#pan #pan-tiktok-options .v-tiktok-group+.v-tiktok-group{border-top:1px solid var(--v-border)}
#pan #pan-tiktok-options .v-tiktok-group-title{display:block;margin:0 0 8px;color:var(--v-muted);font-size:12px;font-weight:600;line-height:1.4}
#pan #pan-tiktok-options select{display:block;width:100%;max-width:320px;min-height:40px;padding:8px 12px;border:1px solid var(--v-border);border-radius:var(--v-r-sm);background:var(--v-soft);color:var(--text);font-size:14px}
#pan #pan-tiktok-options select[hidden]{display:none}
#pan #pan-tiktok-options #pan-tiktok-privacy-trigger{display:flex;width:100%;max-width:320px;min-height:40px;padding:8px 12px;font-size:14px}
#pan #pan-tiktok-options .v-tiktok-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#pan #pan-tiktok-options .v-tiktok-choice{display:flex;align-items:flex-start;gap:12px;min-width:0;margin:0;color:var(--text);font-size:14px;line-height:1.5;cursor:pointer}
#pan #pan-tiktok-options .v-tiktok-choice>span{min-width:0;overflow-wrap:anywhere}
#pan #pan-tiktok-options .v-tiktok-choice small{color:var(--v-muted);font-size:12px}
#pan #pan-tiktok-options input[type="checkbox"]{width:16px;min-width:16px;height:16px;flex:0 0 16px;margin:4px 0 0;padding:0;border:0;border-radius:4px;cursor:inherit}
#pan #pan-tiktok-options .v-tiktok-choice:has(input:disabled){opacity:.55;cursor:not-allowed}
#pan #pan-tiktok-brands{display:grid;gap:12px;margin:16px 0 0 28px;padding:16px 0 0 16px;border-top:1px solid var(--v-border)}
#pan #pan-tiktok-options .v-tiktok-confirmation{display:grid;gap:8px;padding:0 0px}
#pan #pan-tiktok-options .v-tiktok-confirmation p{padding-left:28px;font-size:12px}
#pan #pan-trial-options{display:grid;gap:12px;font-size:14px}
#pan #pan-trial-options[hidden],#pan #pan-trial-strategy[hidden]{display:none}
#pan #pan-trial-options h3{margin:0;color:var(--text);font-size:14px}
#pan #pan-trial-options .v-trial-choice{display:flex;align-items:flex-start;gap:12px;min-width:0;margin:0;color:var(--text);font-size:14px;line-height:1.5;cursor:pointer}
#pan #pan-trial-options .v-trial-choice>span{min-width:0;overflow-wrap:anywhere}
#pan #pan-trial-options .v-trial-choice small{display:block;color:var(--v-muted);font-size:12px}
#pan #pan-trial-options input[type="checkbox"]{width:16px;min-width:16px;height:16px;flex:0 0 16px;margin:4px 0 0;padding:0;border:0;border-radius:4px;cursor:inherit}
#pan #pan-trial-options .v-trial-choice:has(input:disabled){opacity:.55;cursor:not-allowed}
#pan #pan-trial-strategy{display:grid;gap:8px;margin-left:28px}
#pan #pan-trial-options .v-trial-label{display:block;margin:0;color:var(--v-muted);font-size:12px;font-weight:600;line-height:1.4}
#pan #pan-trial-options select{display:block;width:100%;max-width:320px;min-height:40px;padding:8px 12px;border:1px solid var(--v-border);border-radius:var(--v-r-sm);background:var(--v-soft);color:var(--text);font-size:14px}
#pan #pan-trial-options select[hidden]{display:none}
#pan #pan-trial-options #pan-trial-graduation-trigger{display:flex;width:100%;max-width:320px;min-height:40px;padding:8px 12px;font-size:14px}
#pan #pan-linkedin-options{display:grid;gap:16px;font-size:14px}
#pan #pan-linkedin-options[hidden]{display:none}
#pan #pan-linkedin-options .v-linkedin-header{display:grid;gap:4px}
#pan #pan-linkedin-options .v-linkedin-header h3{margin:0;color:var(--text);font-size:14px}
#pan #pan-linkedin-options p{margin:0;color:var(--v-muted);line-height:1.5}
#pan #pan-linkedin-options #pan-linkedin-note{font-size:12px}
#pan #pan-linkedin-options .v-linkedin-settings{overflow:hidden;border:1px solid var(--v-border);border-radius:var(--v-r-md);background:var(--v-surface)}
#pan #pan-linkedin-options .v-linkedin-group{min-width:0;margin:0;padding:16px 20px}
#pan #pan-linkedin-options .v-linkedin-group+.v-linkedin-group{border-top:1px solid var(--v-border)}
#pan #pan-linkedin-options .v-linkedin-label{display:block;margin:0 0 8px;color:var(--v-muted);font-size:12px;font-weight:600;line-height:1.4}
#pan #pan-linkedin-options select{display:block;width:100%;max-width:320px;min-height:40px;padding:8px 12px;border:1px solid var(--v-border);border-radius:var(--v-r-sm);background:var(--v-soft);color:var(--text);font-size:14px}
#pan #pan-linkedin-options select[hidden]{display:none}
#pan #pan-linkedin-options #pan-linkedin-visibility-trigger{display:flex;width:100%;max-width:320px;min-height:40px;padding:8px 12px;font-size:14px}
#pan #pan-linkedin-options .v-linkedin-choice{display:flex;align-items:flex-start;gap:12px;min-width:0;margin:0;color:var(--text);font-size:14px;line-height:1.5;cursor:pointer}
#pan #pan-linkedin-options .v-linkedin-choice>span{min-width:0;overflow-wrap:anywhere}
#pan #pan-linkedin-options input[type="checkbox"]{width:16px;min-width:16px;height:16px;flex:0 0 16px;margin:4px 0 0;padding:0;border:0;border-radius:4px;cursor:inherit}
#pan #pan-linkedin-options .v-linkedin-choice:has(input:disabled){opacity:.55;cursor:not-allowed}
#pan #pan-youtube-options{display:grid;gap:16px;font-size:14px}
#pan #pan-youtube-options[hidden]{display:none}
#pan #pan-youtube-options .v-youtube-header{display:grid;gap:4px}
#pan #pan-youtube-options .v-youtube-header h3{margin:0;color:var(--text);font-size:14px}
#pan #pan-youtube-options p{margin:0;color:var(--v-muted);line-height:1.5}
#pan #pan-youtube-options #pan-youtube-note{font-size:12px}
#pan #pan-youtube-options .v-youtube-settings{overflow:hidden;border:1px solid var(--v-border);border-radius:var(--v-r-md);background:var(--v-surface)}
#pan #pan-youtube-options .v-youtube-group{display:grid;gap:12px;min-width:0;margin:0;padding:16px 20px}
#pan #pan-youtube-options .v-youtube-group+.v-youtube-group{border-top:1px solid var(--v-border)}
#pan #pan-youtube-options .v-youtube-label{display:block;margin:0;color:var(--v-muted);font-size:12px;font-weight:600;line-height:1.4}
#pan #pan-youtube-options select{display:block;width:100%;max-width:320px;min-height:40px;padding:8px 12px;border:1px solid var(--v-border);border-radius:var(--v-r-sm);background:var(--v-soft);color:var(--text);font-size:14px}
#pan #pan-youtube-options select[hidden]{display:none}
#pan #pan-youtube-options #pan-youtube-privacy-trigger{display:flex;width:100%;max-width:320px;min-height:40px;padding:8px 12px;font-size:14px}
#pan #pan-youtube-options .v-youtube-choice{display:flex;align-items:flex-start;gap:12px;min-width:0;margin:0;color:var(--text);font-size:14px;line-height:1.5;cursor:pointer}
#pan #pan-youtube-options .v-youtube-choice>span{display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}
#pan #pan-youtube-options .v-youtube-choice small{color:var(--v-muted);font-size:12px}
#pan #pan-youtube-options input[type="checkbox"]{width:16px;min-width:16px;height:16px;flex:0 0 16px;margin:4px 0 0;padding:0;border:0;border-radius:4px;cursor:inherit}
#pan #pan-youtube-options .v-youtube-choice:has(input:disabled){opacity:.55;cursor:not-allowed}
/* The collaborators fields (shared/collaborator-picker.js): partners as chips in one box with the field that adds them,
   the partner found for what was typed offered under it, and why Facebook will not take one said below. */
#pan .v-collab-source[hidden]{display:none}
#pan .v-collab{position:relative;min-width:0}
#pan .v-collab-box{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;min-height:44px;padding:6px;border:1px solid var(--v-border);border-radius:var(--v-r-sm);background:transparent;cursor:text;transition:border-color .15s ease-out,box-shadow .15s ease-out,background-color .15s ease-out}
#pan .v-collab-box:hover{background:var(--v-soft)}
#pan .v-collab-box:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-soft);background:var(--v-soft)}
#pan .v-collab[data-locked="true"] .v-collab-box{cursor:default;background:transparent;opacity:.8}
#pan .v-collab-chips{display:contents;margin:0;padding:0;list-style:none}
#pan .v-collab-chips[hidden]{display:none}
#pan .v-collab-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;height:30px;padding:0 3px;border:1px solid var(--v-border);border-radius:var(--v-r-pill);background:var(--v-surface);color:var(--text);font-size:13px;font-weight:600;line-height:1;cursor:default}
#pan .v-collab-chip[data-state="bad"]{border-color:var(--error-border);background:var(--error-bg);color:var(--error-text)}
#pan .v-collab-chip[data-state="pending"] .v-collab-avatar{animation:v-collab-pulse 1.2s ease-in-out infinite}
#pan .v-collab-chip-name{min-width:0;overflow:hidden;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
#pan .v-collab-chip:not(:has(.v-collab-remove)) :is(.v-collab-chip-name,.v-collab-status):last-child{margin-right:4px}
#pan .v-collab-chip:not(:has(.v-collab-remove)) .v-collab-chip-name:last-child{padding-right:3px}
/* A published post's invitation on Instagram (setInvites): pending, accepted, declined, or not invited at all. */
#pan .v-collab-status{flex:none;padding:3px 7px;border-radius:var(--v-r-pill);background:var(--v-soft);color:var(--v-muted);font-size:11px;font-weight:600;line-height:1.2}
#pan .v-collab-status[data-status="pending"]{background:color-mix(in srgb,var(--v-amber) 22%,transparent);color:var(--text)}
#pan .v-collab-status[data-status="accepted"]{background:color-mix(in srgb,var(--v-green) 24%,transparent);color:var(--text)}
#pan .v-collab-status[data-status="declined"],#pan .v-collab-status[data-status="missing"]{background:var(--error-bg);color:var(--error-text)}
#pan .v-collab-avatar{--hue:210;display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;overflow:hidden;background:hsl(var(--hue) 55% 88%);color:hsl(var(--hue) 45% 28%);font-size:11px;font-weight:700;line-height:1}
:root[data-theme="dark"] #pan .v-collab-avatar{background:hsl(var(--hue) 30% 30%);color:hsl(var(--hue) 70% 86%)}
#pan .v-collab-avatar img{display:block;width:100%;height:100%;object-fit:cover;filter:none;outline:1px solid rgba(0,0,0,.08);outline-offset:-1px;border-radius:50%}
#pan .v-collab-remove{display:grid;place-items:center;flex:none;width:24px;height:24px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--v-muted);cursor:pointer}
#pan .v-collab-remove::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("/icons/ui/close.svg") center/12px no-repeat;mask:url("/icons/ui/close.svg") center/12px no-repeat}
#pan .v-collab-remove:hover{background:var(--v-soft);color:var(--text)}
#pan .v-collab-remove:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
#pan .v-collab-remove:disabled{opacity:.5;cursor:default}
#pan .v-collab-entry{position:relative;flex:1 1 200px;min-width:160px}
#pan .v-collab-entry[hidden]{display:none}
#pan .v-collab .v-collab-input{display:block;min-height:30px;padding:4px 6px;border:0;border-radius:6px;background:transparent;box-shadow:none}
#pan .v-collab .v-collab-input:hover,#pan .v-collab .v-collab-input:focus-visible{border:0;background:transparent;box-shadow:none}
#pan .v-collab-pop{position:absolute;z-index:20;top:calc(100% + 10px);left:-7px;width:min(380px,calc(100vw - 48px));padding:4px;border:1px solid var(--v-border);border-radius:var(--v-r-md);background:var(--v-surface);box-shadow:0 14px 40px rgba(0,0,0,.28)}
:root[data-theme="light"] #pan .v-collab-pop{box-shadow:0 12px 32px rgba(46,42,30,.12),0 2px 6px rgba(46,42,30,.05)}
#pan .v-collab-pop[hidden]{display:none}
#pan .v-collab-option{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin:0;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
#pan .v-collab-option:hover:not(:disabled),#pan .v-collab-option:focus-visible{outline:none;background:var(--v-soft)}
#pan .v-collab-option:disabled{cursor:progress}
#pan .v-collab-option .v-collab-avatar{width:40px;height:40px;font-size:15px}
#pan .v-collab-option[data-state="pending"] .v-collab-avatar{animation:v-collab-pulse 1.2s ease-in-out infinite}
#pan .v-collab-option-text{display:grid;gap:2px;flex:1;min-width:0}
#pan .v-collab-option-text strong{overflow:hidden;font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
#pan .v-collab-option-text small{color:var(--v-muted);font-size:12px;line-height:1.45;text-wrap:pretty}
#pan .v-collab-add{flex:none;padding:4px 10px;border-radius:var(--v-r-pill);background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:600;line-height:1.3}
#pan .v-collab-spinner{flex:none;width:16px;height:16px;border:2px solid var(--v-border);border-top-color:var(--v-muted);border-radius:50%;animation:v-collab-spin .8s linear infinite}
@keyframes v-collab-spin{to{transform:rotate(360deg)}}
@keyframes v-collab-pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){#pan .v-collab-spinner{animation-duration:2.4s}#pan :is(.v-collab-chip,.v-collab-option) .v-collab-avatar{animation:none}}
#pan .v-collab-message{margin:6px 2px 0;color:var(--v-muted);font-size:12px;line-height:1.5;text-wrap:pretty}
#pan .v-collab-message[data-kind="error"]{color:var(--error-text)}
#pan .v-collab-message[hidden]{display:none}
#pan .v-collab-problems{display:grid;gap:4px;margin:8px 2px 0;padding:0;list-style:none;color:var(--error-text);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
#pan .v-collab-problems[hidden]{display:none}
#pan .v-collab-problems strong{font-weight:600}
#pan .v-collaborator-grid{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(0,1.7fr);gap:20px;align-items:start;padding:0 0 20px}
#pan .v-collaborator-side{min-width:0}
#pan .v-collaborator-accounts{min-width:0;padding:12px 12px;border:1px solid var(--v-border);border-radius:var(--v-r-sm)}
#pan .v-collaborator-fields{min-width:0}
#pan .v-collaborator-fields .v-field:last-child{margin-bottom:0}
#pan .v-account-list{display:grid;gap:4px;margin-bottom:8px}
#pan .v-account-row{display:flex;align-items:center;gap:8px;min-height:36px}
#pan .v-account-logo{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:7px;color:#fff}
#pan .v-account-logo svg{display:block;width:16px;height:16px}
#pan .v-account-logo-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
#pan .v-account-logo-facebook{background:#1877f2}
#pan .v-account-logo-tiktok{background:#010101}
#pan .v-account-logo-linkedin{background:#0a66c2}
#pan .v-account-logo-youtube{background:#ff0000}
#pan .v-account-name{flex:1;min-width:0;font-size:12px;font-weight:600}
#pan .v-account-state{font-size:12px;font-weight:600;white-space:nowrap}
#pan .v-account-state[data-tone="green"]{color:var(--v-green)}
#pan .v-account-state[data-tone="red"]{color:var(--v-red)}
#pan #pan-account-note{margin:0 0 8px;color:var(--v-muted);font-size:12px;line-height:1.5}
#pan .v-thumbnail-preview{display:block;width:100%;max-height:160px;object-fit:contain;background:var(--bg);border-radius:var(--v-r-sm);margin-bottom:12px}
#pan .v-thumbnail-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
/* Upload a ready image, or design one in the thumbnail editor (thumbnail-editor/). */
#pan .v-thumbnail-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
#pan .v-thumbnail-design{width:100%;color:var(--text);font:inherit}
#pan .v-thumbnail-design:disabled{cursor:progress;opacity:.7}
#pan .v-thumbnail-design[data-state="design"] .v-icon{opacity:.9}
#pan .v-post-design{margin-top:8px}
#pan .v-post-design[hidden]{display:none}
/* A carousel's items: tiles in publishing order. Each can be dragged to another place, moved with the arrows
   (keyboard and touch) or removed; the number is its position. */
#pan .v-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin:0 0 12px;padding:0;list-style:none}
#pan .v-gallery-item{position:relative;aspect-ratio:4/5;border:1px solid var(--v-border);border-radius:var(--v-r-sm);background:var(--bg);overflow:hidden;cursor:grab;transition:opacity .15s,border-color .15s}
#pan .v-gallery-item:focus-within{border-color:var(--focus)}
#pan .v-gallery-item.v-dragging{opacity:.4}
#pan .v-gallery-item.v-drop-before{box-shadow:inset 3px 0 0 var(--accent)}
#pan .v-gallery-item.v-drop-after{box-shadow:inset -3px 0 0 var(--accent)}
#pan .v-gallery-item :is(img,video){display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* index.html greys every image (the monochrome icons); the photos being published are shown as they are, on the calendar and list too. */
#pan :is(.v-preview,.v-gallery-item) img,#pan .v-thumbnail-preview,#page-video .v-thumbnail{filter:none}
#pan .v-gallery-index{position:absolute;top:6px;left:6px;min-width:20px;padding:2px 6px;border-radius:var(--v-r-pill);background:#000a;color:#fff;font-size:12px;font-weight:600;line-height:16px;text-align:center}
#pan .v-gallery-kind{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:20px;height:20px;border-radius:var(--v-r-pill);background:#000a;color:#fff}
#pan .v-gallery-kind svg{width:10px;height:10px}
#pan .v-gallery-tools{position:absolute;inset:auto 0 0;display:flex;gap:2px;padding:4px;background:linear-gradient(transparent,#000b)}
#pan .v-gallery-tools button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--v-r-xs);background:transparent;color:#fff}
#pan .v-gallery-tools button:hover:not(:disabled){background:#fff3}
#pan .v-gallery-tools button:disabled{opacity:.35}
#pan .v-gallery-tools button svg{width:16px;height:16px}
#pan .v-gallery-tools [data-gallery-remove]{margin-left:auto}
#pan .v-add-more{margin-top:8px}
#pan .v-add-more[hidden]{display:none}

#pan #pan-publishing{flex:1;min-width:0}
#pan .v-publish-choice{display:flex;align-items:center;justify-content:space-between;gap:12px}
#pan .v-publish-choice label{font-size:12px;color:var(--v-muted)}
#pan .v-publish-choice select{width:auto;max-width:65%;padding:8px 8px;font-size:12px;background:var(--v-soft)}
#pan .v-publish-choice .v-control{max-width:65%}
#pan .v-editor-actions #pan-dzest{margin-right:auto;color:var(--v-red);padding:8px 0;background:none;border:0;font-size:12px}
#pan .v-editor-footer .v-notice{max-height:100px;overflow:auto}

/* ---------- shared dropdowns and date picker ---------- */
#page-video .v-control{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;max-width:100%;min-height:32px;padding:8px 8px;border:1px solid var(--v-border);border-radius:var(--v-r-sm);background:var(--v-soft);color:var(--text);font:inherit;font-size:12px;text-align:left}
#page-video .v-control:hover,#page-video .v-control[aria-expanded="true"]{border-color:var(--accent)}
#page-video .v-control svg{width:16px;height:16px;flex-shrink:0;color:var(--v-muted)}
#page-video .v-popup{position:fixed;inset:auto;margin:0;width:232px;max-width:calc(100vw - 24px);padding:4px;border:1px solid var(--v-border);border-radius:var(--v-r-md);background:var(--v-surface);color:var(--text);font-family:inherit;box-shadow:0 12px 36px #0004;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--v-border) transparent;z-index:10}
:root[data-theme="light"] #page-video .v-popup{box-shadow:0 12px 32px rgba(46,42,30,.1),0 2px 6px rgba(46,42,30,.04)}
#page-video .v-popup::backdrop{background:transparent}
#page-video .v-options button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:36px;padding:8px 12px;border:0;border-radius:var(--v-r-sm);background:transparent;color:var(--text);font-size:14px;text-align:left}
#page-video .v-options button:hover:not(:disabled),#page-video .v-options button:focus-visible{background:var(--v-soft);outline:0}
#page-video .v-options button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent-ink)}
#page-video .v-options button[aria-selected="true"]::after{content:"";display:inline-block;width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.12 11.62c.48-.49 1.28-.49 1.76 0l4.36 4.35 9.87-10.09c.48-.5 1.27-.51 1.76-.02.5.48.51 1.27.02 1.76l-10.75 11c-.48.5-1.27.51-1.76.02l-.02-.02-5.24-5.24c-.49-.48-.49-1.28 0-1.76'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.12 11.62c.48-.49 1.28-.49 1.76 0l4.36 4.35 9.87-10.09c.48-.5 1.27-.51 1.76-.02.5.48.51 1.27.02 1.76l-10.75 11c-.48.5-1.27.51-1.76.02l-.02-.02-5.24-5.24c-.49-.48-.49-1.28 0-1.76'/%3E%3C/svg%3E") center/contain no-repeat}
#page-video .v-options button:focus-visible{box-shadow:inset 0 0 0 2px var(--focus);outline:2px solid transparent;outline-offset:-2px}
#page-video :is(.v-control,.v-datepicker button,.v-datepicker input):focus-visible{outline:2px solid transparent;border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-soft)}

/* ---------- responsive ---------- */
@media(max-width:1500px){}
@media(min-width:1500px){#page-video .v-day{min-height:120px}}
@media(min-width:701px){#page-video .v-calendar-foot{display:none}}
@media(min-width:1600px){#page-video{position:relative;left:40px}}

/* ---------- content types: video, post, story, email campaign ---------- */
/* One editor serves all four: what belongs to another type is hidden (data-kinds lists the types a part is for). */
#pan[data-kind="video"] [data-kinds]:not([data-kinds~="video"]),
#pan[data-kind="post"] [data-kinds]:not([data-kinds~="post"]),
#pan[data-kind="story"] [data-kinds]:not([data-kinds~="story"]),
#pan[data-kind="email"] [data-kinds]:not([data-kinds~="email"]){display:none!important}
#pan :is(.v-email-note,#pan-story-note){margin:0 0 24px;padding:12px;border:1px solid var(--v-border);border-radius:var(--v-r-sm);background:var(--v-soft);color:var(--v-muted);font-size:14px;line-height:1.5}

@media(max-width:1100px) and (min-width:901px){
  #page-video .v-tabs{gap:12px}
  #page-video .v-search input{width:92px}
  #page-video .v-event{padding:8px}
  #page-video .v-event-title{font-size:12px}
}
@media(max-width:700px){
  #page-video{margin-top:0;padding-bottom:36px}
  #page-video .v-breadcrumb{margin-bottom:16px}
  #page-video .v-heading{align-items:flex-start;gap:12px;margin-bottom:4px}
  #page-video .v-heading h2{font-size:24px;line-height:32px}
  #page-video .v-heading p{font-size:12px;max-width:220px}
  #page-video .v-heading .v-button{padding:8px 8px;font-size:12px}
  #page-video .v-viewbar{flex-wrap:wrap;gap:0}
  #page-video .v-tabs{gap:20px}
  #page-video .v-tools{width:100%;border-top:1px solid var(--v-border);padding:8px 0;gap:8px;transform:none}
  #page-video .v-search{flex:1}
  /* 16px, or iOS Safari zooms the page when the search is focused. */
  #page-video .v-search input{width:100%;font-size:16px}
  #page-video .v-toolbar{padding:12px 0 8px;gap:8px;flex-wrap:wrap}
  #page-video .v-month{font-size:14px;flex-basis:92px;margin-right:4px}
  #page-video .v-month-controls{gap:4px;flex:1}
  #page-video .v-month-controls .v-button{font-size:12px;padding:4px 8px;min-height:28px;margin-left:4px}
  #page-video .v-list-actions .v-control{font-size:12px;padding:0 8px;max-width:140px}
  #page-video #postuKalendars{padding:4px 0 20px}
  #page-video .v-weekdays span{text-align:center;padding:8px 0px;border-right:0}
  #page-video .v-day{min-height:68px;padding:8px 4px;border-right:0}
  #page-video .v-day-top{min-height:28px;justify-content:center;margin:0 0 8px}
  #page-video .v-day-add,#page-video .v-events{display:none}
  #page-video .v-date{width:28px;height:28px;font-size:14px}
  #page-video .v-selected .v-date:not([aria-current]){outline:1px solid var(--v-muted)}
  #page-video .v-mobile-dots{display:flex;align-items:center;justify-content:center;gap:4px;height:8px}
  /* A dot says only that something is planned; the statuses are written out in the day list below. A failed entry
     also differs in shape (a ring), so it does not rely on red alone. */
  #page-video .v-mobile-dots .v-status{font-size:0;gap:0;padding:0;border:0;background:none;color:var(--v-muted)}
  #page-video .v-mobile-dots .v-status[data-tone="red"]{color:var(--error-text)}
  #page-video .v-mobile-dots .v-status[data-tone="red"]::before{width:6px;height:6px;background:none;box-shadow:inset 0 0 0 1.5px currentColor}
  #page-video .v-mobile-dots small{font-size:12px;color:var(--v-muted)}
  #page-video .v-calendar-foot{align-items:flex-start;font-size:12px}
  #page-video .v-calendar-foot>span{max-width:140px;text-align:right}
  /* Date and status take the width they need (a status is one word that cannot wrap); the title wraps in the rest. */
  #page-video .v-table{table-layout:auto}
  #page-video .v-table th:first-child,#page-video .v-table th:nth-child(3){width:1%}
  #page-video .v-row-date{white-space:nowrap}
  #page-video .v-table th:last-child,#page-video .v-table td:last-child{display:none}
  #page-video .v-table :is(th,td){padding:12px 8px}
  #page-video .v-row-title{font-size:12px;gap:4px}
  #page-video .v-row-title .v-icon{display:none}
  #page-video .v-row-title span{white-space:normal;overflow-wrap:anywhere}
  #page-video .v-row-date{font-size:12px}

  #pan .v-collaborator-grid{grid-template-columns:1fr;gap:16px}
  #pan .v-publish-choice select{font-size:16px}
  #pan #pan-tiktok-options .v-tiktok-choices{grid-template-columns:1fr;gap:12px}
  #pan #pan-tiktok-options .v-tiktok-group{padding:16px}
  #pan #pan-linkedin-options .v-linkedin-group{padding:16px}
  #pan #pan-youtube-options .v-youtube-group{padding:16px}
  #page-video .v-options button{min-height:44px}
}

/* On a phone the title column would be a few letters wide, so each row is stacked in source order: date, title, status.
   The header row stays for screen readers only. */
@media(max-width:480px){
  #page-video .v-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #page-video :is(.v-table,.v-table tbody){display:block}
  #page-video .v-table tr{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0;border-bottom:1px solid var(--v-border)}
  #page-video .v-table td{display:block;padding:0;border:0}
  #page-video .v-table td:last-child{display:none}
  #page-video .v-row-date time{display:inline;margin-right:4px}
  #page-video .v-row-title{font-size:14px}
}

@media(prefers-reduced-motion:reduce){
  #page-video *{scroll-behavior:auto!important}
  #video-upload-fill{transition:none}
}

/* An entry being duplicated (Ctrl+D): the original rests while its copy is made. */
#page-video [data-edit][aria-busy="true"]{opacity:.55;cursor:progress;transition:opacity .15s ease}

/* ---------- tags and filming days (shared/content-plan.css draws the controls) ---------- */
/* The list shows an entry's tags under its title, lined up with the title's text (after the 36px thumbnail or the icon). */
#page-video .v-row-tags{margin:6px 0 0 44px;min-width:0}
#page-video .v-row-tags .cp-tag-list{display:flex}
#page-video .v-list-actions .v-tag-filter{display:contents}
@media(max-width:480px){#page-video .v-row-tags{margin-left:0}}