/* Content studio (admin): the writing page, article list, media library and dashboard widget.
   Everything is scoped to studio-* classes so the public site is untouched. */

/* --- Writing page --------------------------------------------------------------------------------- */
.studio { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); margin-block-start: calc(var(--space-4) * -1); }
@media (min-width: 900px) { .studio { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }

.studio-bar { grid-column: 1 / -1; position: sticky; inset-block-start: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-3) 0; background: var(--bg, var(--surface-2)); border-block-end: 1px solid var(--line); }
.studio-bar__back { font-weight: 700; text-decoration: none; }
.studio-bar__save, .studio-bar__count { font-size: var(--step--1); color: var(--ink-2); }
.studio-bar__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-inline-start: auto; }
@media (max-width: 599px) { .studio-bar__count { display: none; } .studio-bar__actions { inline-size: 100%; } .studio-bar__actions .button { flex: 1; } }

.studio__main { display: grid; gap: var(--space-3); background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow-card); padding: var(--space-5); min-inline-size: 0; }
@media (max-width: 599px) { .studio__main { padding: var(--space-4); } }
.studio-title, .studio-dek { inline-size: 100%; border: 0; background: transparent; color: var(--ink); resize: none; overflow: hidden; padding: 0; font-family: inherit; }
.studio-title { font-size: clamp(1.625rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.studio-dek { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
.studio-title:focus, .studio-dek:focus { outline: none; }
.studio-title::placeholder, .studio-dek::placeholder { color: color-mix(in srgb, var(--ink-2) 70%, transparent); }

.studio-toolbar { z-index: 4; background: var(--surface); padding-block: var(--space-2); border-block: 1px solid var(--line); }
@media (min-width: 900px) { .studio-toolbar { position: sticky; inset-block-start: 58px; } }
.studio-toolbar .trix-button-row { flex-wrap: wrap; gap: var(--space-2); overflow: visible; }
.studio-toolbar .trix-button-group { margin: 0 !important; border-color: var(--line); border-radius: var(--radius-s); background: var(--surface); }
.studio-toolbar .trix-button { border-color: var(--line); color: var(--ink); min-block-size: 34px; }
.studio-toolbar .trix-button.trix-active { background: var(--atlas-tint); color: var(--atlas-green); }
.studio-toolbar__text { inline-size: auto !important; padding-inline: var(--space-2) !important; font-size: var(--step--1) !important; font-weight: 700; white-space: nowrap; }
.studio-toolbar__insert .trix-button { color: var(--atlas-green); }
.studio-toolbar .trix-dialog { inset-block-start: 100%; border-radius: var(--radius-m); box-shadow: var(--shadow-pop); background: var(--surface); border-color: var(--line); }
.studio-toolbar .trix-input--dialog { background: var(--surface); color: var(--ink); border-color: var(--line); }
@media (prefers-color-scheme: dark) { .studio-toolbar .trix-button--icon::before { filter: invert(1); } }

.studio-body { min-block-size: min(50vh, 420px); }
.studio-body__loading { color: var(--ink-2); }
.studio-editor { min-block-size: min(50vh, 420px); border: 0 !important; padding: var(--space-2) 0 !important; font-size: 1.0625rem; line-height: 1.7; color: var(--ink); }
.studio-editor:focus { outline: none; }
.studio-editor h2 { font-size: var(--step-2); margin-block: var(--space-4) var(--space-1); }
.studio-editor h3 { font-size: var(--step-1); margin-block: var(--space-3) var(--space-1); }
.studio-editor blockquote { border-inline-start: 3px solid var(--atlas-green); padding-inline-start: var(--space-4); margin-inline: 0; color: var(--ink-2); }
.studio-editor[placeholder]:empty::before { color: var(--ink-2); }
.studio-figure { margin: 0; display: grid; gap: 4px; }
.studio-figure img { max-inline-size: 100%; border-radius: var(--radius-m); }
.studio-figure figcaption, .studio-embed small { font-size: var(--step--1); color: var(--ink-2); }
.studio-embed { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border: 1px dashed var(--atlas-green); border-radius: var(--radius-m); background: var(--atlas-tint); }

/* Side panels */
.studio__side { display: grid; gap: var(--space-3); min-inline-size: 0; }
@media (min-width: 900px) { .studio__side { position: sticky; inset-block-start: 70px; max-block-size: calc(100vh - 80px); overflow-y: auto; padding-block-end: var(--space-4); } }
.studio-panel { background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow-card); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-3); }
.studio-panel > summary { font-weight: 800; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-block-size: 32px; }
.studio-panel > summary::-webkit-details-marker { display: none; }
.studio-panel > summary::after { content: "+"; color: var(--ink-2); font-weight: 400; font-size: 1.25rem; }
.studio-panel[open] > summary::after { content: "–"; }
.studio-field { display: grid; gap: 4px; }
.studio-field label { font-weight: 600; font-size: var(--step--1); }
.studio-field label em { font-style: normal; font-weight: 500; color: var(--loss); font-size: 0.75rem; }
.studio-field input:not([type=checkbox]):not([type=radio]):not([type=file]), .studio-field select, .studio-field textarea, .studio-filters input, .studio-filters select, .studio-select,
.studio-dialog input[type=search], .studio-picker input[type=search] {
  inline-size: 100%; min-block-size: 40px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); color: var(--ink); font: inherit; }
