/* Local brand typography and monochrome theme accents. */
:root{--news-input-background:var(--news-background)}
@font-face{
 font-family:"Fjalla One";
 font-style:normal;
 font-weight:400;
 font-display:swap;
 src:url("../fonts/fjalla-one-latin.woff2") format("woff2");
}
@font-face{
 font-family:Roboto;
 font-style:normal;
 font-weight:100 900;
 font-stretch:100%;
 font-display:swap;
 src:url("../fonts/roboto-latin.woff2") format("woff2");
}
:root{
 --font-body:Roboto,Inter,Arial,sans-serif;
 --font-heading:"Fjalla One",Inter,Arial,sans-serif;
 --accent-color:#000;
 --accent-contrast:#fff;
 --accent-soft:#fff;
 --accent-shadow:#00000026;
 --ui-focus:var(--accent-color);
 --ui-focus-ring:#0000004d;
 font-family:var(--font-body);
}
h1,h2,h3,h4,h5,h6,
.card-text>b,.detail>b{
 font-family:var(--font-heading);
 font-weight:400;
}
header,header *{font-family:var(--font-heading)}
.detail .content{color:#667085}

/* Light theme: black accents. */
.brand b,header nav a,.detail footer a,.attachment-bar a,.card-file b,
header nav .nav-button,.icon-button,.admin-eyebrow,.admin-summary strong,
.admin-panel-icon,.saml-endpoints a,.saml-endpoints code,.schedule-action{
 color:var(--accent-color);
}
button,.filter-apply,.target-chip input:checked+span{
 background:var(--accent-color);
 color:var(--accent-contrast);
}
.card:hover,.card.active,.page-number.active,.edit-button,
.target-chip input:checked+span{
 border-color:var(--accent-color);
}
.page-number.active,.edit-button{color:var(--accent-color)}
.card.active{border-width:4px;box-shadow:0 8px 24px var(--accent-shadow)}
.icon-button:hover{border-color:var(--accent-color);background:var(--accent-soft)}
.admin-panel-icon{background:var(--accent-soft)}
.saml-toggle input,.filter-option input{accent-color:var(--accent-color)}

/* Dark theme: black page background and white accents. */
html[data-theme=dark]{
 --accent-color:#fff;
 --accent-contrast:#000;
 --accent-soft:#000;
 --accent-shadow:#ffffff38;
 --ui-focus:var(--accent-color);
 --ui-focus-ring:#ffffff59;
 background:#000;
}
html[data-theme=dark] body{background:#000}
html[data-theme=dark] header,
html[data-theme=dark] .card,
html[data-theme=dark] .detail,
html[data-theme=dark] .detail footer,
html[data-theme=dark] .admin-summary,
html[data-theme=dark] .admin-panel,
html[data-theme=dark] .admin-form,
html[data-theme=dark] form.editor,
html[data-theme=dark] .attachment,
html[data-theme=dark] .card-file,
html[data-theme=dark] .fallback-picture,
html[data-theme=dark] .detail-media>.attachment,
html[data-theme=dark] .detail-media>.media-launcher,
html[data-theme=dark] .detail-media>.preview-media,
html[data-theme=dark] .filter-popover,
html[data-theme=dark] .filter-popover select,
html[data-theme=dark] .schedule-popover,
html[data-theme=dark] input,
html[data-theme=dark] textarea,
html[data-theme=dark] select,
html[data-theme=dark] fieldset,
html[data-theme=dark] .admin-panel-icon,
html[data-theme=dark] .admin-count,
html[data-theme=dark] .admin-group-icon,
html[data-theme=dark] .admin-message,
html[data-theme=dark] .admin-status,
html[data-theme=dark] .saml-toggle,
html[data-theme=dark] .saml-endpoints,
html[data-theme=dark] .storage-note,
html[data-theme=dark] .target-chip span,
html[data-theme=dark] .admin-pencil,
html[data-theme=dark] .admin-inline-cancel,
html[data-theme=dark] .preview-media{background:#000}
html[data-theme=dark] .brand b,
html[data-theme=dark] header nav a,
html[data-theme=dark] .detail footer a,
html[data-theme=dark] .attachment-bar a,
html[data-theme=dark] .card-file b,
html[data-theme=dark] header nav .nav-button,
html[data-theme=dark] .icon-button,
html[data-theme=dark] .admin-eyebrow,
html[data-theme=dark] .admin-summary strong,
html[data-theme=dark] .admin-panel-icon,
html[data-theme=dark] .saml-endpoints a,
html[data-theme=dark] .saml-endpoints code,
html[data-theme=dark] .schedule-action{color:var(--accent-color)}
html[data-theme=dark] button,
html[data-theme=dark] .filter-apply,
html[data-theme=dark] .target-chip input:checked+span{
 background:#000;
 color:#fff;
}
html[data-theme=dark] .icon-button,
html[data-theme=dark] .nav-button,
html[data-theme=dark] .edit-button,
html[data-theme=dark] .delete-button,
html[data-theme=dark] .schedule-action,
html[data-theme=dark] .page-arrow,
html[data-theme=dark] .page-number{background:#000}
html[data-theme=dark] .card:hover,
html[data-theme=dark] .card.active,
html[data-theme=dark] .page-number.active,
html[data-theme=dark] .edit-button,
html[data-theme=dark] .target-chip input:checked+span{border-color:var(--accent-color)}
html[data-theme=dark] .page-number.active,
html[data-theme=dark] .edit-button{color:var(--accent-color)}
html[data-theme=dark] .detail .content{color:#94a3b8}
html[data-theme=dark] .card.active{box-shadow:0 8px 28px var(--accent-shadow)}
html[data-theme=dark] .icon-button:hover{
 border-color:var(--accent-color);
 background:var(--accent-soft);
}
html[data-theme=dark] .admin-panel-icon{background:var(--accent-soft)}

/* Keep destructive and status controls semantic instead of treating them as accents. */
.delete-button,.schedule-delete{background:#fff;color:#d92d20}
html[data-theme=dark] .delete-button,
html[data-theme=dark] .schedule-delete{background:#000;color:#fda29b}
.icon-button.filter-active{border-color:#079455;background:#12b76a;color:#fff}
.icon-button.filter-active:hover{border-color:#067647;background:#079455;color:#fff}
html[data-theme=dark] .icon-button.filter-active,
html[data-theme=dark] .icon-button.filter-active:hover{
 border-color:#fff;
 background:#000;
 color:#fff;
}
html[data-theme=dark] .search-control .search-active,
html[data-theme=dark] .search-control .search-active:hover{
 border-color:#fff;
 background:#000;
 color:#fff;
}
.filter-save{border-color:#079455;background:#fff;color:#067647}
.filter-save:hover{background:#ecfdf3;color:#05603a}
.filter-cancel,.filter-delete{border-color:#d92d20;background:#fff;color:#b42318}
.filter-cancel:hover,.filter-delete:hover{background:#fff1f0;color:#912018}
.filter-action:disabled,.filter-action:disabled:hover{border-color:#cbd5e1!important;background:#f2f4f7!important;color:#98a2b3!important;cursor:not-allowed;opacity:.72}
html[data-theme=dark] .filter-save{border-color:#12b76a;background:#000;color:#a7f3d0}
html[data-theme=dark] .filter-save:hover{background:#052e24;color:#d1fadf}
html[data-theme=dark] .filter-cancel,
html[data-theme=dark] .filter-delete{border-color:#f97066;background:#000;color:#fda29b}
html[data-theme=dark] .filter-cancel:hover,
html[data-theme=dark] .filter-delete:hover{background:#450a0a;color:#fecaca}
html[data-theme=dark] .filter-action:disabled,
html[data-theme=dark] .filter-action:disabled:hover{border-color:#475569!important;background:#111827!important;color:#667085!important}
html[data-theme=dark] .media-open{
 border:0;
 background:transparent;
}
html[data-theme=dark] .edit-button:hover,
html[data-theme=dark] .admin-pencil:hover{
 border-color:#fff;
 background:#000;
 color:#fff;
}
html[data-theme=dark] .filter-option:hover{background:#000}

/* The fullscreen viewer is neutral black in both themes. */
.attachment img,.attachment video,.attachment iframe,
.media-modal,.media-modal::backdrop,.media-modal-tools,
.media-modal-tools button{background:#000}

/* Selected audiences keep a green outline in both themes. */
.target-chip input:checked+span,
html[data-theme=dark] .target-chip input:checked+span{border-color:#079455;box-shadow:0 4px 12px #07945526}
html:not([data-theme=dark]) .target-chip input:checked+span{background:#fff;color:#101828}

/* Dropdown selections use outlines only; hover changes text only. */
.filter-option{margin:1px 0;padding:7px 9px;border:2px solid transparent}
.filter-option:hover{background:#fff;color:#079455}
.filter-option.active{border-color:#079455;background:#fff;color:#344054;font-weight:400}
.editor-category-popover .editor-category-option{margin:1px 0;padding:7px 9px;border:2px solid transparent}
.editor-category-popover .editor-category-option:hover{background:#fff;color:#079455}
.editor-category-popover .editor-category-option.active{border-color:#079455;background:#fff;color:#344054;font-weight:400}
html[data-theme=dark] .filter-option:hover,
html[data-theme=dark] .editor-category-popover .editor-category-option:hover{background:#000;color:#a7f3d0}
html[data-theme=dark] .filter-option.active,
html[data-theme=dark] .editor-category-popover .editor-category-option.active{border-color:#079455;background:#000;color:#cbd5e1;font-weight:400}
html:not([data-theme=dark]) .filter-option:hover,
html:not([data-theme=dark]) .editor-category-popover .editor-category-option:hover{color:#000}
html[data-theme=dark] .filter-option:hover,
html[data-theme=dark] .editor-category-popover .editor-category-option:hover{color:#fff}

/* Configurable Light/Dark color roles. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.admin-theme-colors{margin-bottom:24px}
.theme-colors-form{padding:24px}
.theme-color-grid{display:grid;gap:9px}
.theme-color-header,.theme-color-row{display:grid;grid-template-columns:minmax(180px,.8fr) repeat(2,minmax(220px,1fr));gap:14px;align-items:center}
.theme-color-header{padding:0 2px 7px;color:var(--news-muted-text);font-size:12px;font-weight:800;text-transform:uppercase}
.theme-color-row{padding:9px 0;border-top:1px solid var(--news-border)}
.theme-color-row>strong{color:var(--news-text);font-size:13px}
.theme-color-control{display:grid!important;grid-template-columns:48px minmax(0,1fr);gap:8px!important;margin:0!important;align-items:center}
.theme-color-control input[type=color]{width:48px;height:42px;padding:4px;cursor:pointer}
.theme-color-value{width:100%;height:42px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}
.theme-colors-note{margin:16px 0 0;color:var(--news-muted-text);font-size:13px}
.theme-colors-note code{color:var(--news-text)}

:root,html[data-theme=dark]{--ui-outline:var(--news-border)}
html,body{background-color:var(--news-background)!important;color:var(--news-text)!important}
header,.card,.detail,.detail footer,form.editor,
.admin-summary,.admin-panel,.admin-form,.saml-toggle,.saml-endpoints,.storage-note,
.filter-popover,.schedule-popover,.attachment,.card-file,
input,textarea,select,fieldset{background-color:var(--news-background)!important}
header,.card,.detail,.detail footer,form.editor,
.admin-summary,.admin-panel,.admin-panel-header,.admin-item,.admin-form,
.saml-toggle,.saml-endpoints,.storage-note,.filter-popover,.schedule-popover,
.attachment,.card-file,input,textarea,select,fieldset,.icon-button,
.page-arrow,.page-number{border-color:var(--news-border)!important}
body,.card,.detail,form.editor,.admin-panel,input,textarea,select{color:var(--news-text)!important}
h1,h2,h3,.card h2,.detail h2,.admin-panel-header h2,.admin-form-title h3{color:var(--news-title)!important}
.card:hover,.card.active{border-color:var(--news-active-border)!important}
.card p,.detail .content,.lead,.form-preview .content{color:var(--news-section-text)!important}
.card time,.detail footer>span:first-child,.schedule-title time,
.admin-heading p,.admin-panel-header p,.admin-form-title p,.admin-summary span,
.admin-item code,.admin-item-name small,.admin-empty,.target-chips p,
.theme-color-header,.theme-colors-note{color:var(--news-muted-text)!important}

/* Match the article detail edit icon to the header icon color. */
.detail-actions .edit-button{border-color:var(--news-border)!important;color:var(--accent-color)!important}

/* Match every edit action to the header and pagination hover feedback. */
.detail-actions .edit-button,
.schedule-action:not(.schedule-delete),
.admin-pencil{
 transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.detail-actions .edit-button:hover,
.schedule-action:not(.schedule-delete):hover,
.admin-pencil:hover{
 border-color:var(--news-active-border)!important;
 background-color:var(--news-active-border)!important;
 color:var(--news-background)!important;
}

/* Inline admin editors use their existing outline as the active indicator. */
.admin-inline-edit .admin-inline-name:focus,
.admin-inline-edit .admin-inline-name:focus-visible{
 border-color:var(--news-active-border)!important;
 outline:0;
 box-shadow:none;
}

/* A focused framed control uses its own border; never draw a second ring. */
:root,html[data-theme=dark]{--ui-focus:var(--news-active-border)}
.admin-form input:focus,
.admin-form select:focus,
.saml-fields input:focus,
.theme-color-control input:focus,
.admin-inline-edit input:not([type=color]):focus,
.admin-inline-edit select:focus{
 border-color:var(--news-active-border)!important;
 outline:0!important;
 box-shadow:none!important;
}
.editor-field:focus-within,
.admin-inline-color:focus-within,
.admin-lock-toggle:has(input:focus-visible){
 border-color:var(--news-active-border)!important;
 outline:0!important;
 box-shadow:none!important;
}
.target-chip input:focus-visible+span{
 border-color:var(--news-active-border)!important;
 outline:0;
}
.editor-category-option:focus-visible{
 border-color:var(--news-active-border)!important;
 outline:0!important;
 box-shadow:none;
}
.card:focus-visible,
.icon-button:focus-visible,
.page-arrow:focus-visible,
.page-number:focus-visible,
.edit-button:focus-visible,
.delete-button:focus-visible,
.schedule-action:focus-visible,
.filter-action:focus-visible,
.admin-pencil:focus-visible,
.admin-inline-action:focus-visible,
.admin-icon-submit:focus-visible,
.editor-heading-action:focus-visible,
.media-modal-tools button:focus-visible{
 border-color:var(--news-active-border)!important;
 outline:0!important;
 box-shadow:none;
}

@media(max-width:720px){
 .theme-colors-form{padding:18px}
 .theme-color-header{display:none}
 .theme-color-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .theme-color-row>strong{grid-column:1/-1}
 .theme-color-control{grid-template-columns:42px minmax(0,1fr)}
 .theme-color-control input[type=color]{width:42px}
 .theme-color-row .theme-color-control:nth-of-type(1)::before{content:"Light Mode"}
 .theme-color-row .theme-color-control:nth-of-type(2)::before{content:"Dark Mode"}
 .theme-color-control::before{grid-column:1/-1;color:var(--news-muted-text);font-size:10px;font-weight:800;text-transform:uppercase}
}
@media(max-width:480px){
 .theme-color-row{grid-template-columns:1fr}
 .theme-color-row>strong{grid-column:auto}
}

/* Cross-browser containment: native controls and grid/flex children stay inside their outlines. */
form,fieldset,label,.editor-layout,.editor-column,.editor-control,.editor-category,
.target-groups,.admin-form>*,.saml-fields>*,.theme-color-row>*,.theme-color-control>*{
 min-width:0;
 min-inline-size:0;
 max-width:100%;
 max-inline-size:100%;
}
input,textarea,select{
 min-width:0;
 min-inline-size:0;
 max-width:100%;
 max-inline-size:100%;
}
img,video,iframe,object,svg{max-width:100%}
textarea{resize:vertical}
.editor-control{
 width:100%;
 inline-size:100%;
 overflow:hidden;
}
.editor-control>input,.editor-control>select{
 display:block;
 width:100%;
 inline-size:100%;
 min-width:0;
 min-inline-size:0;
 max-width:100%;
 max-inline-size:100%;
 overflow:hidden;
 text-overflow:ellipsis;
}
.editor-date-control input::-webkit-date-and-time-value,
.editor-date-control input::-webkit-datetime-edit{
 min-width:0;
 max-width:100%;
 overflow:hidden;
}
.editor-file-control input[type=file]{white-space:nowrap;text-overflow:ellipsis}
.editor-category-popover{left:0;width:100%;max-width:100%}
.filter-popover,.filter-options{width:min(260px,calc(100vw - 24px));max-width:calc(100vw - 24px)}
.filter-popover select{width:100%;min-width:0;max-width:100%}
.schedule-popover{max-width:calc(100vw - 24px)}
.admin-inline-edit>*,.admin-delete-replacement>*{min-width:0;max-width:100%}
@media(max-width:520px){
 .filter-popover{position:fixed;top:var(--filter-mobile-top,80px);right:auto;left:50%;transform:translateX(-50%)}
}
.mobile-mode header.search-expanded{padding-bottom:64px}
.mobile-mode header nav{position:relative;width:fit-content;max-width:100%}
.mobile-mode .search-control{position:static}
.mobile-mode .search-field{position:absolute;z-index:5;top:calc(100% + 12px);right:0;left:0;width:100%;visibility:hidden;opacity:0;transition:opacity .18s ease}
.mobile-mode .search-control.open .search-field{width:100%;visibility:visible;opacity:1}
.mobile-mode .search-field input{width:100%}

/* Clearly visible, flat hover feedback for header and pagination controls. */
.icon-button,
.pagination a.page-arrow,
.pagination a.page-number{
 transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.icon-button:hover,
.pagination a.page-arrow:hover,
.pagination a.page-number:hover{
 border-color:var(--news-active-border)!important;
 background-color:var(--news-active-border)!important;
 color:var(--news-background)!important;
}
/* Audience chips use color; filter options keep their surface neutral. */
.filter-option,
.target-chip span{
 transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.target-chip:hover span{
 border-color:var(--news-active-border)!important;
 background-color:var(--news-active-border)!important;
 color:var(--news-background)!important;
}
.filter-option:hover{border-color:transparent!important;background:transparent!important;color:var(--news-text)!important}
.filter-option.active,.filter-option.active:hover{border-color:#079455!important;background:transparent!important;color:var(--news-text)!important}

/* Article editor sections use the active-card outline on hover. */
.editor-field,
.target-groups{
 transition:border-color .16s ease;
}
.editor-field:hover,
.target-groups:hover{
 border-color:var(--news-active-border)!important;
}
/* Configurable tile grids in the administration. */
.admin-layouts{margin-bottom:24px}
.admin-display-control{margin-bottom:24px}
.display-reload-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:24px}
.display-reload-actions form{margin:0;padding:0;background:none}
.display-reload-button{display:flex;width:100%;min-height:54px;align-items:center;justify-content:center;gap:10px;border:2px solid var(--news-border);border-radius:10px;background:var(--news-background);color:var(--news-text);font-weight:800;cursor:pointer}
.display-reload-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.display-reload-button:hover{border-color:var(--news-active-border);background:var(--news-active-border);color:var(--news-background)}
@media(max-width:600px){.display-reload-actions{grid-template-columns:1fr;padding:18px}}
.layout-settings-form{padding:24px}
.layout-settings-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.layout-setting{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:16px}
.layout-setting legend{padding:0 7px;font-weight:700}
.layout-setting label{display:grid;gap:6px;margin:0}
.layout-setting label span{color:var(--news-title);font-size:13px;font-weight:700}
.layout-setting input{width:100%;height:42px}
.layout-setting small{color:var(--news-muted-text);font-size:11px}
.layout-setting>strong{grid-column:1/-1;color:var(--news-section-text);font-size:12px}
@media(max-width:1100px){.layout-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.layout-settings-form{padding:18px}.layout-settings-grid{grid-template-columns:minmax(0,1fr)}}


/* Current page uses the selected card outline without becoming a disabled control. */
.pagination .page-number.active{
 border:4px solid var(--news-active-border)!important;
 box-shadow:0 8px 24px var(--accent-shadow);
 cursor:default;
}
html[data-theme=dark] .pagination .page-number.active{
 box-shadow:0 8px 28px var(--accent-shadow);
}

/* Keep the mobile logo, navigation and separating border visible while scrolling. */
body.mobile-mode>header{position:sticky;top:0;z-index:40}
@media(max-width:1190px){
 body:not(.display-mode)>header{position:sticky;top:0;z-index:40}
}

/* Let the separator scroll naturally while the logo remains at its original position. */
html.mobile-header-scroll body>header{top:calc(-1 * var(--mobile-header-travel,0px))}
html.mobile-header-scroll body>header>.brand{position:sticky;top:var(--mobile-logo-top,14px)}
header.navigation-scrolled-away>nav,
header.navigation-scrolled-away>nav *{visibility:hidden!important;pointer-events:none!important}
body>header.navigation-measure>nav{display:none!important}
body>header.navigation-measure.search-expanded{padding-bottom:14px}

/* Header state follows the open panel, including on touch devices. */
html body header .icon-button:is(:hover,:not(:hover)){
 background:var(--news-background)!important;color:var(--accent-color)!important;
 border-color:var(--news-border)!important;
}
@media(hover:hover) and (pointer:fine){
 html body header .icon-button:hover:not(:disabled){border-color:var(--news-active-border)!important}
}
html body header .icon-button:focus-visible{border-color:var(--news-active-border)!important}
html body header .icon-button:is(.filter-active,.search-active){
 border-color:#079455!important;color:#079455!important;
}
html body header .icon-button[aria-expanded=true]{
 border-color:var(--news-active-border)!important;
 background:var(--news-active-border)!important;color:var(--news-background)!important;
}

/* Preserve the full hover treatment for a mouse; touch keeps panel state only. */
@media(hover:hover) and (pointer:fine){
 html body header .icon-button:hover:not(:disabled){
  border-color:var(--news-active-border)!important;
  background:var(--news-active-border)!important;color:var(--news-background)!important;
 }
 html:not([data-theme=dark]) .theme-toggle:hover .theme-icon-moon{display:none}
 html:not([data-theme=dark]) .theme-toggle:hover .theme-icon-sun{display:block}
 html[data-theme=dark] .theme-toggle:hover .theme-icon-moon{display:block}
 html[data-theme=dark] .theme-toggle:hover .theme-icon-sun{display:none}
}