.studio-field textarea { resize: vertical; }
.studio-hint { margin: 0; font-size: var(--step--1); color: var(--ink-2); }
.studio-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.studio-counter { font-size: 0.75rem; color: var(--ink-2); justify-self: end; }
.studio-counter--over { color: var(--loss); font-weight: 700; }
.studio-check-field { display: flex; gap: var(--space-2); align-items: start; font-size: var(--step--1); }
.studio-check-field input { margin-block-start: 3px; inline-size: 18px; block-size: 18px; accent-color: var(--atlas-green); }
.studio-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); font-size: var(--step--1); }
.studio-hidden-form { display: none; }

.studio-checklist { display: grid; gap: var(--space-2); font-size: var(--step--1); margin-block-end: var(--space-2); }
.studio-checklist p { margin: 0; font-weight: 700; }
.studio-checklist__ready { color: var(--atlas-green); }
.studio-checklist__todo { color: var(--loss); }
.studio-checklist ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.studio-check { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-2); align-items: start; }
.studio-check__mark { display: grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: 50%; font-size: 0.75rem; font-weight: 800; }
.studio-check--ok { color: var(--ink-2); }
.studio-check--ok .studio-check__mark { background: var(--atlas-tint); color: var(--atlas-green); }
.studio-check--required .studio-check__mark { background: color-mix(in srgb, var(--loss) 14%, var(--surface)); color: var(--loss); }
.studio-check--advice .studio-check__mark { background: color-mix(in srgb, #D97706 16%, var(--surface)); color: #B45309; }

/* Pickers */
.studio-picker { position: relative; }
.studio-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.studio-chips:empty { display: none; }
.studio-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--atlas-tint); color: var(--atlas-green); font-size: var(--step--1); font-weight: 600; }
.studio-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; inline-size: 24px; block-size: 24px; border-radius: 50%; font-size: 1rem; line-height: 1; }
.studio-chip button:hover { background: color-mix(in srgb, var(--atlas-green) 15%, transparent); }
.studio-results { position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 10; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); max-block-size: 320px; overflow-y: auto; }
.studio-results--static { position: static; box-shadow: none; max-block-size: 50vh; }
.studio-results [role=option], .studio-results button { display: flex; gap: var(--space-2); align-items: center; inline-size: 100%; padding: var(--space-2); border: 0; border-radius: var(--radius-s); background: transparent; color: var(--ink); text-align: start; cursor: pointer; font: inherit; }
.studio-results [role=option]:hover, .studio-results [aria-selected=true], .studio-results button:hover { background: var(--surface-2); }
.studio-results img { inline-size: 28px; block-size: 28px; object-fit: contain; flex: none; }
.studio-results span, .studio-results button { display: grid; }
.studio-results small { color: var(--ink-2); font-size: 0.75rem; }
.studio-results__empty { padding: var(--space-2); color: var(--ink-2); font-size: var(--step--1); }

/* Cover */
.studio-cover { display: grid; place-items: center; gap: var(--space-2); min-block-size: 120px; border: 2px dashed var(--line); border-radius: var(--radius-m); padding: var(--space-2); text-align: center; }
.studio-cover.is-over, .studio-drop.is-over { border-color: var(--atlas-green); background: var(--atlas-tint); }
.studio-cover img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-s); }
.studio-cover__meta, .studio-cover__empty { margin: 0; font-size: var(--step--1); color: var(--ink-2); }

/* Google and sharing previews */
.studio-slug { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 0.75rem; color: var(--ink-2); }
.studio-slug input { flex: 1 1 140px; }
.studio-snippet, .studio-social { display: grid; gap: 2px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2); }
.studio-snippet p, .studio-social p { margin: 0; }
.studio-snippet__label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); margin-block-end: 4px !important; }
.studio-snippet__url { font-size: 0.75rem; color: var(--ink-2); }
.studio-snippet__title { color: #1a0dab; font-size: 1.0625rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .studio-snippet__title { color: #8ab4f8; } }
.studio-snippet__text { font-size: var(--step--1); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.studio-social { padding: 0; overflow: hidden; }
.studio-social img { inline-size: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.studio-social .studio-snippet__label { padding: var(--space-2) var(--space-3) 0; }
.studio-social__site, .studio-social__title, .studio-social__text { padding-inline: var(--space-3); }
.studio-social__site { font-size: 0.6875rem; color: var(--ink-2); padding-block-start: var(--space-2); }
.studio-social__title { font-weight: 700; }
.studio-social__text { font-size: var(--step--1); color: var(--ink-2); padding-block-end: var(--space-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Dialogs */
.studio-dialog { inline-size: min(640px, calc(100vw - 24px)); max-block-size: calc(100vh - 24px); padding: 0; border: 0; border-radius: var(--radius-l); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); }
.studio-dialog::backdrop { background: rgb(15 18 20 / 0.5); }
.studio-dialog__head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-5) 0; }
.studio-dialog__head h2 { font-size: var(--step-2); margin: 0; }
.studio-dialog__close { border: 0; background: transparent; font-size: 1.75rem; cursor: pointer; color: var(--ink-2); inline-size: 44px; block-size: 44px; }
.studio-dialog__body { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-5); }
.studio-tabs { display: flex; gap: var(--space-1); padding: var(--space-3) var(--space-5) 0; border-block-end: 1px solid var(--line); overflow-x: auto; }
.studio-tabs button, .studio-tabs a { border: 0; background: transparent; padding: var(--space-2) var(--space-3); font: inherit; font-weight: 600; color: var(--ink-2); cursor: pointer; border-block-end: 2px solid transparent; text-decoration: none; white-space: nowrap; }
.studio-tabs [aria-selected=true], .studio-tabs [aria-current=page] { color: var(--ink); border-color: var(--atlas-green); }
.studio-tabs--page { padding-inline: 0; margin-block-end: var(--space-4); }
.studio-tabs__count { display: inline-block; min-inline-size: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-3); font-size: 0.75rem; text-align: center; }
.studio-drop { position: relative; display: grid; place-items: center; min-block-size: 160px; border: 2px dashed var(--line); border-radius: var(--radius-m); text-align: center; padding: var(--space-4); cursor: pointer; color: var(--ink-2); }
.studio-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.studio-drop img { max-block-size: 220px; max-inline-size: 100%; border-radius: var(--radius-s); }
.studio-error { margin: 0; color: var(--loss); font-weight: 600; font-size: var(--step--1); }
.studio-segments { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.studio-segments button, .studio-segment { display: inline-flex; align-items: center; gap: 6px; min-block-size: 40px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.studio-segments [aria-pressed=true], .studio-segment:has(input:checked) { border-color: var(--atlas-green); background: var(--atlas-tint); color: var(--atlas-green); }
.studio-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.studio-library button, .studio-library a { display: grid; gap: 4px; inline-size: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; background: var(--surface); color: var(--ink); text-align: start; text-decoration: none; cursor: pointer; font: inherit; }
.studio-library img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.studio-library span, .studio-library small { padding-inline: var(--space-2); font-size: 0.75rem; }
.studio-library small { color: var(--ink-2); padding-block-end: var(--space-2); }
.studio-library--page { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* --- New article -------------------------------------------------------------------------------------- */
.studio-start { display: grid; gap: var(--space-4); max-inline-size: 900px; }
.studio-start fieldset { border: 0; margin: 0; }
.studio-start legend { font-weight: 800; font-size: var(--step-1); margin-block-end: var(--space-2); float: left; inline-size: 100%; }
.studio-start .studio-segment input { accent-color: var(--atlas-green); }
.studio-select { max-inline-size: 320px; }
.studio-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; clear: both; }
.studio-template { display: grid; gap: var(--space-1); inline-size: 100%; block-size: 100%; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2); color: var(--ink); text-align: start; cursor: pointer; font: inherit; align-content: start; }
.studio-template:hover, .studio-template:focus-visible { border-color: var(--atlas-green); background: var(--atlas-tint); }
.studio-template strong { font-size: var(--step-1); }
.studio-template span { color: var(--ink-2); font-size: var(--step--1); }
.studio-template small { color: var(--atlas-green); font-size: 0.75rem; }

/* --- Article list --------------------------------------------------------------------------------------- */
.studio-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-4); align-items: center; }
.studio-filters input, .studio-filters select { inline-size: auto; flex: 1 1 160px; }
.studio-bulk { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding-block-end: var(--space-3); border-block-end: 1px solid var(--line); font-size: var(--step--1); }
.studio-bulk select { min-block-size: 36px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); }
.studio-articles { margin: 0; padding: 0; list-style: none; }
.studio-article { display: grid; grid-template-columns: auto 72px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding-block: var(--space-3); border-block-end: 1px solid var(--line); }
.studio-article > input { inline-size: 18px; block-size: 18px; accent-color: var(--atlas-green); }
.studio-article__thumb { inline-size: 72px; block-size: 48px; border-radius: var(--radius-s); object-fit: cover; }
.studio-article__thumb--empty { display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.studio-article__thumb--empty svg { inline-size: 22px; block-size: 22px; }
.studio-article__title { font-weight: 700; text-decoration: none; color: var(--ink); }
.studio-article__title:hover { text-decoration: underline; }
.studio-article__meta { display: flex; flex-wrap: wrap; gap: 4px var(--space-2); margin: 4px 0 0; font-size: 0.75rem; color: var(--ink-2); align-items: center; }
@media (max-width: 599px) {
  .studio-article { grid-template-columns: auto 56px minmax(0, 1fr); }
  .studio-article__thumb { inline-size: 56px; block-size: 40px; }
  .studio-article > .button { grid-column: 3; justify-self: start; }
}
.studio-pages { display: flex; gap: var(--space-2); justify-content: center; padding-block-start: var(--space-3); }
.studio-empty { text-align: center; justify-items: center; }
.studio-revisions { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.studio-revisions summary { cursor: pointer; }
.studio-revision { padding: var(--space-3); border-radius: var(--radius-m); background: var(--surface-2); margin-block: var(--space-2); }

/* --- Media library ---------------------------------------------------------------------------------------- */
.studio-upload { display: grid; gap: var(--space-3); max-inline-size: 640px; }
.studio-media-edit { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .studio-media-edit { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.studio-media-edit figure { margin: 0; }
.studio-media-edit img { inline-size: 100%; border-radius: var(--radius-m); }

/* --- Dashboard widget -------------------------------------------------------------------------------------- */
.studio-widget__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.studio-widget__counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-3); margin: 0; }
.studio-widget__counts div { padding: var(--space-3); border-radius: var(--radius-m); background: var(--surface-2); }
.studio-widget__counts dt { font-size: var(--step--1); }
.studio-widget__counts dd { margin: 0; font-size: var(--step-3); font-weight: 800; }

/* The hidden attribute wins over the display rules above (dialog tabs, empty states). */
.studio [hidden], .studio-dialog [hidden] { display: none !important; }