with no child, while the SPA fills it
with the crest / ministry image. Paint the imperial crest as a
background ONLY when the seal is empty (:empty), so SPA seals that
contain an
![]()
child are left untouched. */
.official-seal:empty {
background-image: url("/assets/coats-of-arms/Imperial_Coat_of_Arms_Totemia.png");
background-size: 60px 60px;
background-position: center;
background-repeat: no-repeat;
}
/* Government-account Operations tab (Next port of the SPA transfer/print). */
.ops-mode-toggle {
display: inline-flex;
gap: 6px;
margin: 4px 0 16px;
padding: 4px;
border: 1px solid var(--totemia-line);
border-radius: 10px;
background: var(--surface-2);
}
.ops-mode-pill {
appearance: none;
border: 0;
background: transparent;
color: var(--totemia-muted);
font-weight: 800;
font-size: 13px;
padding: 8px 16px;
border-radius: 7px;
cursor: pointer;
box-shadow: none;
}
.ops-mode-pill.active { background: var(--totemia-green); color: #fff; }
.ops-from-line {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
margin-bottom: 14px;
border: 1px solid var(--totemia-line);
border-radius: 10px;
background: var(--surface-2);
}
.ops-from-line span {
font-size: 10px;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--totemia-muted);
}
.ops-from-line strong { font-family: var(--mono); font-weight: 800; color: var(--totemia-ink); }
.ops-auth-line { margin: 12px 0; font-size: 12px; color: var(--totemia-muted); }
.ops-submit {
appearance: none;
border: 1px solid var(--gold-deep);
border-radius: 8px;
background: var(--totemia-gold);
color: #1a1000;
font-weight: 900;
font-size: 14px;
padding: 12px 22px;
cursor: pointer;
transition: filter .1s linear;
}
.ops-submit:hover:not(:disabled) { filter: brightness(.97); }
.ops-submit:disabled { opacity: .5; cursor: not-allowed; }
/* Native select styled to match portal controls (Next map viewers, etc.). */
select.official-select {
appearance: none;
-webkit-appearance: none;
margin: 0;
border: 1px solid var(--line, #e3e6ea);
border-radius: 8px;
background-color: var(--surface, #ffffff);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235b636c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M1.5 2.25L6 6.25l4.5-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding: 8px 34px 8px 12px;
min-height: 36px;
min-width: min(200px, 100%);
font-family: inherit;
font-size: 13px;
font-weight: 700;
color: var(--ink, #14171a);
cursor: pointer;
box-shadow: var(--shadow-xs, 0 1px 3px rgba(0, 0, 0, .06));
transition: border-color .12s ease, box-shadow .12s ease;
}
select.official-select:hover {
border-color: var(--gold-border, #e0cd84);
}
select.official-select:focus {
outline: none;
border-color: var(--gold, #c4981f);
box-shadow: 0 0 0 2px rgba(196, 152, 31, .22);
}
@media (prefers-reduced-motion: reduce) {
select.official-select { transition: none; }
}
/* Laws readability pass. This layers over 13-laws.css without introducing
* a separate visual system.
*/
.laws-category-card,
.law-document-header,
.law-document-content,
.law-toc-sidebar,
.laws-search-sidebar,
.laws-search-result,
.laws-access-section {
box-shadow: none;
border-radius: 8px;
}
.laws-category-grid {
gap: 14px;
}
.laws-category-card {
padding: 18px 18px 16px;
transition: border-color .15s ease, background .15s ease;
}
.laws-category-card::before {
display: none;
}
.laws-category-card:hover {
transform: none;
box-shadow: none;
border-color: var(--totemia-gold);
background: #ffffff;
}
.laws-category-card-title,
.laws-category-card h2 {
font-size: 18px;
line-height: 1.3;
letter-spacing: 0;
}
.laws-category-card-tagline,
.laws-category-card p {
font-size: 13px;
line-height: 1.6;
}
.laws-category-card-cta {
letter-spacing: 0;
}
.law-type-badge {
border-radius: 3px;
letter-spacing: .06em;
}
.laws-access-section {
margin-top: 20px;
background: var(--totemia-paper);
border: 1px solid var(--totemia-line);
padding: 16px 18px;
}
.laws-access-section .official-section-head {
margin-bottom: 10px;
}
.laws-search-input:focus {
box-shadow: none;
outline: 2px solid rgba(196, 152, 31, .3);
outline-offset: 1px;
}
.law-document-header h1 {
font-size: 26px;
line-height: 1.25;
letter-spacing: 0;
}
.law-document-summary {
max-width: 840px;
}
.law-download-row {
align-items: flex-start;
}
.law-download-menu {
position: relative;
flex: 0 0 auto;
}
.law-download-toggle {
display: inline-flex;
align-items: center;
gap: 7px;
list-style: none;
}
.law-download-toggle::-webkit-details-marker {
display: none;
}
.law-download-options {
position: absolute;
z-index: 20;
top: calc(100% + 6px);
left: 0;
min-width: 210px;
background: var(--totemia-paper);
border: 1px solid var(--totemia-line);
border-radius: 8px;
padding: 6px;
}
.law-download-option {
display: grid;
gap: 1px;
padding: 8px 10px;
border-radius: 6px;
color: var(--totemia-ink);
text-decoration: none;
}
.law-download-option:hover {
background: rgba(196, 152, 31, .1);
color: var(--totemia-green);
}
.law-download-option span {
font-weight: 800;
font-size: 13px;
}
.law-download-option small {
color: var(--totemia-muted);
font-size: 11px;
}
.law-body {
font-size: 15px;
line-height: 1.72;
}
.law-body h1,
.law-body .law-chapter {
font-size: 21px;
letter-spacing: .02em;
max-width: none;
}
.law-body h2,
.law-body .law-section {
border-left-width: 3px;
border-radius: 0 3px 3px 0;
}
.law-toc-item--h1 > a,
.laws-filter-marker,
.imperial-order-id {
font-family: inherit;
}
.laws-filter-marker {
width: 12px;
height: 12px;
border: 1px solid var(--totemia-gold);
border-radius: 3px;
flex: 0 0 auto;
}
.laws-filter-link.active .laws-filter-marker {
background: var(--totemia-gold);
}
.laws-search-summary {
box-shadow: none;
}
.laws-search-result {
padding: 0;
overflow: hidden;
transition: border-color .15s ease, background .15s ease;
}
.laws-search-result:hover {
transform: none;
background: #ffffff;
}
.laws-search-result-link {
display: grid;
gap: 6px;
padding: 14px 18px;
color: inherit;
text-decoration: none;
}
.laws-search-result-title {
color: var(--totemia-green);
margin-bottom: 0;
}
.laws-search-result-section {
color: var(--totemia-muted);
font-size: 12px;
font-weight: 800;
}
.laws-search-result-snippet {
display: block;
}
.laws-search-result-link:hover .laws-search-result-title {
text-decoration: underline;
}
.publication-landing .official-section,
.publication-detail {
box-shadow: none;
}
.publication-landing {
width: min(1320px, 100%);
}
.publication-filter-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 18px;
}
.publication-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
.publication-result {
position: relative;
display: grid;
grid-template-rows: 1fr auto;
margin: 0;
border-top: 5px solid var(--totemia-gold);
background: #ffffff;
}
.publication-result-link {
grid-template-rows: auto 1fr;
gap: 0;
height: 100%;
padding: 0;
}
.publication-result-media {
display: block;
height: 170px;
border-bottom: 1px solid var(--totemia-line);
background: var(--surface-2);
}
.publication-result-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.publication-result-main {
display: grid;
align-content: start;
gap: 8px;
padding: 16px 18px 18px;
}
.publication-result-actions {
border-top: 1px solid var(--totemia-line);
padding: 10px 18px 14px;
}
.publication-timeline-count {
display: block;
margin-top: 8px;
color: var(--totemia-green);
font-size: 12px;
font-weight: 800;
}
.publication-project-finder {
margin-bottom: 18px;
}
.publication-project-list {
display: grid;
gap: 1px;
border: 1px solid var(--totemia-line);
background: var(--totemia-line);
}
.publication-project-link {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 14px;
padding: 13px 14px;
background: var(--totemia-paper);
color: var(--totemia-ink);
text-decoration: none;
}
.publication-project-link strong {
min-width: 0;
color: var(--totemia-green);
font-size: 14px;
}
.publication-project-link span,
.publication-project-link small {
color: var(--totemia-muted);
font-size: 12px;
}
.publication-project-link small {
grid-column: 1 / -1;
}
.publication-breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 7px;
align-items: center;
width: min(1240px, calc(100vw - 32px));
margin: 0 auto 14px;
color: var(--totemia-muted);
font-size: 13px;
}
.publication-breadcrumb span:last-child {
color: var(--totemia-ink);
font-weight: 800;
}
.publication-detail {
width: min(1240px, calc(100vw - 32px));
margin-inline: auto;
overflow: hidden;
border-top: 6px solid var(--totemia-gold);
}
.publication-cover {
margin: 0;
border-bottom: 1px solid var(--totemia-line);
background: var(--surface-2);
}
.publication-cover img {
display: block;
width: 100%;
max-height: 460px;
object-fit: cover;
}
.publication-document-header {
border: 0;
border-bottom: 1px solid var(--totemia-line);
border-radius: 0;
margin: 0;
padding: clamp(22px, 4vw, 42px) clamp(22px, 5vw, 58px);
}
.publication-detail-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: start;
}
.publication-detail-kicker {
display: inline-block;
border-left: 4px solid var(--totemia-gold);
padding-left: 10px;
color: var(--totemia-green);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.publication-document-header h1 {
max-width: 980px;
margin-top: 12px;
font-size: clamp(2.1rem, 5vw, 4rem);
line-height: .98;
}
.publication-body-section {
padding: clamp(28px, 4vw, 50px) clamp(22px, 5vw, 58px);
}
.publication-body:empty::before {
content: "No body text provided.";
color: var(--totemia-muted);
}
.publication-body {
width: min(100%, 1040px);
font-size: 18px;
line-height: 1.78;
}
.publication-body .publication-align-center {
text-align: center;
}
.publication-body .publication-align-right {
text-align: right;
}
.publication-body .publication-align-justify {
text-align: justify;
}
.publication-inline-image {
display: grid;
gap: 7px;
margin: 20px 0;
}
.publication-inline-image img {
width: 100%;
max-height: 560px;
object-fit: contain;
border: 1px solid var(--totemia-line);
background: var(--surface-2);
}
.publication-inline-image figcaption {
color: var(--totemia-muted);
font-size: 12px;
}
.publication-image-left {
float: left;
width: min(42%, 360px);
margin: 6px 22px 16px 0;
}
.publication-image-right {
float: right;
width: min(42%, 360px);
margin: 6px 0 16px 22px;
}
.publication-image-center {
width: min(100%, 760px);
margin-inline: auto;
}
.publication-image-wide {
width: 100%;
}
.publication-downloads .record-actions {
align-items: flex-start;
}
.publication-downloads .official-link-button {
max-width: 100%;
overflow-wrap: anywhere;
}
.publication-timeline {
margin-top: 20px;
}
.publication-timeline.horizontal {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(240px, 1fr);
gap: 14px;
overflow-x: auto;
padding-bottom: 8px;
}
.publication-timeline.horizontal .history-story {
min-width: 240px;
border-left: 3px solid var(--totemia-gold);
padding-left: 14px;
}
.publication-timeline.horizontal .history-story-node {
display: none;
}
.publication-timeline-image {
display: block;
width: min(100%, 640px);
margin-top: 12px;
border: 1px solid var(--totemia-line);
border-radius: 6px;
background: var(--surface-2);
}
.publication-workspace-panel {
display: grid;
gap: 18px;
}
.interior-workspace-content form.publication-editor-form,
form.publication-editor-form {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 14px;
width: min(100%, 920px);
max-width: 100%;
padding-top: 16px;
border-top: 1px solid var(--totemia-line);
}
.publication-editor-grid,
.publication-timeline-draft {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.publication-editor-grid .wide,
.publication-timeline-draft .wide,
.publication-editor-form .official-section-head,
.publication-timeline-editor,
.publication-timeline-draft .record-actions {
grid-column: 1 / -1;
}
.publication-editor-form label,
.publication-timeline-draft label {
display: grid;
gap: 6px;
min-width: 0;
color: var(--totemia-ink);
font-weight: 800;
}
.publication-editor-form input,
.publication-editor-form select,
.publication-editor-form textarea {
width: 100%;
min-width: 0;
border: 1px solid var(--totemia-line);
border-radius: 6px;
background: var(--totemia-paper);
color: var(--totemia-ink);
font: inherit;
font-weight: 500;
padding: 9px 10px;
}
.publication-editor-form textarea {
min-height: 112px;
resize: vertical;
}
.publication-timeline-editor {
display: grid;
gap: 12px;
}
.publication-timeline-draft {
padding: 12px 0;
border-top: 1px solid var(--totemia-line);
}
.publication-timeline-image-upload {
display: grid;
gap: 8px;
align-content: start;
font-weight: 900;
}
.publication-publisher-error {
margin: 0;
color: #8f1f1f;
font-weight: 800;
}
.publication-publisher-result {
margin: 0;
color: var(--totemia-green);
font-weight: 800;
}
.publication-upload-progress {
height: 8px;
overflow: hidden;
border: 1px solid var(--totemia-line);
border-radius: 999px;
background: var(--surface-2);
}
.publication-upload-progress span {
display: block;
height: 100%;
background: var(--totemia-gold);
}
.publication-studio {
display: grid;
gap: 18px;
}
.publication-studio-head,
.publication-studio-layout,
.publication-timeline-grid {
display: grid;
gap: 16px;
}
.publication-studio-head {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
}
.publication-save-state {
border-left: 3px solid var(--totemia-muted);
padding: 3px 0 3px 10px;
color: var(--totemia-muted);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
}
.publication-save-state.saving {
border-left-color: var(--totemia-gold);
color: var(--totemia-gold);
}
.publication-save-state.saved {
border-left-color: var(--totemia-green);
color: var(--totemia-green);
}
.publication-save-state.error {
border-left-color: #8f1f1f;
color: #8f1f1f;
}
.publication-studio-layout {
grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
align-items: start;
}
.publication-canvas,
.publication-settings-rail,
.publication-timeline-builder {
border-top: 1px solid var(--totemia-line);
padding-top: 16px;
}
.publication-title-input,
.publication-summary-input {
width: 100%;
border: 0;
border-bottom: 1px solid var(--totemia-line);
border-radius: 0;
background: transparent;
color: var(--totemia-ink);
font: inherit;
}
.publication-title-input {
min-height: 58px;
font-size: 38px;
font-weight: 900;
line-height: 1.08;
}
.publication-summary-input {
min-height: 72px;
margin-top: 8px;
resize: vertical;
font-size: 16px;
line-height: 1.6;
}
.publication-toolbar,
.publication-insert-row,
.publication-insert-row form,
.publication-upload-controls {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.publication-toolbar {
position: sticky;
top: 0;
z-index: 5;
margin-top: 14px;
padding: 8px 0;
border-top: 1px solid var(--totemia-line);
border-bottom: 1px solid var(--totemia-line);
background: var(--totemia-paper);
}
.publication-tool-button {
min-width: 34px;
min-height: 34px;
border: 1px solid var(--totemia-line);
border-radius: 6px;
background: var(--totemia-paper);
color: var(--totemia-ink);
font-weight: 900;
}
.publication-tool-button.active,
.publication-tool-button:hover {
border-color: var(--totemia-gold);
color: var(--totemia-green);
}
.publication-insert-row {
padding: 10px 0;
}
.publication-insert-row input,
.publication-insert-row select,
.publication-settings-rail input,
.publication-settings-rail select,
.publication-date-picker input,
.publication-date-picker select,
.publication-timeline-builder input,
.publication-timeline-builder textarea {
border: 1px solid var(--totemia-line);
border-radius: 6px;
background: var(--totemia-paper);
color: var(--totemia-ink);
font: inherit;
padding: 8px 9px;
}
.publication-file-input,
.publication-file-picker input {
display: none;
}
.publication-cover-control {
display: grid;
gap: 8px;
font-weight: 900;
}
.publication-cover-control img,
.publication-timeline-image-upload img {
display: block;
width: 100%;
max-height: 180px;
object-fit: cover;
border: 1px solid var(--totemia-line);
background: var(--surface-2);
}
.publication-cover-control strong,
.publication-timeline-image-upload strong {
border-left: 3px solid var(--totemia-muted);
padding-left: 9px;
color: var(--totemia-muted);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
}
.publication-date-picker {
display: grid;
gap: 10px;
margin: 0;
border: 1px solid var(--totemia-line);
padding: 12px;
}
.publication-date-picker > span {
color: var(--totemia-green);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
}
.publication-date-inline {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
.publication-editor-surface {
min-height: 520px;
padding: 26px 0 40px;
}
.publication-editor-surface .ProseMirror {
min-height: 480px;
outline: 0;
font-size: 16px;
line-height: 1.78;
}
.publication-editor-surface .ProseMirror p.is-editor-empty:first-child::before {
content: attr(data-placeholder);
float: left;
color: var(--totemia-muted);
pointer-events: none;
height: 0;
}
.publication-editor-surface .ProseMirror img {
display: block;
max-width: 100%;
max-height: 520px;
object-fit: contain;
border: 1px solid var(--totemia-line);
background: var(--surface-2);
}
.publication-editor-surface .ProseMirror img[data-align="left"] {
float: left;
width: min(42%, 360px);
margin: 6px 22px 16px 0;
}
.publication-editor-surface .ProseMirror img[data-align="right"] {
float: right;
width: min(42%, 360px);
margin: 6px 0 16px 22px;
}
.publication-editor-surface .ProseMirror img[data-align="center"] {
margin: 18px auto;
}
.publication-editor-surface .ProseMirror img[data-align="wide"] {
width: 100%;
margin: 18px 0;
}
.publication-settings-rail {
display: grid;
gap: 13px;
}
.publication-settings-rail label {
display: grid;
gap: 6px;
font-weight: 900;
}
.publication-release-box {
display: grid;
gap: 8px;
border-top: 1px solid var(--totemia-line);
padding-top: 12px;
}
.publication-release-box p {
margin: 0;
color: var(--totemia-muted);
font-size: 13px;
line-height: 1.5;
}
.publication-timeline-builder {
display: grid;
gap: 14px;
}
.publication-timeline-grid {
grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
}
.publication-timeline-preview {
display: grid;
gap: 10px;
align-content: start;
border-left: 1px solid var(--totemia-line);
padding-left: 14px;
}
.publication-timeline-preview.horizontal {
grid-auto-flow: column;
grid-auto-columns: minmax(180px, 1fr);
overflow-x: auto;
}
.publication-timeline-preview article {
display: grid;
gap: 4px;
border-left: 3px solid var(--totemia-gold);
padding-left: 10px;
}
.publication-timeline-preview time,
.publication-timeline-preview span {
color: var(--totemia-muted);
font-size: 12px;
}
.imperial-orders-list {
gap: 10px;
}
.imperial-order-card {
padding: 0;
box-shadow: none;
transition: border-color .15s ease, background .15s ease;
overflow: hidden;
}
.imperial-order-card:hover {
transform: none;
box-shadow: none;
border-color: var(--totemia-gold);
}
.imperial-order-summary {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding: 15px 18px;
cursor: pointer;
list-style: none;
}
.imperial-order-summary::-webkit-details-marker {
display: none;
}
.imperial-order-title {
font-size: 15px;
line-height: 1.35;
}
.imperial-order-action {
color: var(--totemia-muted);
font-size: 12px;
font-weight: 800;
}
.imperial-order-card[open] .imperial-order-action {
color: var(--totemia-green);
}
.imperial-order-body {
border-top: 1px solid var(--totemia-line);
padding: 14px 18px 18px;
}
@media (max-width: 700px) {
.publication-editor-grid,
.publication-timeline-draft {
grid-template-columns: minmax(0, 1fr);
}
.publication-image-left,
.publication-image-right {
float: none;
width: 100%;
margin: 18px 0;
}
.publication-studio-head,
.publication-studio-layout,
.publication-timeline-grid,
.publication-detail-heading,
.publication-date-inline {
grid-template-columns: minmax(0, 1fr);
}
.publication-settings-rail,
.publication-timeline-preview {
border-left: 0;
padding-left: 0;
}
.publication-title-input {
font-size: 30px;
}
.publication-timeline.horizontal,
.publication-timeline-preview.horizontal {
grid-auto-flow: row;
grid-auto-columns: auto;
overflow-x: visible;
}
.law-download-menu,
.law-download-toggle,
.law-download-options {
width: 100%;
}
.law-download-options {
position: static;
margin-top: 6px;
}
.imperial-order-summary {
grid-template-columns: 1fr;
gap: 6px;
}
}
/* Government menu + mobile masthead navigation */
.mobile-nav-toggle {
display: none;
}
/* Account links (Profile / Settings / Sign Out) live in the hamburger drawer
* only — the desktop path is the top-right avatar menu. */
.mobile-nav-account {
display: none;
}
/* ── Desktop mega-menus (Government + About) ─────────────────────────
* Larger, city-government-style dropdown panels. They open on click (the
* shared .official-nav-dropdown.open rule in 01-variables-base.css drives
* visibility) and keep the brand gold/green/cream look. */
.government-nav-menu {
width: min(880px, calc(100vw - 32px));
padding: 18px;
}
.government-nav-columns {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.government-nav-column {
display: flex;
min-width: 0;
flex-direction: column;
gap: 2px;
}
.government-nav-column .registry-label {
padding: 2px 10px 8px;
margin-bottom: 4px;
border-bottom: 1px solid var(--totemia-line);
}
.official-nav-menu .government-nav-column a {
border-top: 0 !important;
border-radius: 8px;
padding: 9px 10px !important;
font-size: 13.5px;
line-height: 1.3;
}
.government-nav-column a.active {
background: rgba(213, 182, 55, .16);
color: var(--totemia-green);
}
/* About panel: two columns of richer items (title + one-line descriptor). */
.about-nav-menu {
width: min(560px, calc(100vw - 32px));
padding: 14px;
}
.about-nav-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
.official-nav-menu .about-nav-item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 12px !important;
border-radius: 10px;
line-height: 1.35;
}
.about-nav-item-title {
font-size: 13.5px;
font-weight: 800;
color: var(--totemia-ink);
}
.about-nav-item-desc {
font-size: 11.5px;
font-weight: 600;
color: var(--totemia-muted);
}
.official-nav-menu .about-nav-item:hover .about-nav-item-title,
.official-nav-menu .about-nav-item.active .about-nav-item-title {
color: var(--totemia-green);
}
.official-nav-menu .about-nav-item.active {
background: rgba(213, 182, 55, .14);
}
@media (max-width: 720px) {
/* Inside the mobile drawer the mega-menus collapse to a single column and
* drop their fixed desktop widths. */
.government-nav-menu,
.about-nav-menu {
width: 100% !important;
}
.about-nav-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
/* Lock the page behind the open drawer. overflow:hidden on the body alone
* let the page keep scrolling/rubber-banding underneath on mobile, so lock
* the documentElement too and stop scroll chaining with overscroll-behavior
* (the JS toggles `mobile-nav-open` on both and ). */
html.mobile-nav-open,
body.mobile-nav-open {
overflow: hidden;
overscroll-behavior: none;
}
/* Menu toggle sits at the far LEFT of the masthead (account/profile stays
* on the right). Two distinct corners, the standard app-bar layout — not
* two near-identical round buttons crowded together on the right. */
.mobile-nav-toggle {
position: fixed;
top: max(6px, env(safe-area-inset-top));
left: max(10px, env(safe-area-inset-left));
z-index: 1200;
display: inline-flex;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
border: 0;
border-radius: 0;
background: transparent;
color: #fff;
box-shadow: none;
transition: color .1s linear;
}
.mobile-nav-toggle.active {
border: 0;
background: transparent;
color: #fff;
}
/* Three 2px bars with a 5px gap. The outer bars sit exactly (gap + bar) =
* 7px from the centre line, so translating them ±7px lands both diagonals on
* the same point — a clean, symmetric X rather than the previous half-formed
* cross (2.5px bars never reached centre with a 7px shift). */
.mobile-nav-toggle span {
display: block;
width: 20px;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: transform .16s cubic-bezier(.2, .8, .2, 1), opacity .1s linear;
}
.mobile-nav-toggle.active span:first-child {
transform: translateY(7px) rotate(45deg);
}
.mobile-nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-nav-toggle.active span:last-child {
transform: translateY(-7px) rotate(-45deg);
}
.masthead {
/* Reserve room for the toggle on the left and the profile button on the
* right so the brand/title never slides under either. */
padding-left: calc(64px + env(safe-area-inset-left)) !important;
padding-right: calc(64px + env(safe-area-inset-right)) !important;
}
.masthead-user {
position: absolute;
right: max(10px, env(safe-area-inset-right));
top: max(6px, env(safe-area-inset-top));
z-index: 1210;
}
.masthead-profile-btn {
min-width: 44px;
max-width: none !important;
width: 44px;
height: 44px;
justify-content: center;
padding: 4px !important;
}
.masthead-profile-btn > span:not(.masthead-avatar):not(.masthead-caret),
.masthead-profile-btn > strong {
display: none !important;
}
.masthead-caret {
display: none;
}
.global-nav {
min-height: 0;
padding: 0 !important;
border-bottom: 0 !important;
}
.global-nav > .official-nav-inner,
.global-nav .official-nav-inner {
position: fixed;
top: var(--masthead-h, 56px);
right: 0;
bottom: 0;
left: 0;
z-index: 1100;
display: none;
width: 100%;
max-width: none;
min-height: 0;
margin: 0;
padding: 12px 14px 24px !important;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--totemia-paper);
border-top: 1px solid var(--totemia-line);
box-shadow: none;
}
.global-nav .official-nav-inner.mobile-open,
body.mobile-nav-open .global-nav .official-nav-inner {
display: flex;
animation: governmentMenuIn .12s cubic-bezier(.2, .8, .2, 1);
}
.official-nav-inner,
.official-nav-primary,
.official-nav-account {
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 4px !important;
overflow: visible !important;
}
.official-nav-primary > *,
.official-nav-account > *,
.official-nav-dropdown {
flex: 0 0 auto !important;
}
.official-nav-primary > .official-nav-link,
.official-nav-account > .official-nav-link,
.official-nav-account > button,
.mobile-nav-account > .official-nav-link,
.mobile-nav-account > button,
.official-nav-trigger {
width: 100%;
justify-content: space-between !important;
border: 0;
border-radius: 6px;
padding: 13px 14px !important;
text-align: left;
}
/* Account section: shown only in the drawer, separated by a divider. */
.mobile-nav-account {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 8px;
padding-top: 10px;
border-top: 1px solid var(--totemia-line);
}
.mobile-nav-account > button {
background: transparent;
color: inherit;
font: inherit;
cursor: pointer;
}
.official-nav-dropdown {
width: 100%;
}
/* In the drawer the dropdowns are a true accordion: collapsed by default,
* expanded only when their trigger marks the group `open`. display:none
* (rather than opacity) means a collapsed group cannot be scrolled to or
* focused, so the drawer stays short and the page does not need to scroll. */
.official-nav-menu,
.government-nav-menu {
position: static !important;
width: 100%;
min-width: 0;
display: none;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
border: 1px solid var(--totemia-line);
border-top: 1px solid var(--totemia-line);
border-radius: 6px;
box-shadow: none;
padding: 8px;
margin-top: 4px;
background: var(--surface-2);
}
.official-nav-dropdown.open > .official-nav-menu,
.official-nav-dropdown.open > .government-nav-menu {
display: block;
animation: governmentMenuIn .12s cubic-bezier(.2, .8, .2, 1);
}
.official-nav-dropdown:not(.open) .official-nav-caret {
transform: none;
}
.official-nav-dropdown.open .official-nav-caret {
transform: rotate(180deg);
}
.government-nav-columns {
grid-template-columns: 1fr;
gap: 8px;
}
.government-nav-column a {
padding: 10px 12px !important;
}
}
/* Public government information pages */
.government-profile-hero {
position: relative;
grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
min-height: 180px;
border-top-color: var(--totemia-green);
animation: governmentPageIn .22s ease-out;
}
.government-hero-flag {
position: relative;
z-index: 1;
display: grid;
width: 100%;
min-height: 132px;
place-items: center;
overflow: visible;
border: 1px solid color-mix(in srgb, var(--totemia-line) 80%, transparent);
border-radius: 4px;
background: #fff;
}
.government-hero-flag img {
width: 100%;
height: 100%;
max-height: 150px;
object-fit: contain;
}
.government-hero-copy {
position: relative;
z-index: 1;
}
.government-native-title {
margin-bottom: 8px !important;
color: var(--totemia-green) !important;
font-weight: 800;
}
.government-page-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
}
.government-main-column {
min-width: 0;
}
.government-info-doc {
box-shadow: none !important;
/* Government records are flat, square-cornered documents — match the
modern org surfaces instead of the rounded 12px party-doc default. */
border-radius: 4px !important;
}
.government-page-layout > .government-main-column .party-doc-section:first-child,
.government-page-layout > .government-portrait-panel {
border-top: 0;
}
/* ── Ministry identity accents ──────────────────────────────────────
Each ministry workspace carries its own accent so it reads as that
office at a glance: the Ministry of Finance is the imperial dark
green; the Ministry of Interior is a medium blue. The accent colors
the hero's top rule, frames the seal, and marks the active sidebar
tab — nothing decorative beyond that. */
.ministry-accent-finance {
--ministry-accent: var(--totemia-green, #196251);
}
.ministry-accent-interior {
--ministry-accent: #4387d9;
}
.ministry-accent-infrastructure {
--ministry-accent: #173e68;
}
.ministry-accent-agriculture {
--ministry-accent: #c6a100;
}
.ministry-accent-engineering {
--ministry-accent: #980812;
}
.official-hero.ministry-accent-finance,
.official-hero.ministry-accent-interior,
.official-hero.ministry-accent-infrastructure,
.official-hero.ministry-accent-agriculture,
.official-hero.ministry-accent-engineering {
border-top: 3px solid var(--ministry-accent);
}
.official-hero.ministry-accent-interior h1 {
color: var(--ministry-accent);
}
.official-hero.ministry-accent-finance .official-seal,
.official-hero.ministry-accent-interior .official-seal,
.official-hero.ministry-accent-infrastructure .official-seal,
.official-hero.ministry-accent-agriculture .official-seal,
.official-hero.ministry-accent-engineering .official-seal {
background: #ffffff;
border-color: color-mix(in srgb, var(--ministry-accent) 38%, var(--totemia-line));
}
.official-hero.ministry-accent-finance .official-seal-img,
.official-hero.ministry-accent-interior .official-seal-img,
.official-hero.ministry-accent-infrastructure .official-seal-img,
.official-hero.ministry-accent-agriculture .official-seal-img,
.official-hero.ministry-accent-engineering .official-seal-img {
object-fit: contain;
}
/* The active sidebar tab is themed by --ministry-accent directly in the base
.interior-sidebar-nav rule (06-interior-staff.css), which the per-ministry
--ministry-accent values below cascade into — no separate override needed. */
/* Illustrative diagram on the public /government/about page. Flat white
card framing the supplied structure image — no decorative treatment. */
.government-structure-figure {
margin: 18px 0 0;
padding: 16px;
border: 1px solid var(--totemia-line);
border-radius: 4px;
background: #ffffff;
}
.government-structure-figure img {
display: block;
width: 100%;
height: auto;
border-radius: 2px;
}
.government-structure-figure figcaption {
margin-top: 10px;
color: var(--totemia-muted);
font-size: 12.5px;
text-align: center;
}
.government-quote-panel {
margin-top: 12px;
padding: 12px 16px;
border-left: 3px solid var(--totemia-gold);
background: #ffffff;
}
.government-quote-panel p {
max-width: 92ch;
margin: 0;
color: var(--totemia-ink);
line-height: 1.62;
font-size: 14px;
}
.government-quote-panel p + p {
margin-top: 12px;
}
.government-info-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 0 18px;
margin: 14px 0 0;
}
.government-info-item {
display: grid;
grid-template-columns: minmax(120px, .5fr) minmax(0, 1fr);
gap: 12px;
padding: 12px 0;
border-top: 1px solid color-mix(in srgb, var(--totemia-line) 62%, transparent);
}
.government-info-item dt,
.government-chancellor-facts dt {
margin: 0;
color: var(--totemia-muted);
font-size: 10px;
font-weight: 900;
letter-spacing: .11em;
text-transform: uppercase;
}
.government-info-item dd,
.government-chancellor-facts dd {
display: grid;
gap: 4px;
min-width: 0;
margin: 0;
color: var(--totemia-ink);
font-size: 14px;
line-height: 1.45;
}
.government-info-item dd span:first-child {
font-weight: 800;
color: var(--totemia-green);
}
.government-portrait-panel {
padding: 24px;
border-left: 1px solid color-mix(in srgb, var(--totemia-line) 70%, transparent);
}
.government-portrait-frame {
display: grid;
width: 100%;
aspect-ratio: 3 / 4;
place-items: center;
overflow: hidden;
border: 1px solid var(--totemia-line);
border-radius: 4px;
background: #ffffff;
}
/* Absolutely fill the frame box so the image is contained within the fixed
* 3:4 frame — NOT sized to its own min-content. As an in-flow grid item a
* taller-than-3:4 portrait (most Minecraft skins are ~1:2) grew the grid row
* to its intrinsic height and overflowed the aspect-ratio frame, which
* `overflow:hidden` then clipped — cropping the head and feet. Only portraits
* that happened to be exactly 3:4 (e.g. the Interior minister) escaped it.
* Absolute positioning takes the image out of flow, so the frame keeps its
* 3:4 box and `contain` shows the whole portrait, never cropped. */
.government-portrait-frame > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.government-portrait-placeholder {
display: grid;
place-items: center;
gap: 10px;
padding: 18px;
text-align: center;
color: var(--totemia-muted);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
}
.government-portrait-placeholder img {
width: min(120px, 70%);
max-height: 160px;
object-fit: contain;
}
/* Portrait + caption infobox. The holder's name sits directly beneath the
* portrait (instead of buried in the record table) so a reader — or a crawler
* — sees who currently holds the office at a glance. */
.government-portrait-figure {
margin: 0;
}
.government-portrait-nameplate {
display: grid;
gap: 4px;
margin-top: 14px;
padding-top: 14px;
border-top: 3px solid var(--totemia-gold);
text-align: center;
}
.government-portrait-nameplate .registry-label {
justify-self: center;
}
.government-portrait-nameplate strong {
color: var(--totemia-green);
font-size: 22px;
line-height: 1.14;
}
.government-portrait-nameplate-sub {
color: var(--totemia-muted);
font-size: 13px;
font-weight: 700;
}
.government-portrait-facts {
display: grid;
gap: 8px;
margin: 14px 0 0;
text-align: left;
}
.government-portrait-facts div {
border-left: 3px solid var(--totemia-gold);
padding-left: 10px;
}
.government-portrait-facts dt {
margin: 0 0 2px;
color: var(--totemia-muted);
font-size: 10px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}
.government-portrait-facts dd {
margin: 0;
color: var(--totemia-ink);
font-size: 13px;
font-weight: 800;
line-height: 1.35;
}
/* The list hero is intentionally slim (.public-list-hero), so the summary
* stats sit as a tidy chip row directly beneath the hero copy rather than
* fighting the single-column hero grid. */
.government-record-stats {
display: flex;
gap: 10px;
margin: 10px 0 0;
flex-wrap: wrap;
justify-content: flex-start;
}
.government-record-stats div {
min-width: 120px;
padding: 12px 16px;
border: 1px solid color-mix(in srgb, var(--totemia-line) 78%, transparent);
border-radius: 4px;
background: #ffffff;
text-align: center;
}
.government-record-stats dt {
margin: 0;
color: var(--totemia-muted);
font-size: 10px;
font-weight: 900;
letter-spacing: .11em;
text-transform: uppercase;
}
.government-record-stats dd {
margin: 4px 0 0;
color: var(--totemia-green);
font-size: 18px;
font-weight: 800;
line-height: 1.1;
}
.government-related-links {
align-items: center;
}
/* Chancellor succession roster. Portrait-first cards in a responsive grid so
* the page reads as a proper gallery of officeholders rather than a flat list,
* and the sitting chancellor is clearly flagged. */
.government-chancellor-roster {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 18px;
margin: 14px 0 0;
padding: 0;
}
.government-chancellor-card {
display: grid;
gap: 14px;
padding: 16px;
border: 1px solid color-mix(in srgb, var(--totemia-line) 70%, transparent);
border-radius: 4px;
background: #ffffff;
animation: governmentCardIn .26s ease-out both;
}
.government-chancellor-card.is-current {
border-color: var(--totemia-gold);
box-shadow: 0 0 0 1px var(--totemia-gold), 0 10px 26px rgba(42, 35, 23, .1);
}
.government-chancellor-card .government-chancellor-portrait {
width: 100%;
}
.government-chancellor-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
/* Flat left-bar status flag (modern bold treatment) — not a rounded pill. */
.government-chancellor-current {
border-left: 3px solid var(--totemia-gold);
padding: 1px 0 1px 8px;
color: var(--totemia-green);
font-size: 10px;
font-weight: 900;
letter-spacing: .09em;
text-transform: uppercase;
}
.government-chancellor-card-body h3 {
margin: 6px 0 12px;
color: var(--totemia-green);
font-size: 19px;
line-height: 1.15;
}
.government-chancellor-facts {
display: grid;
gap: 12px;
margin: 0;
}
.government-chancellor-facts div {
min-width: 0;
}
@keyframes governmentCardIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes governmentMenuIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes governmentPageIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 860px) {
.government-page-layout {
grid-template-columns: 1fr;
}
/* On a stacked layout the portrait + nameplate move ABOVE the long
* constitution text instead of being stranded at the very bottom of the
* page (the previous behaviour the user reported). */
.government-page-layout > .government-portrait-panel {
order: -1;
padding: 0 0 4px;
border-top: 0;
border-left: 0;
}
.government-page-layout > .government-main-column .party-doc-section:first-child {
border-top: 1px solid color-mix(in srgb, var(--totemia-line) 70%, transparent);
margin-top: 6px;
padding-top: 18px;
}
.government-portrait-figure {
max-width: 320px;
margin: 0 auto;
}
.government-record-stats div {
flex: 1 1 130px;
}
}
@media (max-width: 640px) {
.government-profile-hero {
grid-template-columns: 1fr;
}
/* Cap the portrait so a full-width phone frame is not enormous, and keep
* the image contained (never cropped) and centred within it. */
.government-portrait-figure {
max-width: 260px;
}
.government-hero-flag {
max-height: 160px;
}
.government-quote-panel {
padding: 10px 12px;
}
.government-quote-panel p {
font-size: 13px;
}
.government-info-item {
grid-template-columns: 1fr;
}
.government-chancellor-roster {
grid-template-columns: 1fr;
}
.government-chancellor-card .government-chancellor-portrait {
max-width: 240px;
margin: 0 auto;
}
}
@media (prefers-reduced-motion: reduce) {
.mobile-nav-toggle span,
.global-nav .official-nav-inner.mobile-open,
body.mobile-nav-open .global-nav .official-nav-inner,
.government-profile-hero,
.government-chancellor-card {
animation: none;
transition: none;
}
}
/* Government public-page refinements */
.government-portrait-frame {
position: relative;
}
.government-portrait-file-input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* Edit controls sit centered along the bottom of the portrait as two clean
* circular buttons (no pill, no drop shadow). The wrapper spans the frame
* width so the button row centers; it is click-through, only the buttons and
* toast catch input. */
.government-portrait-upload {
position: absolute;
left: 0;
right: 0;
bottom: 8px;
z-index: 2;
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 8px;
pointer-events: none;
}
.government-portrait-actions {
display: inline-flex;
gap: 8px;
align-items: center;
justify-content: center;
pointer-events: auto;
}
.government-portrait-icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--totemia-green);
border-radius: 999px;
background: var(--totemia-paper);
color: var(--totemia-green);
box-shadow: none;
cursor: pointer;
transition: background .14s ease, border-color .14s ease, transform .1s ease;
}
.government-portrait-icon-button svg {
display: block;
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.3;
}
.government-portrait-icon-button:hover,
.government-portrait-icon-button:focus-visible {
background: color-mix(in srgb, var(--totemia-gold) 18%, var(--totemia-paper));
border-color: var(--totemia-gold);
}
.government-portrait-icon-button:active {
transform: scale(.93);
}
.government-portrait-icon-button.danger {
border-color: var(--totemia-red);
background: var(--totemia-paper);
color: var(--totemia-red);
}
.government-portrait-icon-button.danger:hover,
.government-portrait-icon-button.danger:focus-visible {
background: #fff1ea;
border-color: var(--totemia-red);
}
.government-portrait-icon-button:disabled,
.government-portrait-icon-button.is-busy {
opacity: .72;
cursor: progress;
}
.government-portrait-spinner {
animation: governmentPortraitSpin .7s linear infinite;
transform-origin: center;
}
.government-portrait-upload.compact .government-portrait-icon-button {
width: 31px;
height: 31px;
}
.government-portrait-upload.compact .government-portrait-icon-button svg {
width: 16px;
height: 16px;
}
.government-portrait-message {
max-width: min(220px, 72vw);
margin: 0;
padding: 6px 10px;
border: 1px solid var(--totemia-line);
border-radius: 8px;
background: var(--totemia-paper);
color: var(--totemia-ink);
font-size: 12px;
font-weight: 700;
line-height: 1.35;
text-align: center;
word-break: break-word;
pointer-events: auto;
}
.government-portrait-message.is-error {
border-color: color-mix(in srgb, var(--totemia-red) 60%, var(--totemia-line));
background: #fff1ea;
color: var(--totemia-red);
}
.government-portrait-message.is-ok {
border-color: color-mix(in srgb, var(--totemia-green) 45%, var(--totemia-line));
color: var(--totemia-green);
}
@keyframes governmentPortraitSpin {
to { transform: rotate(360deg); }
}
@media (hover: none) {
/* Comfortable tap targets on touch devices without overwhelming the image. */
.government-portrait-icon-button { width: 38px; height: 38px; }
.government-portrait-upload.compact .government-portrait-icon-button { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
.government-portrait-spinner { animation-duration: 1.4s; }
}
.government-carousel {
display: grid;
gap: 16px;
margin-top: 14px;
border-top: 1px solid color-mix(in srgb, var(--totemia-line) 70%, transparent);
padding-top: 18px;
}
.institution-record.ministry-card,
.government-carousel.ministry-card-carousel {
position: relative;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--ministry-accent-color, var(--totemia-green)) 24%, var(--totemia-line));
border-top: 0;
border-radius: 4px;
box-shadow: none;
background: #ffffff;
}
.institution-record.ministry-card {
padding-top: 26px;
/* The base .institution-record track is 62px, but the ministry seal frame is
64px — that 2px mismatch let the seal overflow its column and read as
off-centre. Match the track to the frame and centre it in the column. */
grid-template-columns: 64px minmax(0, 1fr);
align-items: start;
}
.government-carousel.ministry-card-carousel {
padding: 28px 18px 18px;
}
.institution-record.ministry-card::before,
.government-carousel.ministry-card-carousel::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 9px;
background: var(--ministry-accent-color, var(--totemia-green));
}
.institution-record.ministry-card .institution-mark.has-seal {
width: 64px;
height: 64px;
padding: 5px;
justify-self: center;
place-items: center;
border: 1px solid color-mix(in srgb, var(--ministry-accent-color, var(--totemia-green)) 28%, var(--totemia-line));
border-radius: 4px;
background: #ffffff;
}
.institution-record.ministry-card .institution-seal-img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.institution-record.ministry-card .registry-label,
.government-carousel.ministry-card-carousel .registry-label {
color: var(--ministry-accent-color, var(--totemia-green));
}
.institution-record.ministry-card h3,
.government-carousel.ministry-card-carousel h3 {
font-weight: 900;
}
/* Equal-height ministry cards: rows stretch, and the holder block +
"Open office" button pin to the card bottom so every card presents
the identity box and action at the same position. */
.institution-grid.ministry-card-grid {
align-items: stretch;
}
.institution-record.ministry-card .institution-body {
display: flex;
flex-direction: column;
align-items: stretch;
min-width: 0;
}
.institution-record.ministry-card .institution-body > .official-link-button {
margin-top: 14px;
align-self: flex-start;
}
.ministry-card-holder {
display: grid;
gap: 7px;
margin-top: 14px;
padding-left: 11px;
border-left: 3px solid var(--ministry-accent-color, var(--totemia-green));
}
.institution-record.ministry-card .ministry-card-holder {
margin-top: auto;
}
.ministry-card-holder .ministry-holder-line,
.ministry-card-holder .ministry-holder-vacant {
display: inline-flex;
align-items: center;
min-height: 36px;
}
.ministry-card-holder .ministry-holder-line {
color: var(--totemia-ink);
}
.ministry-card-holder .ministry-holder-line strong {
color: var(--totemia-ink);
font-weight: 800;
}
.ministry-holder-vacant {
color: var(--totemia-ink);
font-weight: 800;
}
.government-carousel-holder {
margin-top: 16px;
}
.government-carousel.ministry-card-carousel .government-carousel-seal {
border-color: color-mix(in srgb, var(--ministry-accent-color, var(--totemia-green)) 28%, var(--totemia-line));
border-radius: 4px;
}
.government-carousel.ministry-card-carousel .government-carousel-controls,
.government-carousel.ministry-card-carousel .government-carousel-toolbar h3 {
color: var(--ministry-accent-color, var(--totemia-green));
}
.government-carousel.ministry-card-carousel .government-carousel-controls button {
border-radius: 4px;
border-color: color-mix(in srgb, var(--ministry-accent-color, var(--totemia-green)) 30%, var(--totemia-line));
color: var(--ministry-accent-color, var(--totemia-green));
}
.government-carousel.ministry-card-carousel .government-carousel-dots button.active {
background: var(--ministry-accent-color, var(--totemia-green));
}
.government-carousel-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.government-carousel-toolbar h3 {
margin: 4px 0 0;
color: var(--totemia-green);
font-size: 22px;
line-height: 1.16;
}
.government-carousel-controls {
display: flex;
align-items: center;
gap: 8px;
color: var(--totemia-green);
font-size: 12px;
font-weight: 900;
}
.government-carousel-controls button {
display: inline-grid;
width: 38px;
height: 38px;
place-items: center;
border: 1px solid color-mix(in srgb, var(--totemia-gold) 72%, var(--totemia-line));
border-radius: 999px;
background: #ffffff;
color: var(--totemia-green);
box-shadow: none;
cursor: pointer;
}
.government-carousel-controls button:hover,
.government-carousel-controls button:focus-visible {
border-color: var(--totemia-gold);
background: color-mix(in srgb, var(--totemia-gold) 14%, #ffffff);
}
.government-carousel-controls svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 3;
}
.government-carousel-stage {
display: grid;
grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
gap: 26px;
align-items: start;
animation: governmentCarouselForward .22s ease-out;
}
.government-carousel-stage.back {
animation-name: governmentCarouselBack;
}
.government-carousel-media {
display: grid;
grid-template-columns: minmax(170px, 230px) 76px;
gap: 14px;
align-items: start;
}
.government-carousel-portrait {
width: 100%;
}
.government-carousel-seal {
display: grid;
width: 76px;
height: 76px;
place-items: center;
border: 1px solid var(--totemia-line);
border-radius: 8px;
background: #ffffff;
color: var(--totemia-green);
font-weight: 900;
}
.government-carousel-seal img {
width: 58px;
height: 58px;
object-fit: contain;
}
.government-carousel-copy > p {
max-width: 82ch;
margin: 0;
color: var(--totemia-ink);
font-size: 14px;
line-height: 1.68;
}
.government-carousel-facts {
grid-template-columns: repeat(2, minmax(220px, 1fr));
gap: 0 22px;
margin-top: 18px;
}
.government-carousel-facts .government-info-item {
grid-template-columns: 1fr;
gap: 6px;
}
.government-carousel-dots {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.government-carousel-dots button {
width: 36px;
height: 6px;
border: 0;
border-radius: 999px;
background: color-mix(in srgb, var(--totemia-line) 80%, transparent);
box-shadow: none;
cursor: pointer;
}
.government-carousel-dots button.active {
background: var(--totemia-gold);
}
.government-emperor-record {
display: grid;
gap: 16px;
margin-top: 14px;
}
.government-emperor-primary {
border-top: 1px solid var(--totemia-line);
padding-top: 14px;
}
.government-emperor-primary strong {
display: block;
margin-top: 4px;
color: var(--totemia-green);
font-size: 30px;
line-height: 1.08;
}
.government-emperor-style {
display: grid;
grid-template-columns: 170px minmax(0, 1fr);
gap: 18px;
align-items: start;
border-top: 1px solid color-mix(in srgb, var(--totemia-line) 70%, transparent);
padding-top: 14px;
}
.government-emperor-style div:last-child {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.government-emperor-style span {
border: 1px solid var(--totemia-line);
border-left: 3px solid var(--totemia-line);
border-radius: 4px;
padding: 6px 10px 6px 8px;
background: #ffffff;
color: var(--totemia-ink);
font-size: 13px;
font-weight: 800;
}
.government-emperor-style span.primary {
border-color: var(--totemia-gold);
border-left-color: var(--totemia-gold);
color: var(--totemia-green);
}
/* Full ceremonial designation — a formal enumeration of the Emperor's
titles, flat with the standard gold accent bar (no rounded panel). */
.government-emperor-designation {
border-top: 1px solid color-mix(in srgb, var(--totemia-line) 70%, transparent);
padding-top: 14px;
}
.government-emperor-designation ol {
list-style: none;
display: grid;
gap: 6px;
margin: 8px 0 0;
padding: 0;
}
.government-emperor-designation li {
border-left: 3px solid var(--totemia-gold);
padding: 2px 0 2px 10px;
color: var(--totemia-ink);
font-size: 13.5px;
font-weight: 800;
line-height: 1.35;
}
.government-emperor-designation li:first-child {
color: var(--totemia-green);
}
.government-emperor-support {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 22px;
margin: 0;
}
.government-emperor-support div {
border-top: 1px solid color-mix(in srgb, var(--totemia-line) 70%, transparent);
padding: 12px 0;
}
.government-emperor-support dt {
margin: 0 0 6px;
color: var(--totemia-muted);
font-size: 10px;
font-weight: 900;
letter-spacing: .11em;
text-transform: uppercase;
}
.government-emperor-support dd {
display: grid;
gap: 4px;
margin: 0;
color: var(--totemia-ink);
font-size: 14px;
line-height: 1.42;
}
.government-emperor-support dd span:first-child {
color: var(--totemia-green);
font-weight: 800;
}
@keyframes governmentCarouselForward {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes governmentCarouselBack {
from { opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 820px) {
.government-carousel-stage,
.government-carousel-media,
.government-emperor-style,
.government-emperor-support {
grid-template-columns: 1fr;
}
.government-carousel-seal {
width: 64px;
height: 64px;
justify-self: center;
}
.government-carousel-facts {
grid-template-columns: 1fr;
}
.government-carousel-copy {
order: -1;
}
.government-carousel-portrait {
width: min(100%, 240px);
justify-self: center;
}
}
@media (max-width: 560px) {
.government-carousel-toolbar {
align-items: flex-start;
flex-direction: column;
}
.government-emperor-primary strong {
font-size: 24px;
}
}
@media (prefers-reduced-motion: reduce) {
.government-carousel-stage {
animation: none;
}
}
/* Ministry of Interior registry editor layout.
Keep this after the shared form rules so the editor is not scattered by
.interior-workspace-content form's auto-fit grid. */
.interior-workspace-content form.interior-registry-editor {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 18px !important;
align-items: start !important;
max-width: 100% !important;
}
.interior-workspace-content form.interior-registry-editor > .interior-inline-head {
margin: 0 !important;
}
.interior-workspace-content form.interior-registry-editor > .interior-registry-form-grid,
.interior-workspace-content form.interior-registry-editor > .interior-upload-card,
.interior-workspace-content form.interior-registry-editor > .interior-upload-progress,
.interior-workspace-content form.interior-registry-editor > #interior-registry-preview-wrap,
.interior-workspace-content form.interior-registry-editor > .record-actions.compact {
grid-column: 1 !important;
}
.interior-workspace-content form.interior-registry-editor > .interior-registry-form-grid {
width: min(100%, 920px) !important;
}
.interior-workspace-content form.interior-registry-editor .interior-registry-form-grid label:not(.wide) {
max-width: min(100%, 420px) !important;
}
.interior-workspace-content textarea {
resize: none !important;
}
.interior-workspace-content form.interior-registry-editor textarea#interior-registry-description {
height: 160px !important;
min-height: 160px !important;
max-height: 160px !important;
overflow-y: auto !important;
}
.interior-workspace-content form.interior-registry-editor .interior-accent-field {
max-width: min(100%, 420px) !important;
}
.interior-workspace-content form.party-color-editor-section label.wide {
width: min(100%, 920px) !important;
}
.interior-workspace-content form.party-color-editor-section textarea {
min-height: 150px !important;
max-height: 150px !important;
overflow-y: auto !important;
}
.interior-workspace-content form.party-color-editor-section .interior-accent-field {
max-width: min(100%, 420px) !important;
}
.interior-workspace-content form.party-color-editor-section .interior-accent-field input[type="color"],
.interior-workspace-content form.interior-registry-editor .interior-accent-field input[type="color"] {
width: 72px !important;
min-width: 72px !important;
height: 42px !important;
padding: 2px !important;
cursor: pointer !important;
}
.interior-workspace-content form.interior-registry-editor .interior-accent-field input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0 !important;
}
.interior-workspace-content form.party-color-editor-section .interior-accent-field input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0 !important;
}
.interior-workspace-content form.party-color-editor-section .interior-accent-field input[type="color"]::-webkit-color-swatch,
.interior-workspace-content form.party-color-editor-section .interior-accent-field input[type="color"]::-moz-color-swatch,
.interior-workspace-content form.interior-registry-editor .interior-accent-field input[type="color"]::-webkit-color-swatch,
.interior-workspace-content form.interior-registry-editor .interior-accent-field input[type="color"]::-moz-color-swatch {
border: 0 !important;
border-radius: 3px !important;
}
.interior-workspace-content form.interior-registry-editor > .interior-upload-card,
.interior-workspace-content form.interior-registry-editor > .interior-upload-progress,
.interior-workspace-content form.interior-registry-editor > #interior-registry-preview-wrap {
width: min(100%, 760px) !important;
margin-top: 0 !important;
}
.interior-workspace-content form.interior-registry-editor > .interior-upload-card {
border: 0 !important;
border-top: 1px solid var(--line, #e3d8b6) !important;
border-bottom: 1px solid var(--line, #e3d8b6) !important;
background: transparent !important;
padding: 12px 0 !important;
border-radius: 0 !important;
grid-template-columns: 46px minmax(0, 1fr) !important;
}
.interior-workspace-content form.interior-registry-editor .interior-upload-card input[type="file"] {
display: none !important;
}
.interior-workspace-content form.interior-registry-editor .interior-upload-icon {
width: 42px !important;
height: 42px !important;
}
.interior-workspace-content form.interior-registry-editor .interior-upload-card span {
font-size: 11px !important;
line-height: 1.25 !important;
}
.interior-workspace-content form.interior-registry-editor .interior-upload-progress {
display: grid !important;
gap: 5px !important;
}
.interior-workspace-content form.interior-registry-editor .interior-upload-progress.hidden {
display: none !important;
}
.interior-workspace-content form.interior-registry-editor .interior-upload-bar {
margin-bottom: 0 !important;
}
.interior-workspace-content form.interior-registry-editor .interior-preview-head {
align-items: center !important;
width: min(100%, 520px) !important;
}
.interior-workspace-content form.interior-registry-editor .interior-registry-preview {
display: block !important;
width: min(100%, 520px) !important;
height: auto !important;
max-height: 320px !important;
object-fit: contain !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
.interior-workspace-content form.interior-registry-editor > .record-actions.compact {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
margin-top: 2px !important;
}
@media (max-width: 640px) {
.interior-workspace-content form.interior-registry-editor > .interior-registry-form-grid,
.interior-workspace-content form.interior-registry-editor > .interior-upload-card,
.interior-workspace-content form.interior-registry-editor > .interior-upload-progress,
.interior-workspace-content form.interior-registry-editor > #interior-registry-preview-wrap {
width: 100% !important;
}
.interior-workspace-content form.interior-registry-editor .interior-registry-form-grid label:not(.wide) {
max-width: none !important;
}
}
/* Focused Next public-page polish. Loaded after the shared portal shell. */
.home-quick-actions {
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
}
.public-list-hero,
.party-doc,
.official-hero.public-party-hero,
.religion-card,
.chart-block {
box-shadow: none !important;
}
.religion-card,
.religion-card:hover,
.party-doc-color-cta:hover {
transform: none !important;
}
.public-party-cover,
.public-party-cover-empty,
.public-party-cover-img.fit-wide,
.public-party-cover-img.fit-tall {
background: #ffffff !important;
}
.public-party-cover-fallback {
display: grid;
width: 72px;
height: 72px;
place-items: center;
border: 1px solid var(--totemia-line, var(--line));
border-radius: 12px;
background: var(--surface-2, #f7f8fa);
color: var(--totemia-green, #123c32);
font-size: 18px;
font-weight: 900;
}
.public-party-cover-detail .public-party-cover-fallback {
width: 92px;
height: 92px;
font-size: 22px;
}
.religion-card .public-party-cover {
height: 160px;
}
.religion-card .public-party-cover-img.fit-contain {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
padding: 8px;
box-sizing: border-box;
object-fit: contain;
}
.public-member-list {
display: flex;
min-width: 0;
flex-direction: column;
gap: 8px;
}
.public-member-list .public-member-identity {
width: max-content;
}
.party-doc-stat .public-member-identity {
width: max-content;
}
/* Totemic-language transcription on the Decree of Union document. Same
italic treatment used for native titles elsewhere on public pages. */
.decree-native {
font-style: italic;
}
/* ── Portal-wide search (/search) ───────────────────────────────────
* One continuous surface: a header with the big query field flows into a
* section facet rail + a hairline-divided results list. No stacked hero
* box, no per-result cards, no gold top stripe — just the brand
* gold/green/cream palette used with restraint. */
.site-search {
background: #ffffff;
border: 1px solid var(--totemia-line);
border-radius: 12px;
overflow: hidden;
margin-bottom: 18px;
}
.site-search-head {
padding: 24px 26px 20px;
border-bottom: 1px solid var(--totemia-line);
}
.site-search-head h1 {
margin: 6px 0 4px;
color: var(--totemia-green);
font-size: 28px;
line-height: 1.1;
letter-spacing: -0.02em;
}
.site-search-tagline {
margin: 0 0 16px;
color: var(--totemia-muted);
font-size: 13.5px;
}
.site-search-field {
display: flex;
align-items: center;
gap: 10px;
max-width: 640px;
padding: 0 14px;
background: var(--totemia-paper);
border: 1px solid var(--totemia-line);
border-radius: 12px;
transition: border-color .12s, box-shadow .12s;
}
.site-search-field:focus-within {
border-color: var(--totemia-gold);
box-shadow: 0 0 0 3px rgba(196, 152, 31, .15);
}
.site-search-icon {
width: 18px;
height: 18px;
flex: 0 0 auto;
color: var(--totemia-muted);
}
.site-search-input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
padding: 13px 0;
font-size: 15px;
color: var(--totemia-ink);
font-family: inherit;
}
.site-search-input:focus { outline: none; }
.site-search-clear {
flex: 0 0 auto;
border: 0;
background: transparent;
color: var(--totemia-muted);
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
cursor: pointer;
padding: 6px;
}
.site-search-clear:hover { color: var(--totemia-green); }
.site-search-body {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
align-items: stretch;
}
.site-search-filters {
display: flex;
flex-direction: column;
gap: 2px;
padding: 18px 14px;
border-right: 1px solid var(--totemia-line);
}
.site-search-filter {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border: 0;
border-left: 3px solid transparent;
background: transparent;
color: var(--totemia-ink);
font-size: 13px;
font-weight: 700;
text-align: left;
padding: 9px 12px;
border-radius: 0 8px 8px 0;
cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.site-search-filter:hover {
background: rgba(196, 152, 31, .08);
color: var(--totemia-green);
}
.site-search-filter.active {
background: rgba(196, 152, 31, .14);
border-left-color: var(--totemia-gold);
color: var(--totemia-green);
}
.site-search-filter .count {
font-size: 11px;
font-weight: 800;
color: var(--totemia-muted);
font-variant-numeric: tabular-nums;
}
.site-search-filter.active .count { color: var(--totemia-green); }
.site-search-results {
padding: 18px 22px;
min-width: 0;
}
.site-search-summary {
margin: 0 0 8px;
color: var(--totemia-muted);
font-size: 12.5px;
font-weight: 700;
}
.site-search-summary strong { color: var(--totemia-green); }
.site-search-result-list {
list-style: none;
margin: 0;
padding: 0;
}
.site-search-result + .site-search-result {
border-top: 1px solid color-mix(in srgb, var(--totemia-line) 70%, transparent);
}
.site-search-result > a {
display: block;
padding: 13px 10px;
text-decoration: none;
border-radius: 9px;
}
.site-search-result > a:hover { background: var(--totemia-ivory); }
.site-search-result-kicker {
display: block;
margin-bottom: 3px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--totemia-muted);
}
.site-search-result-title {
display: block;
font-size: 15.5px;
font-weight: 800;
color: var(--totemia-green);
line-height: 1.3;
}
.site-search-result > a:hover .site-search-result-title { text-decoration: underline; }
.site-search-result-snippet {
display: block;
margin-top: 3px;
color: var(--totemia-ink);
font-size: 13px;
line-height: 1.55;
}
.site-search-hit {
background: rgba(196, 152, 31, .32);
color: var(--totemia-ink);
border-radius: 2px;
padding: 0 2px;
font-weight: 700;
}
.site-search-empty {
padding: 26px 10px;
color: var(--totemia-muted);
font-size: 13.5px;
}
@media (max-width: 760px) {
.site-search-body { grid-template-columns: 1fr; }
.site-search-filters {
flex-direction: row;
overflow-x: auto;
border-right: 0;
border-bottom: 1px solid var(--totemia-line);
padding: 12px;
}
.site-search-filter {
flex: 0 0 auto;
border-left: 0;
border-bottom: 3px solid transparent;
border-radius: 8px;
white-space: nowrap;
}
.site-search-filter.active {
border-left-color: transparent;
border-bottom-color: var(--totemia-gold);
}
.site-search-results { padding: 16px; }
.site-search-head { padding: 20px 18px 16px; }
.site-search-head h1 { font-size: 24px; }
}
.history-reader-stage {
display: grid;
grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
gap: 34px;
align-items: start;
}
.history-year-rail {
position: sticky;
top: calc(var(--masthead-h, 56px) + 20px);
display: flex;
min-width: 0;
flex-direction: column;
gap: 12px;
}
.history-year-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.history-year-link {
border-left: 2px solid var(--totemia-line, var(--line));
color: var(--totemia-ink, var(--ink));
font-size: 14px;
font-weight: 800;
padding: 8px 10px;
text-decoration: none;
}
.history-year-link:hover,
.history-year-link:focus-visible {
border-left-color: var(--totemia-gold, var(--gold));
background: var(--surface-2, #f7f8fa);
color: var(--totemia-green, #123c32);
}
.history-story-panel {
min-width: 0;
}
.history-year-section {
scroll-margin-top: calc(var(--masthead-h, 56px) + 18px);
margin-bottom: 30px;
padding-bottom: 14px;
border-bottom: 1px solid var(--totemia-line, var(--line));
}
.history-year-section:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
.history-year-heading {
margin: 0 0 8px;
color: var(--totemia-green, #123c32);
font-size: 27px;
letter-spacing: -.02em;
}
.history-story-entry {
margin: 0;
max-width: 78ch;
padding: 14px 0;
border-top: 1px solid color-mix(in srgb, var(--totemia-line, var(--line)) 70%, transparent);
color: var(--totemia-ink, var(--ink));
font-size: 15.5px;
line-height: 1.72;
white-space: pre-wrap;
}
.history-entry-list {
min-width: 0;
}
.chart-area-circle {
min-height: 300px;
}
@media (max-width: 720px) {
.masthead-user .masthead-profile-btn[href="/login"] {
width: auto;
min-width: 60px;
height: 44px;
padding: 4px 10px !important;
white-space: nowrap;
}
.global-nav .official-nav-inner.mobile-open {
box-shadow: none !important;
}
.history-reader-stage {
grid-template-columns: 1fr;
gap: 16px;
}
.history-year-rail {
position: static;
}
.history-year-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
gap: 4px;
}
.history-year-link {
border: 1px solid var(--totemia-line, var(--line));
border-radius: 7px;
padding: 7px 9px;
text-align: center;
}
.history-story-entry {
font-size: 15px;
line-height: 1.7;
}
}
/* Educational / public-information pages (About Us, etc.) read like articles.
* Widen the measure, enlarge body type, give paragraphs real rhythm, and make
* headings confident so the content flows instead of feeling chunked. */
.readable-doc .party-doc-about h2 {
font-size: 27px;
font-weight: 800;
letter-spacing: -0.02em;
margin: 4px 0 14px;
}
.readable-doc .party-doc-members h2 {
font-size: 21px;
font-weight: 800;
letter-spacing: -0.01em;
}
.readable-doc .public-party-description {
font-size: 15.5px;
line-height: 1.8;
max-width: 72ch;
color: var(--totemia-ink, var(--ink));
}
.readable-doc .public-party-description + .public-party-description {
margin-top: 14px;
}
.readable-doc .party-doc-section {
padding: 22px 26px;
}
.readable-doc .party-doc-section > .registry-label {
margin-bottom: 8px;
}
@media (max-width: 720px) {
.readable-doc .party-doc-about h2 { font-size: 23px; }
.readable-doc .public-party-description { font-size: 15px; line-height: 1.75; }
}
/* ── Continuous educational documents (The Government, Decree of Union) ──
* One surface, no stacked hero box and no gold top stripe. The title folds
* into the document as a headline, sections are divided by hairlines only,
* and short explanatory sections sit in a compact grid so the reader scrolls
* far less while the type stays large and legible. The single .party-doc
* border is the only frame — no stacked hero box, no gold top stripe. */
.edu-doc-headline {
padding: 26px 26px 18px;
}
.edu-doc-headline .registry-label {
margin-bottom: 8px;
}
.edu-doc-headline h1 {
margin: 0;
color: var(--totemia-green);
font-size: 30px;
line-height: 1.12;
letter-spacing: -0.02em;
}
.edu-doc-native {
margin: 6px 0 0;
color: var(--totemia-muted);
font-style: italic;
font-size: 15px;
}
.edu-doc .party-doc-about {
padding-top: 20px;
padding-bottom: 20px;
}
.edu-doc-lead {
font-size: 16.5px !important;
line-height: 1.7 !important;
max-width: 76ch;
color: var(--totemia-ink, var(--ink));
}
/* Section headings inside an educational doc (e.g. the Decree transcriptions)
* read as confident green headings, matching the rest of the public surface. */
.edu-doc .party-doc-section > h2 {
margin: 2px 0 10px;
color: var(--totemia-green);
font-size: 19px;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.01em;
}
/* Compact two-column layout for the short structural sections. No per-item
* boxes — the whole document stays continuous; columns just halve the height
* so the page reads without endless scrolling. */
.edu-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 32px;
margin-top: 14px;
}
.edu-grid-item {
min-width: 0;
}
.edu-grid-item .registry-label {
margin-bottom: 4px;
}
.edu-grid-item h2 {
margin: 2px 0 8px;
color: var(--totemia-green);
font-size: 18px;
font-weight: 800;
line-height: 1.25;
}
.edu-grid-item .public-party-description {
font-size: 14.5px !important;
line-height: 1.6 !important;
max-width: none;
}
/* Diagram sits at the BOTTOM of the document, full width. It is part of the
* continuous surface — only a top hairline divides it, no boxed frame. */
.edu-figure {
margin: 0;
padding: 22px 26px 26px;
border: 0;
border-top: 1px solid color-mix(in srgb, var(--totemia-line) 70%, transparent);
border-radius: 0;
background: transparent;
}
.edu-figure img {
border: 1px solid var(--totemia-line);
border-radius: 10px;
}
@media (max-width: 720px) {
.edu-doc-headline { padding: 20px 20px 14px; }
.edu-doc-headline h1 { font-size: 24px; }
.edu-doc-lead { font-size: 15.5px !important; }
.edu-grid { grid-template-columns: 1fr; gap: 18px; }
.edu-figure { padding: 18px 20px 20px; }
}
/* ── Org public tab bar (Members/Followers · Donate · Documents · Articles) ── */
.org-tabbar {
display: flex;
flex-wrap: wrap;
gap: 2px;
margin: 4px 0 18px;
padding: 0 2px;
border-bottom: 1px solid var(--totemia-line);
}
.org-tab {
appearance: none;
border: 0;
border-bottom: 3px solid transparent;
background: transparent;
color: var(--totemia-muted);
font-size: 13px;
font-weight: 800;
letter-spacing: .01em;
padding: 11px 14px 10px;
text-decoration: none;
cursor: pointer;
transition: color .1s linear, border-color .1s linear;
}
.org-tab:hover { color: var(--totemia-green); }
/* Active tab is marked by the underline, not a text-color change — the
label deepens to full ink while the gold bar carries the "you are here". */
.org-tab.active {
color: var(--totemia-ink);
border-bottom-color: var(--totemia-gold);
}
/* ── Donate tab ───────────────────────────────────────────────────────────── */
.donate-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 14px;
align-items: start;
}
@media (max-width: 860px) {
.donate-layout { grid-template-columns: minmax(0, 1fr); }
}
.donate-message {
margin: 6px 0 16px;
padding: 12px 14px;
border-left: 3px solid var(--totemia-gold);
background: var(--surface-2);
border-radius: 0 8px 8px 0;
color: var(--totemia-ink);
line-height: 1.55;
}
.donate-status { margin: 12px 0; }
.donate-remaining {
display: flex;
flex-direction: column;
gap: 2px;
margin: 4px 0 16px;
padding: 12px 14px;
border: 1px solid var(--totemia-line);
border-radius: 10px;
background: var(--surface-2);
}
.donate-remaining span {
font-size: 10px;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--totemia-muted);
}
.donate-remaining strong {
font-size: 24px;
font-weight: 800;
color: var(--totemia-green);
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: -.01em;
}
.donate-remaining small { color: var(--totemia-muted); font-size: 11px; }
.donate-presets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 8px;
margin-bottom: 12px;
}
.donate-preset {
appearance: none;
border: 1px solid var(--totemia-line);
border-radius: 8px;
background: #ffffff;
color: var(--totemia-ink);
font-weight: 800;
font-size: 13px;
font-variant-numeric: tabular-nums;
padding: 11px 8px;
cursor: pointer;
transition: border-color .1s linear, background .1s linear;
}
.donate-preset:hover:not(:disabled) { border-color: var(--totemia-gold); }
.donate-preset.active {
border-color: var(--totemia-gold);
background: var(--gold-pale);
color: var(--gold-deep);
}
.donate-preset:disabled { opacity: .45; cursor: not-allowed; }
.donate-custom { display: block; margin-bottom: 14px; }
.donate-submit {
appearance: none;
width: 100%;
border: 1px solid var(--gold-deep);
border-radius: 8px;
background: var(--totemia-gold);
color: #1a1000;
font-weight: 900;
font-size: 14px;
padding: 13px;
cursor: pointer;
transition: filter .1s linear;
}
.donate-submit:hover:not(:disabled) { filter: brightness(.97); }
.donate-submit:disabled { opacity: .5; cursor: not-allowed; }
.donate-ledger-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.donate-ledger-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 6px;
border-top: 1px solid var(--totemia-line);
}
.donate-ledger-row:first-child { border-top: 0; }
.donate-ledger-amount {
font-weight: 800;
font-size: 14px;
color: var(--totemia-green);
font-variant-numeric: tabular-nums lining-nums;
white-space: nowrap;
}
.donate-raised {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin: 0 0 12px;
padding: 12px 14px;
border: 1px solid var(--totemia-line);
border-radius: 10px;
background: var(--surface-2);
}
.donate-raised span {
font-size: 10px;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--totemia-muted);
}
.donate-raised strong {
font-size: 20px;
font-weight: 800;
color: var(--totemia-green);
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: -.01em;
}
.donate-ledger-toggle {
appearance: none;
width: 100%;
margin-top: 10px;
border: 1px solid var(--totemia-line);
border-radius: 8px;
background: var(--surface);
color: var(--totemia-green);
font-weight: 800;
font-size: 12.5px;
padding: 9px;
cursor: pointer;
transition: background .1s linear;
}
.donate-ledger-toggle:hover { background: var(--surface-2); }
/* ── Documents / Articles placeholders ───────────────────────────────────── */
.org-tab-placeholder { text-align: center; padding: 40px 24px; }
.org-tab-placeholder h2 { margin: 8px 0 8px; }
.org-tab-placeholder p { color: var(--totemia-muted); max-width: 46ch; margin: 0 auto; }
/* Public historical archives: chancellor records and the official timeline. */
.government-chancellor-directory,
.government-chancellor-profile,
.history-reader {
font-family: var(--sans);
}
.government-chancellor-directory-hero {
place-items: center;
min-height: 128px;
text-align: center;
}
.government-chancellor-directory-hero .government-native-title {
margin-bottom: 0 !important;
}
.government-chancellor-directory .party-doc-section {
padding: 34px;
}
.government-chancellor-roster {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 34px 22px;
margin: 0;
}
.government-chancellor-card,
.government-chancellor-card.is-current {
display: block;
min-width: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
animation: none;
}
.government-chancellor-card .government-chancellor-portrait {
aspect-ratio: 4 / 3;
border-radius: 6px;
background: var(--surface-2);
}
.government-chancellor-portrait-link {
position: absolute;
inset: 0;
display: grid;
place-items: center;
overflow: hidden;
color: inherit;
text-decoration: none;
}
.government-chancellor-portrait-link > img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.government-chancellor-portrait-link .government-portrait-placeholder {
width: 100%;
height: 100%;
}
.government-chancellor-card-body {
display: block;
padding-top: 12px;
color: var(--totemia-ink);
text-decoration: none;
}
.government-chancellor-card-body h2 {
margin: 0 0 3px;
color: var(--totemia-green);
font-size: 18px;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.2;
}
.government-chancellor-card-body span {
display: block;
color: var(--totemia-muted);
font-size: 10px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}
.government-chancellor-card-body p {
margin: 7px 0 0;
color: var(--totemia-muted);
font-size: 12px;
line-height: 1.45;
}
.government-chancellor-card-body strong {
display: inline-block;
margin-top: 8px;
color: var(--totemia-green);
font-size: 10px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}
.government-chancellor-card:hover .government-chancellor-portrait,
.government-chancellor-card:focus-within .government-chancellor-portrait {
border-color: var(--totemia-gold);
}
.government-chancellor-profile {
overflow: hidden;
border: 1px solid var(--totemia-line);
border-radius: 10px;
background: var(--totemia-paper);
}
.government-chancellor-profile-hero {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
min-height: 480px;
border-bottom: 1px solid var(--totemia-line);
}
.government-chancellor-profile-portrait {
aspect-ratio: auto;
min-height: 480px;
border: 0;
border-radius: 0;
background: var(--surface-2);
}
.government-chancellor-profile-copy {
display: flex;
min-width: 0;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 54px;
}
.government-chancellor-back-link {
margin-bottom: 34px;
color: var(--totemia-green);
font-size: 12px;
font-weight: 800;
text-decoration: none;
}
.government-chancellor-back-link:hover {
text-decoration: underline;
}
.government-chancellor-profile-copy h1 {
margin: 10px 0 8px;
color: var(--totemia-green);
font-size: clamp(34px, 5vw, 58px);
font-weight: 800;
letter-spacing: -.045em;
line-height: 1.02;
}
.government-chancellor-profile-copy p {
margin: 0 0 18px;
color: var(--totemia-muted);
font-size: 15px;
line-height: 1.55;
}
.government-chancellor-profile-body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
gap: 48px;
max-width: 980px;
margin: 0 auto;
padding: 52px 34px 64px;
}
.government-chancellor-profile-main {
min-width: 0;
}
.government-chancellor-biography {
margin-bottom: 42px;
}
.government-chancellor-biography p {
margin: 18px 0 0;
color: var(--totemia-ink);
font-size: 17px;
line-height: 1.82;
}
.government-chancellor-office-record {
padding-top: 20px;
border-top: 1px solid var(--totemia-line);
}
.government-chancellor-profile-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 26px;
margin: 14px 0 0;
}
.government-chancellor-profile-facts div {
padding: 16px 0;
border-top: 1px solid color-mix(in srgb, var(--totemia-line) 72%, transparent);
}
.government-chancellor-profile-facts dt {
color: var(--totemia-muted);
font-size: 10px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}
.government-chancellor-profile-facts dd {
margin: 5px 0 0;
color: var(--totemia-ink);
font-size: 14px;
line-height: 1.5;
}
.government-chancellor-profile-rail {
padding-left: 28px;
border-left: 1px solid var(--totemia-line);
}
.government-chancellor-profile-rail nav {
display: grid;
margin-top: 12px;
}
.government-chancellor-profile-rail a {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 9px 0;
border-top: 1px solid var(--totemia-line);
color: var(--totemia-green);
font-size: 12px;
font-weight: 800;
text-decoration: none;
}
.government-chancellor-profile-rail a.active {
color: var(--totemia-gold-deep, var(--gold-deep));
}
.government-chancellor-profile-rail small {
color: var(--totemia-muted);
font-size: 10px;
font-weight: 800;
white-space: nowrap;
}
/* The card base (.party-doc) clips with overflow:hidden, which would trap the
sticky year bar inside the card. Clip only the horizontal axis (so long
lines can never escape the card and get sliced by the body's overflow-x:clip)
while leaving the vertical axis visible so the year bar can still pin. */
.history-reader {
overflow-x: clip;
overflow-y: visible;
}
.history-time-nav {
position: sticky;
top: var(--masthead-h, 56px);
z-index: 30;
display: grid;
grid-template-columns: 38px minmax(0, 1fr) 38px;
gap: 12px;
align-items: center;
padding: 16px 22px;
background: var(--totemia-green);
/* Square: the bar now sits below the document title, not at the card's top
edge, and pins flush to the viewport when scrolled. */
border-radius: 0;
box-shadow: 0 6px 16px rgba(8, 20, 16, 0.14);
}
.history-time-years {
display: grid;
grid-template-columns: repeat(5, minmax(72px, 1fr));
gap: 6px;
}
.history-time-year,
.history-time-arrow {
border: 0;
box-shadow: none;
cursor: pointer;
}
.history-time-year {
border-radius: 999px;
background: transparent;
color: rgba(255, 255, 255, .68);
font-size: 13px;
font-weight: 800;
padding: 8px 12px;
}
.history-time-year:hover,
.history-time-year:focus-visible {
background: rgba(255, 255, 255, .1);
color: #ffffff;
}
.history-time-year.active {
background: #ffffff;
color: var(--totemia-green);
}
.history-time-arrow {
display: grid;
width: 38px;
height: 38px;
place-items: center;
padding: 0;
border-radius: 0;
background: transparent;
color: #ffffff;
}
.history-time-arrow svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
.history-time-arrow:disabled {
opacity: .28;
cursor: default;
}
.history-stage {
padding: 34px 42px 44px;
/* Year switches scroll here; clear the masthead + pinned year bar. */
scroll-margin-top: calc(var(--masthead-h, 56px) + 80px);
}
.history-time-heading {
margin-bottom: 22px;
}
.history-time-heading h2 {
margin: 3px 0 0;
color: var(--totemia-green);
font-size: 34px;
font-weight: 800;
letter-spacing: -.035em;
}
.history-stage-body {
display: grid;
grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
gap: 30px;
align-items: start;
}
/* Left contents rail — a quick jump list of the year's named events. */
.history-contents {
position: sticky;
/* Sit just under the pinned year bar (masthead + bar height). */
top: calc(var(--masthead-h, 56px) + 90px);
align-self: start;
min-width: 0;
max-width: 100%;
}
.history-contents-label {
margin-bottom: 12px;
color: var(--totemia-muted);
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.history-contents ul {
margin: 0;
padding: 0;
min-width: 0;
list-style: none;
border-left: 1px solid var(--totemia-line);
}
.history-contents-link {
display: block;
width: 100%;
margin-left: -1px;
padding: 6px 14px;
border: 0;
border-left: 2px solid transparent;
background: transparent;
color: var(--totemia-muted);
font: inherit;
font-size: 12.5px;
font-weight: 600;
line-height: 1.4;
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
cursor: pointer;
}
.history-contents-link:hover,
.history-contents-link:focus-visible {
color: var(--totemia-ink);
}
.history-contents-link.active {
border-left-color: var(--totemia-gold);
color: var(--totemia-green);
font-weight: 800;
}
/* Right story stream — one node per grouped story, not per paragraph. */
.history-stream {
position: relative;
min-width: 0;
padding-left: 34px;
}
.history-story-main,
.history-story-lead,
.history-story-para,
.history-quote p,
.history-doc-line,
.history-doc-clause {
min-width: 0;
overflow-wrap: anywhere;
}
.history-stream::before {
position: absolute;
top: 14px;
bottom: 14px;
left: 7px;
width: 1px;
background: var(--totemia-line);
content: "";
}
.history-story {
position: relative;
padding: 4px 0 30px;
/* Jumps from the contents rail must clear the pinned year bar. */
scroll-margin-top: calc(var(--masthead-h, 56px) + 96px);
}
.history-story:last-child {
padding-bottom: 4px;
}
.history-story-node {
position: absolute;
top: 12px;
left: -34px;
width: 14px;
height: 14px;
border: 4px solid var(--totemia-paper);
border-radius: 50%;
background: var(--totemia-gold);
box-shadow: 0 0 0 1px var(--totemia-gold);
}
.history-story-main {
min-width: 0;
}
.history-story-realm {
display: inline-block;
margin-bottom: 9px;
padding: 2px 9px;
border: 1px solid var(--totemia-line);
border-radius: 999px;
color: var(--totemia-green);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.history-story-title {
margin: 0 0 8px;
color: var(--totemia-green);
font-size: 21px;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.22;
}
.history-story-lead {
margin: 0;
max-width: 74ch;
color: var(--totemia-ink);
font-size: 15.5px;
line-height: 1.78;
}
.history-story-para {
margin: 13px 0 0;
max-width: 74ch;
color: var(--totemia-ink);
font-size: 15px;
line-height: 1.76;
}
.history-quote {
margin: 15px 0 0;
padding: 2px 0 2px 18px;
border-left: 3px solid var(--totemia-gold);
}
.history-quote p {
margin: 0;
max-width: 72ch;
color: var(--totemia-ink);
font-size: 15px;
font-style: italic;
line-height: 1.74;
}
.history-quote-cite {
display: block;
margin-top: 9px;
color: var(--totemia-muted);
font-size: 12px;
font-style: normal;
font-weight: 700;
}
.history-quote-cite::before {
content: "— ";
}
.history-doc {
margin: 16px 0 0;
max-width: 68ch;
border: 1px solid var(--totemia-line);
border-radius: 10px;
background: var(--totemia-paper);
overflow: hidden;
}
.history-doc-title {
padding: 10px 18px;
border-bottom: 1px solid var(--totemia-line);
background: #f7f8fa;
color: var(--totemia-green);
font-size: 11.5px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.history-doc-body {
display: grid;
gap: 11px;
padding: 16px 18px;
}
.history-doc-line,
.history-doc-clause {
margin: 0;
color: var(--totemia-ink);
font-size: 14px;
line-height: 1.66;
}
.history-doc-clause {
padding-left: 16px;
text-indent: -16px;
font-weight: 600;
}
.history-stats {
margin: 15px 0 0;
max-width: 340px;
border: 1px solid var(--totemia-line);
border-radius: 8px;
overflow: hidden;
}
.history-stat-row {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 8px 14px;
border-bottom: 1px solid var(--totemia-line);
}
.history-stat-row:last-child {
border-bottom: 0;
}
.history-stat-row dt {
color: var(--totemia-muted);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
}
.history-stat-row dd {
margin: 0;
color: var(--totemia-ink);
font-size: 13px;
font-weight: 800;
}
/* Collapse the timeline to a single reading column before the two-column grid
gets cramped on tablets — the contents rail + story column fighting for
width was what pushed text off the right edge. The inline story titles serve
as the in-year navigation once the rail is gone. */
@media (max-width: 900px) {
.history-stage-body {
grid-template-columns: 1fr;
gap: 0;
}
.history-contents {
display: none;
}
.history-stream {
padding-left: 28px;
}
.history-stream::before {
left: 6px;
}
.history-story-node {
left: -28px;
}
}
@media (max-width: 980px) {
.government-chancellor-roster {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.government-chancellor-profile-hero {
grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
}
.government-chancellor-profile-copy {
padding: 38px;
}
}
@media (max-width: 720px) {
.mobile-nav-toggle,
.mobile-nav-toggle:hover,
.mobile-nav-toggle:focus-visible,
.mobile-nav-toggle.active {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: #ffffff !important;
box-shadow: none !important;
transform: none !important;
}
.government-chancellor-directory .party-doc-section {
padding: 24px 18px;
}
.government-chancellor-roster {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px 14px;
}
.government-chancellor-card .government-chancellor-portrait {
max-width: none;
margin: 0;
}
.government-chancellor-profile {
border-right: 0;
border-left: 0;
border-radius: 0;
}
.government-chancellor-profile-hero {
grid-template-columns: 1fr;
min-height: 0;
}
.government-chancellor-profile-portrait {
min-height: 340px;
}
.government-chancellor-profile-copy {
padding: 30px 22px 34px;
}
.government-chancellor-back-link {
margin-bottom: 24px;
}
.government-chancellor-profile-copy h1 {
font-size: 36px;
}
.government-chancellor-profile-body {
grid-template-columns: 1fr;
gap: 38px;
padding: 34px 22px 48px;
}
.government-chancellor-profile-facts {
grid-template-columns: 1fr;
}
.government-chancellor-profile-rail {
padding: 0;
border-left: 0;
}
.history-time-nav {
grid-template-columns: 32px minmax(0, 1fr) 32px;
gap: 4px;
padding: 12px 10px;
}
.history-time-years {
display: flex;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
}
.history-time-years::-webkit-scrollbar {
display: none;
}
.history-time-year {
min-width: 66px;
padding: 7px 10px;
}
.history-stage {
padding: 26px 20px 34px;
}
.history-time-heading h2 {
font-size: 30px;
}
.history-story-lead {
font-size: 15px;
line-height: 1.72;
}
.history-story-title {
font-size: 19px;
}
}
/* Home page — full-bleed photo carousel hero (modelled on the City of San
Luis home page), a centered quick-access tile deck that overlaps the hero,
and a clean dated news notice. Gold is used only as a thin accent. */
/* The hero breaks out of the centered 1180px content column to span the full
viewport, so `overflow-x: clip` keeps the 100vw breakout from spawning a
horizontal scrollbar. `clip` (not `hidden`) leaves the sticky masthead
working. */
body {
overflow-x: clip;
}
/* Full-bleed: span the whole viewport width regardless of the centered
content column, and pull up under the nav so the hero meets it edge-to-edge.
The −16px cancels `.content`'s top padding. */
.home-hero-carousel {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: -16px;
}
.home-hero-stage {
position: relative;
width: 100%;
height: clamp(460px, 80vh, 820px);
overflow: hidden;
background: #0b1f1a;
}
.home-hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.75s ease;
}
.home-hero-slide.active {
opacity: 1;
}
.home-hero-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
image-rendering: auto;
}
.home-hero-scrim {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(8, 20, 16, 0.34) 0%,
rgba(8, 20, 16, 0.44) 55%,
rgba(8, 20, 16, 0.68) 100%
);
}
.home-hero-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
/* Extra bottom padding lifts the welcome above the tile deck that overlaps
the lower edge of the hero. */
padding: clamp(24px, 5vw, 64px) clamp(20px, 5vw, 64px) clamp(64px, 12vh, 150px);
}
.home-hero-welcome {
max-width: 760px;
color: #fff;
}
.home-hero-kicker {
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.74rem;
font-weight: 700;
color: var(--gold, #d8b14a);
margin-bottom: 10px;
}
.home-hero-welcome h1 {
color: #fff;
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-size: clamp(2.1rem, 5.2vw, 3.6rem);
font-weight: 800;
letter-spacing: -0.015em;
line-height: 1.04;
margin: 0 0 0.42em;
}
.home-hero-welcome p {
color: rgba(255, 255, 255, 0.94);
font-size: clamp(1rem, 1.5vw, 1.2rem);
margin: 0 auto;
max-width: 58ch;
}
.home-hero-native {
margin-top: 8px !important;
font-style: italic;
color: rgba(255, 255, 255, 0.8) !important;
}
/* Quick-access tile deck — a single continuous white bar that overlaps the
bottom of the hero (the connected quick-link card in the San Luis layout).
The three links live inside one rounded surface, divided by hairlines, so
they read as one toolbar rather than three separate floating cards. */
.home-tile-deck {
display: flex;
align-items: stretch;
position: relative;
z-index: 3;
width: min(720px, 100%);
margin: -40px auto 0;
background: var(--surface, #fff);
border: 1px solid var(--line, #e3e6ea);
border-radius: 8px;
box-shadow: 0 12px 30px rgba(20, 30, 26, 0.12);
overflow: hidden;
}
.home-tile {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 22px 14px;
text-decoration: none;
transition: background 0.15s ease;
}
/* Hairline separators keep the bar continuous instead of gapped tiles. */
.home-tile + .home-tile {
border-left: 1px solid var(--line, #e3e6ea);
}
.home-tile:hover {
background: rgba(18, 60, 50, 0.05);
}
.home-tile-icon {
width: 54px;
height: 54px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--totemia-green, #123c32);
color: #fff;
transition: transform 0.15s ease;
}
.home-tile:hover .home-tile-icon {
transform: translateY(-2px);
}
.home-tile-icon svg {
width: 24px;
height: 24px;
fill: currentColor;
stroke: none;
}
.home-tile-label {
font-family: var(--sans, "Inter", system-ui, sans-serif);
font-weight: 600;
font-size: 0.9rem;
color: var(--ink, #14171a);
text-align: center;
}
/* Central-government News band. The colored surround mirrors the civic
homepage reference while keeping Totemia's green/gold brand treatment. */
.home-news {
position: relative;
width: 100vw;
margin: 44px calc(50% - 50vw) 0;
padding: clamp(42px, 6vw, 72px) 24px clamp(52px, 7vw, 86px);
overflow: hidden;
border-top: 6px solid var(--totemia-gold, #c4981f);
background: var(--totemia-green, #123c32);
color: #ffffff;
}
.home-news::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(18, 60, 50, .98), rgba(18, 60, 50, .82)),
url("/assets/courasel/original/totemia-10.png") center / cover no-repeat;
opacity: .72;
}
.home-news-inner {
position: relative;
z-index: 1;
width: min(1320px, 100%);
margin: 0 auto;
}
.home-news-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 18px;
margin-bottom: 22px;
}
.home-news-head .registry-label {
color: var(--totemia-gold-soft, #dcc48a);
}
.home-news h2 {
margin: 2px 0 0;
color: #ffffff;
font-size: clamp(2.15rem, 5vw, 3.45rem);
font-weight: 900;
line-height: .98;
}
.home-news-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 18px;
}
.home-news-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.home-news-tag {
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--totemia-green, #123c32);
}
.home-news-card,
.home-news-empty {
display: grid;
grid-template-rows: auto 1fr;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .18);
border-top: 4px solid var(--totemia-gold, #c4981f);
border-radius: 8px;
background: #ffffff;
color: var(--totemia-ink, #14171a);
box-shadow: 0 22px 46px rgba(4, 14, 11, .22);
}
.home-news-card-media,
.home-news-card-date {
position: relative;
display: block;
height: 180px;
background: #0b1f1a;
text-decoration: none;
}
.home-news-card-date {
display: grid;
height: auto;
min-height: 74px;
align-items: end;
padding: 14px;
background: #ffffff;
}
.home-news-card-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.home-news-card-media time,
.home-news-card-date time {
position: absolute;
left: 14px;
bottom: -14px;
display: inline-block;
max-width: calc(100% - 28px);
padding: 8px 10px;
border-left: 4px solid var(--totemia-gold, #c4981f);
background: var(--totemia-green, #123c32);
color: #ffffff;
font-size: 12px;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
}
.home-news-card-date time {
position: static;
max-width: 100%;
}
.home-news-card-body {
display: grid;
gap: 9px;
padding: 26px 18px 18px;
}
.home-news-card.coverless .home-news-card-body {
padding-top: 14px;
}
.home-news-card h3,
.home-news-empty h3 {
margin: 0;
font-size: clamp(1.08rem, 1.8vw, 1.45rem);
line-height: 1.22;
}
.home-news-card h3 a {
color: var(--ink, #14171a);
text-decoration: none;
}
.home-news-card h3 a:hover {
color: var(--totemia-green, #123c32);
}
.home-news-card p,
.home-news-empty p {
margin: 0;
color: var(--muted, #5b636c);
font-size: 14px;
line-height: 1.55;
}
.home-news-read {
display: inline-flex;
width: fit-content;
margin-top: 2px;
border-bottom: 2px solid var(--totemia-gold, #c4981f);
color: var(--totemia-green, #123c32);
font-weight: 900;
text-decoration: none;
}
.home-news-empty {
max-width: 760px;
padding: 22px 26px;
}
.home-news-native {
margin-top: 6px !important;
font-style: italic;
color: var(--muted, #5b636c) !important;
}
/* Anonymous sign-in call to action. */
.home-signin-cta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 22px;
flex-wrap: wrap;
background: var(--surface, #fff);
border: 1px solid var(--line, #e3e6ea);
border-radius: 8px;
padding: 24px 26px;
margin-top: 28px;
}
.home-signin-cta h2 {
margin: 0 0 4px;
}
.home-signin-cta p {
margin: 0;
color: var(--muted, #5b636c);
}
@media (max-width: 720px) {
.home-hero-carousel {
margin-top: -12px;
}
}
@media (max-width: 1180px) {
.home-news-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.home-news-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.home-tile-deck {
margin-top: -28px;
width: calc(100% - 24px);
}
.home-tile {
padding: 16px 8px;
gap: 8px;
}
.home-tile-icon {
width: 46px;
height: 46px;
}
.home-tile-icon svg {
width: 20px;
height: 20px;
}
.home-tile-label {
font-size: 0.78rem;
}
.home-news {
padding: 34px 14px 42px;
}
.home-news-head {
align-items: start;
flex-direction: column;
}
.home-news-grid {
grid-template-columns: 1fr;
}
.home-news-card-media {
height: 186px;
}
.home-news-empty {
padding: 18px;
}
}
/* Personal banking redesign. Loaded after the shared portal styles so the
migrated Next page can move away from the old pill-heavy SPA treatment. */
.banking-account-card {
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 24px;
background: var(--surface, #fff);
border: 1px solid rgba(18, 60, 50, 0.16);
border-top: 0;
border-radius: 18px;
padding: 24px 28px;
}
.banking-account-identity {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.banking-account-eyebrow,
.banking-section-eyebrow {
color: rgba(18, 60, 50, 0.66);
letter-spacing: 0.16em;
}
.banking-account-row {
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.banking-account-number {
color: var(--ink, #14171a);
font-size: 1rem;
letter-spacing: 0.04em;
}
.banking-account-name {
color: var(--totemia-green, #123c32);
font-size: 1rem;
font-weight: 800;
}
.banking-account-status {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 0 0 0 10px;
border-left: 3px solid currentColor;
border-radius: 0;
background: transparent;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.11em;
line-height: 1;
text-transform: uppercase;
}
.banking-account-status.active {
color: #155642;
}
.banking-account-status.limited {
color: #8a6320;
}
.banking-account-balance {
min-width: 260px;
display: grid;
place-content: center end;
padding-left: 28px;
border-left: 1px solid rgba(18, 60, 50, 0.12);
text-align: right;
}
.banking-account-balance-label {
color: rgba(18, 60, 50, 0.66);
font-size: 0.72rem;
letter-spacing: 0.16em;
}
.banking-account-balance-value {
color: var(--totemia-green, #123c32);
display: inline-block;
font-size: clamp(2rem, 4vw, 2.8rem);
letter-spacing: -0.055em;
transform-origin: center bottom;
}
.banking-balance-steady {
color: var(--totemia-green, #123c32);
}
.banking-balance-negative {
color: #a84a3c;
animation: banking-balance-red-dance 3.2s ease-in-out infinite;
text-shadow: 0 0 12px rgba(168, 74, 60, 0.16);
}
.banking-balance-debt {
color: #bb332d;
animation: banking-balance-red-dance 2.4s ease-in-out infinite;
text-shadow: 0 0 18px rgba(187, 51, 45, 0.22);
}
.banking-balance-debt-critical {
color: #d11f1f;
animation: banking-balance-red-alert 1.45s ease-in-out infinite;
text-shadow: 0 0 22px rgba(209, 31, 31, 0.28);
}
.banking-balance-wealth-growth {
color: #158153;
animation: banking-balance-green-dance 3.8s ease-in-out infinite;
text-shadow: 0 12px 24px rgba(21, 129, 83, 0.12);
}
.banking-balance-wealth-strong {
color: #6d3fc7;
animation: banking-balance-purple-dance 3.1s ease-in-out infinite;
text-shadow: 0 0 18px rgba(109, 63, 199, 0.18), 0 14px 28px rgba(109, 63, 199, 0.14);
}
.banking-balance-wealth-major {
color: #b78305;
animation: banking-balance-gold-dance 2.6s ease-in-out infinite;
text-shadow: 0 0 16px rgba(212, 175, 55, 0.32), 0 14px 30px rgba(183, 131, 5, 0.18);
}
@keyframes banking-balance-green-dance {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
24% { transform: translate3d(1px, -2px, 0) rotate(-0.35deg) scale(1.012); }
52% { transform: translate3d(-1px, 1px, 0) rotate(0.25deg) scale(1.004); }
76% { transform: translate3d(2px, -1px, 0) rotate(-0.2deg) scale(1.016); }
}
@keyframes banking-balance-purple-dance {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); filter: saturate(1); }
20% { transform: translate3d(-2px, -2px, 0) rotate(-0.5deg) scale(1.018); }
45% { transform: translate3d(2px, 1px, 0) rotate(0.45deg) scale(1.006); filter: saturate(1.14); }
70% { transform: translate3d(-1px, -1px, 0) rotate(-0.25deg) scale(1.024); }
}
@keyframes banking-balance-gold-dance {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); filter: saturate(1) brightness(1); }
18% { transform: translate3d(2px, -3px, 0) rotate(0.45deg) scale(1.02); }
40% { transform: translate3d(-2px, 1px, 0) rotate(-0.35deg) scale(1.012); filter: saturate(1.22) brightness(1.04); }
64% { transform: translate3d(1px, -2px, 0) rotate(0.32deg) scale(1.03); }
82% { transform: translate3d(-1px, 1px, 0) rotate(-0.18deg) scale(1.006); }
}
@keyframes banking-balance-red-dance {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
28% { transform: translate3d(-1px, 1px, 0) rotate(-0.25deg); opacity: .9; }
54% { transform: translate3d(1px, 0, 0) rotate(0.2deg); opacity: .96; }
78% { transform: translate3d(0, 1px, 0) rotate(-0.12deg); opacity: .88; }
}
@keyframes banking-balance-red-alert {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 1; }
22% { transform: translate3d(-2px, 1px, 0) rotate(-0.45deg) scale(1.006); opacity: .84; }
44% { transform: translate3d(2px, 0, 0) rotate(0.4deg) scale(1.014); opacity: 1; }
66% { transform: translate3d(-1px, 1px, 0) rotate(-0.28deg) scale(1.004); opacity: .9; }
}
.banking-tab-bar {
width: fit-content;
gap: 0;
margin-top: 20px;
margin-bottom: 16px;
padding: 4px;
background: rgba(18, 60, 50, 0.06);
border: 1px solid rgba(18, 60, 50, 0.1);
border-radius: 12px;
}
.banking-tab {
border: 0;
border-radius: 9px;
margin: 0;
padding: 10px 16px;
color: rgba(20, 23, 26, 0.62);
}
.banking-tab.active {
background: #fff;
border-bottom-color: transparent;
color: var(--totemia-green, #123c32);
}
.banking-overview-section {
border-color: rgba(18, 60, 50, 0.12);
border-radius: 18px;
padding: 22px 24px;
}
.banking-chart-section {
padding-bottom: 12px;
}
.banking-chart-frame {
min-height: 270px;
}
.banking-section-head {
border-bottom: 1px solid rgba(18, 60, 50, 0.08);
padding-bottom: 12px;
}
.banking-link-btn,
.banking-export-btn {
border-radius: 2px;
}
.banking-ledger-table {
overflow: hidden;
border: 1px solid rgba(18, 60, 50, 0.1);
border-radius: 14px;
}
.banking-ledger-table table {
border-collapse: collapse;
}
.banking-ledger-table thead th {
background: #f7f9f8;
color: rgba(18, 60, 50, 0.66);
letter-spacing: 0.14em;
}
.banking-ledger-table tbody tr {
transition: background 0.12s ease;
}
.banking-ledger-table tbody tr:hover {
background: rgba(18, 60, 50, 0.035);
}
.banking-ledger-table .tx-counterparty {
color: var(--ink, #14171a);
}
.banking-ledger-table .tx-flow {
display: inline-flex;
flex-direction: column;
gap: 5px;
color: rgba(20, 23, 26, 0.74);
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.banking-ledger-table .tx-flow-mark {
width: 34px;
height: 4px;
border-radius: 999px;
background: currentColor;
}
.banking-ledger-table .tx-flow.in {
color: #17654c;
}
.banking-ledger-table .tx-flow.out {
color: #944030;
}
.banking-ledger-table .tx-type {
display: block;
margin-top: 5px;
padding: 0;
border: 0;
background: transparent;
color: rgba(42, 35, 23, 0.58);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.08em;
}
.banking-ledger-table .tx-amount {
font-size: 0.96rem;
}
.banking-ledger-table .tx-amount.in {
color: #17654c;
}
.banking-ledger-table .tx-amount.out {
color: #944030;
}
@media (max-width: 720px) {
.banking-account-card,
.banking-account-balance {
display: block;
text-align: left;
}
.banking-account-card {
padding: 20px;
}
.banking-account-balance {
min-width: 0;
margin-top: 18px;
padding: 16px 0 0;
border-left: 0;
border-top: 1px solid rgba(18, 60, 50, 0.12);
}
.banking-tab-bar {
width: 100%;
}
.banking-tab {
flex: 1;
}
.banking-overview-section {
padding: 18px;
}
/* Transaction viewing on phones: the 4-column ledger table forced
horizontal scrolling and cut off the amount/flow columns. Collapse
each row into a stacked record — date + amount on the first line,
counterparty/reason below, flow flag last — so the whole movement is
readable without panning. Applies everywhere BankingLedgerTable is
used (central transaction log, GBA/POBA/ROBA ledgers, my-banking). */
.banking-ledger-table {
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
}
.banking-ledger-table table,
.banking-ledger-table tbody,
.banking-ledger-table tbody tr,
.banking-ledger-table tbody td {
display: block;
width: 100%;
}
.banking-ledger-table thead {
display: none;
}
.banking-ledger-table tbody tr {
margin-bottom: 10px;
padding: 12px 14px;
border: 1px solid rgba(18, 60, 50, 0.12);
border-radius: 2px;
background: #ffffff;
}
.banking-ledger-table tbody tr:last-child {
margin-bottom: 0;
}
.banking-ledger-table tbody tr.banking-ledger-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px 14px;
align-items: start;
}
.banking-ledger-table tbody td {
padding: 0;
border: 0;
}
.banking-ledger-table .banking-ledger-row td:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.banking-ledger-table .banking-ledger-row td:nth-child(4) {
grid-column: 2;
grid-row: 1;
width: auto;
text-align: right;
}
.banking-ledger-table .banking-ledger-row td:nth-child(2) {
grid-column: 1 / -1;
grid-row: 2;
}
.banking-ledger-table .banking-ledger-row td:nth-child(3) {
grid-column: 1 / -1;
grid-row: 3;
}
.banking-ledger-table .tx-flow {
flex-direction: row;
align-items: center;
gap: 8px;
}
.banking-ledger-table .tx-flow-mark {
width: 22px;
}
.banking-ledger-table .tx-type {
display: inline-block;
margin: 0 0 0 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.banking-account-balance-value {
animation: none;
transform: none;
}
}
/* POBA / ROBA org account pages share the GBA account navigation while carrying
the party/religion brand accent through the hero, active tab, and fund rows. */
.org-account-view .org-account-hero {
position: relative;
overflow: hidden;
border-top: 0 !important;
}
.org-account-view .org-account-hero::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 8px;
background: var(--party-accent, var(--totemia-gold));
}
.org-account-view .official-seal {
width: 88px;
height: 88px;
padding: 7px;
border-radius: 4px;
border-color: color-mix(in srgb, var(--party-accent-color, var(--totemia-green)) 24%, var(--totemia-line));
background: #ffffff;
}
.org-account-view .official-seal-img {
width: 100%;
height: 100%;
border-radius: 3px;
background: #ffffff;
object-fit: contain;
}
.org-account-view .fund-tab.active {
border-bottom-color: transparent !important;
background-image: var(--party-accent, var(--totemia-gold)) !important;
background-position: left bottom !important;
background-repeat: no-repeat !important;
background-size: 100% 5px !important;
}
.org-account-view .official-stat {
border: 0;
border-radius: 4px;
background: var(--totemia-ivory);
}
.org-account-view .official-stat.major strong {
color: var(--totemia-green);
}
.org-account-view .related-fund-record {
border: 0;
background: var(--totemia-ivory);
padding-left: 20px;
border-radius: 4px;
}
.org-account-view .related-fund-record .fund-line {
display: block;
background: var(--party-accent, var(--totemia-gold));
width: 6px;
}
.org-account-view .official-link-button,
.org-account-view .official-secondary,
.org-account-view .secondary,
.org-account-view .fund-tab {
border-radius: 2px !important;
}
.operation-form-grid .settings-field > span,
.operation-form-grid .combobox-label {
color: rgba(18, 60, 50, 0.66);
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.12em;
}
.operation-form-grid .settings-field input,
.operation-form-grid .combobox-input {
min-height: 40px;
border-color: rgba(18, 60, 50, 0.14);
border-radius: 8px;
background: #ffffff;
color: var(--ink, #14171a);
font-size: 0.9rem;
font-weight: 700;
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: var(--num-feat);
}
.operation-form-grid .combobox-selected {
min-height: 48px;
border-color: rgba(18, 60, 50, 0.16);
border-radius: 8px;
background: #ffffff;
}
.operation-form-grid .combobox-option {
color: var(--ink, #14171a);
box-shadow: none;
}
.operation-form-grid .combobox-option-main strong,
.operation-form-grid .combobox-selected-info strong {
color: var(--totemia-green, #123c32);
font-weight: 900;
}
.operation-form-grid .combobox-account-avatar {
border-radius: 8px;
object-fit: contain;
}
.operation-form-grid .combobox-option .tx-amount {
font-size: 0.86rem;
font-weight: 900;
}
/* Public party/religion detail pages: late brand overrides for the shared
* party-doc shell and tab bar. */
.party-detail-scope .party-doc {
position: relative;
overflow: hidden;
border: 0 !important;
border-radius: 6px;
background: #ffffff;
}
.party-detail-scope .party-doc::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 8px;
background: var(--party-accent, var(--totemia-gold));
}
.party-detail-scope .party-doc-hero {
padding-top: 32px;
}
.party-detail-scope .party-doc-color-cta,
.party-detail-scope .official-link-button,
.party-detail-scope .official-secondary,
.party-detail-scope .secondary {
border-radius: 4px !important;
}
.party-detail-scope .party-doc-color-cta {
border-color: color-mix(in srgb, var(--party-accent-color, #123c32) 24%, var(--totemia-line));
}
.party-detail-scope .org-tabbar {
gap: 2px;
padding: 0 2px;
border-bottom: 1px solid var(--totemia-line);
}
.party-detail-scope .org-tab {
position: relative;
display: block;
border: 0;
border-radius: 0;
margin-bottom: -1px;
padding: 11px 16px 15px;
background: transparent;
transition: color .12s ease, background-color .12s ease;
}
.party-detail-scope .org-tab:hover {
color: var(--party-accent-color, var(--totemia-green));
background-color: color-mix(in srgb, var(--party-accent-color, #123c32) 6%, transparent);
}
/* Active tab: ink label + a thick on-brand bar. Uses ::after with `background`
(not background-image) so solid hex accents and multi-stop gradients both
render — background-image ignores plain colors, which is why the bar vanished. */
.party-detail-scope .org-tab.active {
color: var(--totemia-ink);
}
.party-detail-scope .org-tab.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 6px;
background: var(--party-accent, var(--party-accent-color, var(--totemia-gold)));
border-radius: 2px 2px 0 0;
}
@media (prefers-reduced-motion: reduce) {
.party-detail-scope .org-tab {
transition: none;
}
}
.party-detail-scope .party-doc-section,
.party-detail-scope .party-doc-stat {
border-color: transparent !important;
box-shadow: none !important;
}
/* No tinted boxes around the leader / member-count stats — they read as plain
figures on the white surface. The only accent kept is the leader card's
dynamic left bar (see .party-doc-stat-leader). */
.party-detail-scope .party-doc-stat {
background: transparent;
}
.party-detail-scope .party-leader-badge,
.party-detail-scope .public-member-badge {
border: 0 !important;
border-radius: 4px !important;
background: var(--role-color, var(--party-accent, var(--totemia-gold))) !important;
color: #ffffff !important;
}
/* Featured roles on the public org page stack top-to-bottom — each role
takes its own full-width row under the leader/head card — while the
role's holders flow left-to-right inside the row and wrap. */
.party-doc-stat.party-doc-stat-featured {
flex-basis: 100%;
min-width: 100%;
border-left: 3px solid var(--party-accent-color, var(--totemia-gold));
padding-left: 13px;
}
.party-doc-featured-holders {
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
}
/* Region document page (/maps/regions/
) — overview stat grid + ordered
boundary-vertex table. Reuses portal tokens; no new look. */
.region-overview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 16px;
margin: 0;
}
.region-overview-grid dd {
margin: 4px 0 0;
color: var(--totemia-ink);
font-size: 15px;
}
.region-overview-grid dd strong {
font-size: 22px;
font-weight: 800;
color: var(--party-accent-color, var(--totemia-green));
font-variant-numeric: tabular-nums lining-nums;
}
.region-vertex-table td {
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: 0.02em;
}
/* Modern bold pass for the org surfaces: public party/religion list cards,
* payroll receipts, the workspace audit log, and the shared in-house confirm
* dialog. Everything reuses the established tokens and the flat left-bar
* status treatment from the banking redesign (22-banking-redesign.css) —
* no rounded pill badges, no decorative gradients on functional surfaces. */
/* ── Shared flat status flag (replaces .official-badge pills) ─────────── */
.org-status-flag {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 0 0 10px;
border-left: 3px solid currentColor;
background: transparent;
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.11em;
line-height: 1.2;
text-transform: uppercase;
white-space: nowrap;
}
.org-status-flag.ok { color: #155642; }
.org-status-flag.warn { color: #8a6320; }
.org-status-flag.bad { color: #9a241d; }
.org-status-flag.muted { color: var(--totemia-muted, #6a5b3a); }
/* ── In-house confirm dialog (no native window.confirm) ───────────────── */
.interior-delete-panel.org-confirm-panel {
position: relative;
overflow: hidden;
border-top: 0;
padding-top: 26px;
}
/* Accent strip uses background (not border) so per-org gradient accents
* render; falls back to gold outside branded scopes. */
.interior-delete-panel.org-confirm-panel::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 6px;
background: var(--party-accent, var(--totemia-gold, #d5b637));
}
.interior-delete-panel.org-confirm-panel.danger::before {
background: #9a241d;
}
/* ── Public party / religion list ─────────────────────────────────────── */
/* Document-style page heading: the boxed hero read as a stray bordered bar
* above the cards. Flat bold title instead. */
.official-hero.public-list-hero {
border: 0;
background: transparent;
box-shadow: none;
padding: 14px 2px 4px;
margin-bottom: 4px;
}
.official-hero.public-list-hero h1 {
font-size: clamp(24px, 3.2vw, 32px);
font-weight: 900;
letter-spacing: -0.025em;
margin: 0;
}
.official-hero.public-list-hero .registry-label {
color: var(--totemia-muted, #6a5b3a);
}
/* Thicker brand line + bolder card type. */
.public-party-card.party-accent::before {
height: 10px;
}
.public-party-card {
border-radius: 6px;
overflow: hidden;
}
.public-party-card .public-party-title {
font-size: 17px;
font-weight: 900;
letter-spacing: -0.015em;
}
.public-party-card .public-party-body {
gap: 8px;
}
.public-party-card-leader {
border-left: 3px solid var(--party-accent-color, var(--totemia-gold, #d5b637));
padding-left: 9px;
}
.public-party-card-leader strong {
font-size: 13px;
font-weight: 800;
color: var(--totemia-ink, #14171a);
}
.public-party-card-members,
.public-party-card .public-party-meta {
font-weight: 800;
color: var(--totemia-ink, #14171a);
}
/* ── Payroll receipt document ──────────────────────────────────────────── */
.org-receipt-hero {
position: relative;
overflow: hidden;
border-top: 0 !important;
}
.org-receipt-hero::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 8px;
background: var(--party-accent, var(--totemia-gold, #d5b637));
}
.org-receipt-hero {
padding-top: 24px;
}
.org-receipt-seal {
width: 76px;
height: 76px;
flex-shrink: 0;
display: grid;
place-items: center;
padding: 6px;
border: 1px solid color-mix(in srgb, var(--party-accent-color, var(--totemia-green, #123c32)) 24%, var(--totemia-line, #e8dfbf));
border-radius: 4px;
background: #ffffff;
}
.org-receipt-seal img {
width: 100%;
height: 100%;
object-fit: contain;
}
.org-receipt-seal-fallback {
color: var(--totemia-muted, #6a5b3a);
font-size: 20px;
font-weight: 900;
text-transform: uppercase;
}
.org-receipt-hero h1 {
font-weight: 900;
letter-spacing: -0.02em;
}
/* Flat bold stat band — no boxed old-school stat cards. */
.org-receipt-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 0;
margin: 14px 0 18px;
border: 1px solid rgba(18, 60, 50, 0.12);
border-radius: 6px;
background: var(--surface, #ffffff);
}
.org-receipt-stat {
display: grid;
align-content: center;
gap: 4px;
padding: 16px 18px;
border-left: 1px solid rgba(18, 60, 50, 0.1);
min-width: 0;
}
.org-receipt-stat:first-child {
border-left: 0;
}
.org-receipt-stat > span {
color: rgba(18, 60, 50, 0.66);
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.org-receipt-stat > strong {
color: var(--totemia-green, #123c32);
font-size: clamp(1.4rem, 2.4vw, 1.9rem);
font-weight: 900;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums lining-nums;
line-height: 1.1;
}
.org-receipt-stat.major > strong {
font-size: clamp(1.8rem, 3vw, 2.4rem);
}
.org-receipt-stat.bad > strong {
color: #9a241d;
}
.org-receipt-stat > small {
color: var(--totemia-muted, #6a5b3a);
font-size: 0.74rem;
font-weight: 700;
}
/* Cost-by-role reuses the salary-role-card family (08-party-colors.css owns
* the left role-color bar + tint inside .org-workspace). Receipt additions: */
.org-receipt-role-total {
color: var(--totemia-green, #123c32);
font-size: 1.3rem;
font-weight: 900;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums lining-nums;
}
.org-receipt-role-meta {
color: var(--totemia-muted, #6a5b3a);
font-size: 0.78rem;
font-weight: 700;
}
/* Payments table: bold ink identity links (no default purple), avatars,
* role color marks, tabular amounts. */
.org-receipt-table a,
.org-receipt-table a strong {
color: var(--totemia-ink, #14171a);
text-decoration: none;
}
.org-receipt-table a:hover strong {
color: var(--totemia-green, #123c32);
text-decoration: underline;
text-underline-offset: 3px;
}
.org-receipt-table .user-identity-line strong {
font-weight: 800;
}
.org-receipt-table td {
vertical-align: middle;
}
.org-receipt-role-cell {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 800;
color: var(--totemia-ink, #14171a);
}
.org-receipt-role-mark {
width: 4px;
height: 18px;
flex-shrink: 0;
border-radius: 2px;
background: var(--role-color, var(--party-accent-color, var(--totemia-gold, #d5b637)));
}
.org-receipt-amount {
font-weight: 900;
font-variant-numeric: tabular-nums lining-nums;
color: var(--totemia-green, #123c32);
}
/* ── Workspace audit log ──────────────────────────────────────────────── */
.org-audit-list {
display: grid;
gap: 0;
border: 1px solid rgba(18, 60, 50, 0.12);
border-radius: 6px;
background: var(--surface, #ffffff);
overflow: hidden;
}
.org-audit-entry {
display: grid;
grid-template-columns: 4px minmax(150px, 190px) minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 12px 16px 12px 0;
border-top: 1px solid rgba(18, 60, 50, 0.08);
}
.org-audit-entry:first-child {
border-top: 0;
}
.org-audit-mark {
align-self: stretch;
background: var(--audit-color, var(--totemia-gold, #d5b637));
}
.org-audit-action {
display: grid;
gap: 3px;
min-width: 0;
}
.org-audit-action strong {
color: var(--audit-color, var(--totemia-ink, #14171a));
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.org-audit-action time {
color: var(--totemia-muted, #6a5b3a);
font-size: 0.72rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.org-audit-body {
display: grid;
gap: 3px;
min-width: 0;
}
.org-audit-body p {
margin: 0;
color: var(--totemia-ink, #14171a);
font-size: 0.86rem;
font-weight: 600;
line-height: 1.4;
overflow-wrap: anywhere;
}
.org-audit-actor {
justify-self: end;
}
.org-audit-actor a {
color: var(--totemia-ink, #14171a);
text-decoration: none;
}
.org-audit-actor a:hover strong {
text-decoration: underline;
text-underline-offset: 3px;
}
.org-audit-actor .user-identity-line strong {
font-weight: 800;
font-size: 0.84rem;
}
/* Category accents — same palette the rest of the portal already uses. */
.org-audit-entry.cat-role { --audit-color: #b78305; }
.org-audit-entry.cat-member { --audit-color: #155642; }
.org-audit-entry.cat-fund { --audit-color: #1d4ed8; }
.org-audit-entry.cat-payroll { --audit-color: var(--totemia-green, #123c32); }
.org-audit-entry.cat-danger { --audit-color: #9a241d; }
.org-audit-entry.cat-policy { --audit-color: #6d28d9; }
@media (max-width: 760px) {
.org-audit-entry {
grid-template-columns: 4px minmax(0, 1fr);
align-items: start;
row-gap: 6px;
}
.org-audit-mark {
grid-row: 1 / span 3;
}
.org-audit-actor {
justify-self: start;
}
.org-receipt-stat {
border-left: 0;
border-top: 1px solid rgba(18, 60, 50, 0.1);
}
.org-receipt-stat:first-child {
border-top: 0;
}
}
/* ── Government account / fund detail polish ─────────────────────────────── */
/* Thick accent rule under the fund tab navigation, matching the bold accent
strip the public party / religion documents carry. The accent inherits the
account's --party-accent (government green for GAs, org color elsewhere). */
.org-account-view .fund-tab-bar {
border-bottom-width: 4px;
border-bottom-color: var(--party-accent, var(--totemia-gold, #d5b637));
}
/* Salary edit editor: align with the bold look. The inline editor used to
inherit the global gold focus glow (the "excessive yellow shadow"); here the
field reads flat with square corners and a role-tinted green focus ring. */
.org-workspace .salary-role-card-edit .settings-field > span {
color: var(--totemia-muted, #6a5b3a);
font-weight: 900;
letter-spacing: 0.09em;
}
.org-workspace .salary-role-card-edit input[type="text"] {
border-radius: 4px;
border-color: color-mix(
in srgb,
var(--role-color, var(--totemia-green, #123c32)) 30%,
var(--totemia-line, #e6e0d2)
);
font-size: 15px;
font-weight: 800;
font-variant-numeric: tabular-nums lining-nums;
color: var(--totemia-ink, #14171a);
}
.org-workspace .salary-role-card-edit input[type="text"]:focus {
border-color: var(--role-color, var(--totemia-green, #123c32));
box-shadow: 0 0 0 3px
color-mix(in srgb, var(--role-color, var(--totemia-green, #123c32)) 18%, transparent);
}
/* Interactive funding / surplus bar: the committed and excess segments respond
to hover and keyboard focus so their exact-amount tooltips feel discoverable
rather than static. Motion is a tiny brightness shift only. */
.payroll-funding-bar .payroll-funding-fill,
.payroll-funding-bar .payroll-funding-fill-excess {
cursor: help;
outline: none;
}
.payroll-funding-bar .payroll-funding-fill:hover,
.payroll-funding-bar .payroll-funding-fill:focus-visible,
.payroll-funding-bar .payroll-funding-fill-excess:hover,
.payroll-funding-bar .payroll-funding-fill-excess:focus-visible {
filter: brightness(1.07);
}
.payroll-funding-bar .payroll-funding-fill-excess:focus-visible {
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(18, 60, 50, 0.22);
}
@media (prefers-reduced-motion: reduce) {
.payroll-funding-bar .payroll-funding-fill:hover,
.payroll-funding-bar .payroll-funding-fill:focus-visible,
.payroll-funding-bar .payroll-funding-fill-excess:hover,
.payroll-funding-bar .payroll-funding-fill-excess:focus-visible {
filter: none;
}
}
/* Schedule planner: balance the row on wider screens so the date controls sit
opposite the "next release" summary instead of leaving an empty gap beside
it — the abrupt seam between the polished funding block and this row. */
@media (min-width: 760px) {
.compact-schedule-planner {
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
column-gap: 24px;
}
.compact-schedule-controls {
justify-content: flex-end;
}
}
/* Modern login surface. Overrides the legacy signin rules in portalShell.css
without adding more code to that oversized shell file. */
.signin-wrap {
width: min(100%, 430px);
max-width: none;
margin: clamp(24px, 5vh, 56px) auto;
}
.signin-card {
padding: 34px 34px 32px;
border: 1px solid var(--totemia-line);
border-top: 4px solid var(--totemia-green);
border-radius: 8px;
background: #ffffff;
box-shadow: none;
}
.signin-title {
margin-bottom: 6px;
color: var(--totemia-green);
font-size: 26px;
font-weight: 900;
letter-spacing: 0;
line-height: 1.12;
}
.signin-sub {
max-width: 34ch;
margin: 0 auto 24px;
color: var(--totemia-muted);
font-size: 13px;
line-height: 1.55;
}
.signin-error {
margin-bottom: 14px;
}
.signin-field {
gap: 6px;
margin-bottom: 14px;
}
.signin-field label {
color: var(--totemia-muted);
font-size: 10px;
font-weight: 900;
letter-spacing: .08em;
}
.signin-field input {
min-height: 44px;
border-color: var(--totemia-line);
border-radius: 8px;
background: #ffffff;
color: var(--totemia-ink);
font-size: 15px;
}
.signin-field input:focus {
border-color: var(--totemia-gold);
box-shadow: 0 0 0 3px rgba(196, 152, 31, .16);
}
.signin-btn {
min-height: 44px;
border: 0;
border-radius: 8px;
background: var(--totemia-green);
color: #ffffff;
font-size: 14px;
font-weight: 900;
letter-spacing: 0;
box-shadow: none;
transform: none;
}
.signin-btn:hover,
.signin-btn:focus-visible {
background: var(--totemia-green-2);
box-shadow: none;
transform: none;
}
.signin-btn:active {
transform: none;
}
.signin-btn:disabled {
background: color-mix(in srgb, var(--totemia-green) 55%, #ffffff);
}
.signin-card .password-meter {
border-radius: 8px;
box-shadow: none;
}
@media (max-width: 520px) {
.signin-wrap {
margin: 18px auto;
}
.signin-card {
padding: 28px 22px 24px;
}
.signin-title {
font-size: 23px;
}
}
/* Article studio and shared notifier overrides. Loaded late on purpose so
older portal surfaces stop falling back to cramped editor/toast rules. */
.publication-workspace-shell {
width: min(1560px, calc(100vw - 32px));
margin: 0 auto 28px;
}
.publication-workspace-editor {
border-top: 6px solid var(--totemia-gold);
}
.org-content-workspace-shell {
grid-template-columns: minmax(176px, 220px) minmax(0, 1fr);
}
.org-content-workspace-shell .interior-workspace-content {
min-width: 0;
}
.org-content-workspace-shell .interior-tab-panel {
padding: 0;
border: 0;
background: transparent;
}
.publication-workspace-panel {
width: 100%;
}
.publication-editor-shell {
display: grid;
gap: 12px;
}
.publication-editor-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.publication-action-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.publication-action-tile {
position: relative;
display: grid;
gap: 7px;
min-height: 150px;
padding: 18px;
border: 1px solid var(--totemia-line);
border-top: 8px solid var(--party-accent-color, var(--totemia-gold));
background: #fff;
color: var(--totemia-ink);
text-decoration: none;
box-shadow: none;
}
.publication-action-tile:hover {
border-color: var(--party-accent-color, var(--totemia-gold));
}
.publication-action-tile strong {
color: var(--totemia-ink);
font-size: 22px;
font-weight: 900;
line-height: 1.05;
}
.publication-action-tile small {
color: var(--totemia-muted);
font-size: 13px;
font-weight: 800;
line-height: 1.35;
}
.publication-studio {
min-width: 0;
}
.publication-studio-layout {
grid-template-columns: minmax(680px, 1fr) minmax(320px, 410px);
gap: 28px;
}
.publication-canvas,
.publication-settings-rail {
min-width: 0;
}
.publication-canvas {
padding-right: clamp(0px, 1.5vw, 18px);
}
.publication-settings-rail {
position: sticky;
top: calc(var(--masthead-h, 56px) + 18px);
align-self: start;
padding: 18px;
border: 1px solid var(--totemia-line);
border-top: 5px solid var(--party-accent-color, var(--totemia-gold));
background: #fff;
}
.publication-settings-rail .publication-date-inline {
grid-template-columns: minmax(0, 1fr);
}
.publication-toolbar {
top: var(--masthead-h, 56px);
border-radius: 0;
}
.publication-style-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: end;
padding: 10px 0;
border-bottom: 1px solid var(--totemia-line);
}
.publication-style-row label {
display: grid;
gap: 4px;
min-width: 120px;
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
}
.publication-style-row select {
min-height: 34px;
}
.publication-document-dropzone {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
padding: 16px;
border: 1px dashed var(--party-accent-color, var(--totemia-gold));
border-left: 5px solid var(--party-accent-color, var(--totemia-gold));
background: #fff;
}
.publication-document-dropzone.has-file {
border-style: solid;
}
.publication-document-dropzone > div {
display: grid;
gap: 4px;
min-width: 0;
}
.publication-document-dropzone strong {
overflow-wrap: anywhere;
color: var(--totemia-ink);
font-size: 16px;
font-weight: 900;
line-height: 1.25;
}
.publication-document-dropzone small {
color: var(--totemia-muted);
font-size: 12px;
font-weight: 800;
}
.publication-swatch-group {
display: flex;
gap: 5px;
align-items: center;
}
.publication-color-swatch {
width: 28px;
height: 28px;
min-width: 28px;
padding: 0;
border: 1px solid var(--totemia-line);
border-radius: 0;
box-shadow: none;
}
.publication-color-swatch.background {
box-shadow: inset 0 0 0 2px rgba(255,255,255,.88);
}
.interior-delete-panel.article-link-modal {
width: min(620px, 100%);
border-top-color: var(--party-accent-color, var(--totemia-gold));
}
.article-link-modal .article-link-actions {
flex-wrap: wrap;
}
.article-link-modal p {
color: var(--totemia-muted);
}
.article-external-modal-root {
position: fixed;
inset: 0;
z-index: 100000;
display: grid;
place-items: center;
padding: 20px;
background: rgba(15, 18, 14, .48);
}
.article-external-modal {
width: min(520px, 100%);
display: grid;
gap: 14px;
justify-items: center;
border: 1px solid var(--totemia-line);
border-top: 8px solid var(--totemia-gold);
background: #fff;
padding: 24px 24px 0;
color: var(--totemia-ink);
text-align: center;
}
.article-external-mark {
display: grid;
place-items: center;
width: 58px;
height: 58px;
border: 1px solid #edc6c6;
background: #f7d1d1;
color: #5d1e1e;
font-size: 26px;
font-weight: 900;
line-height: 1;
}
.article-external-modal h2 {
margin: 0;
color: var(--totemia-ink);
font-size: 24px;
font-weight: 900;
line-height: 1.1;
}
.article-external-modal p {
margin: 0;
color: var(--totemia-ink);
font-size: 16px;
font-weight: 700;
line-height: 1.5;
}
.article-external-modal strong {
color: #080806;
font-weight: 900;
overflow-wrap: anywhere;
}
.article-external-actions {
display: grid;
grid-template-columns: 1fr 1fr;
width: calc(100% + 48px);
margin-top: 4px;
border-top: 1px solid var(--totemia-line);
}
.article-external-actions button {
min-height: 58px;
border: 0;
border-right: 1px solid var(--totemia-line);
border-radius: 0;
background: #fff;
color: #b71919;
font-size: 15px;
font-weight: 900;
box-shadow: none;
}
.article-external-actions button:last-child {
border-right: 0;
color: var(--totemia-green);
}
.publication-editor-surface .ProseMirror {
overflow-wrap: break-word;
word-break: normal;
}
.publication-editor-surface .ProseMirror span[data-size="lead"],
.publication-body span[data-size="lead"] {
font-size: 1.16em;
line-height: 1.6;
font-weight: 700;
}
.publication-editor-surface .ProseMirror span[data-size="large"],
.publication-body span[data-size="large"] {
font-size: 1.38em;
line-height: 1.35;
font-weight: 800;
}
.publication-editor-surface .ProseMirror span[data-size="display"],
.publication-body span[data-size="display"] {
display: inline-block;
font-size: 1.72em;
line-height: 1.12;
font-weight: 900;
}
.publication-editor-surface .ProseMirror img[data-width="25"],
.publication-inline-image.publication-image-width-25 {
width: 25%;
}
.publication-editor-surface .ProseMirror img[data-width="50"],
.publication-inline-image.publication-image-width-50 {
width: 50%;
}
.publication-editor-surface .ProseMirror img[data-width="75"],
.publication-inline-image.publication-image-width-75 {
width: 75%;
}
.publication-editor-surface .ProseMirror img[data-width="100"],
.publication-inline-image.publication-image-width-100 {
width: 100%;
}
.publication-editor-surface .ProseMirror img[data-align="left"],
.publication-image-left {
max-width: min(52%, 520px);
}
.publication-editor-surface .ProseMirror img[data-align="right"],
.publication-image-right {
max-width: min(52%, 520px);
}
.publication-editor-surface .ProseMirror img[data-align="center"] {
margin-left: auto;
margin-right: auto;
}
.publication-editor-surface .ProseMirror img[data-align="wide"] {
width: 100% !important;
max-width: 100%;
}
.publication-timeline-draft .wide {
grid-column: 1 / -1;
}
.toast-stack {
width: min(420px, calc(100vw - 28px));
}
.toast-stack .toast,
.interior-toast-stack .interior-toast {
border-left: 1px solid var(--totemia-line, var(--line, #e3e6ea)) !important;
border-radius: 0 !important;
padding-top: 15px !important;
overflow: hidden !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
}
.toast-stack .toast::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6px;
background: var(--totemia-gold, var(--gold, #c4981f));
transform-origin: left center;
animation: toast-life 5200ms linear forwards;
}
.toast-stack .toast p,
.toast-stack .toast > div:not(.life) {
margin: 0;
color: var(--totemia-muted, var(--muted, #5b636c));
font-size: 12px;
font-weight: 700;
line-height: 1.35;
}
.toast-stack .toast .life,
.interior-toast-stack .interior-toast-timer {
top: 0 !important;
bottom: auto !important;
left: 0 !important;
right: 0 !important;
height: 6px !important;
border-radius: 0 !important;
z-index: 1 !important;
}
.interior-toast-stack .interior-toast {
grid-template-columns: minmax(0, 1fr) 30px !important;
}
.interior-toast-stack .interior-toast-mark {
display: none !important;
}
.interior-toast-stack .interior-toast .interior-toast-body {
padding-top: 11px !important;
}
@media (max-width: 980px) {
.publication-workspace-shell {
width: min(100%, calc(100vw - 20px));
}
.publication-studio-layout,
.publication-action-grid,
.org-content-workspace-shell {
grid-template-columns: minmax(0, 1fr);
}
.publication-settings-rail {
position: static;
}
.publication-editor-nav {
justify-content: flex-start;
}
}
@media (max-width: 700px) {
.publication-editor-surface .ProseMirror img[data-width],
.publication-inline-image[class*="publication-image-width"] {
width: 100%;
max-width: 100%;
}
.publication-document-dropzone,
.article-external-actions {
grid-template-columns: minmax(0, 1fr);
}
.publication-document-dropzone {
align-items: stretch;
}
.article-external-actions button {
border-right: 0;
border-bottom: 1px solid var(--totemia-line);
}
.article-external-actions button:last-child {
border-bottom: 0;
}
}
img.twemoji {
display: inline-block;
width: 1em;
height: 1em;
margin: 0 .05em 0 .1em;
vertical-align: -0.12em;
object-fit: contain;
}
img.totemia-custom-flag {
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(20, 23, 26, .18);
}
/* Ministry of Interior — Account Center "Create Website Identity" panel and
* the one-time recovery-password reveal. Modern bold treatment: full-width
* readable fields (not the 9px settings sidebar), flat surfaces, and a copy
* affordance so the temp password never has to be highlighted by hand. Uses
* the shared portal tokens only — no new color system. */
.account-creator {
margin-top: 4px;
}
.account-creator-intro {
margin: 2px 0 18px;
max-width: 64ch;
color: var(--totemia-muted);
font-size: 14px;
line-height: 1.55;
}
.account-creator-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.account-field {
display: grid;
gap: 8px;
min-width: 0;
}
/* Role spans the full width on its own row so the long option labels read. */
.account-field-role {
grid-column: 1 / -1;
}
.account-field-label {
font-size: 11px;
font-weight: 900;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--totemia-muted);
}
.account-field-label em {
margin-left: 6px;
font-style: normal;
font-weight: 700;
letter-spacing: 0.04em;
color: color-mix(in srgb, var(--totemia-muted) 70%, transparent);
text-transform: none;
}
.account-creator .account-field input,
.account-creator .account-field select {
width: 100%;
min-height: 46px;
padding: 0 14px;
border: 1px solid var(--totemia-line);
border-radius: 0;
background: #ffffff;
color: var(--totemia-ink);
font-size: 15px;
font-weight: 600;
box-shadow: none;
transition: border-color .12s ease, box-shadow .12s ease;
}
.account-creator .account-field input::placeholder {
color: color-mix(in srgb, var(--totemia-muted) 72%, transparent);
font-weight: 500;
}
.account-creator .account-field input:focus,
.account-creator .account-field select:focus {
outline: none;
border-color: var(--totemia-green);
box-shadow: inset 0 0 0 1px var(--totemia-green);
}
.account-creator-actions {
display: flex;
margin-top: 18px;
}
.account-creator-submit {
min-height: 46px;
padding: 0 26px;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.02em;
}
.account-creator-submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ── One-time recovery-password reveal ─────────────────────────────────── */
.credential-reveal {
margin-top: 18px;
border: 1px solid var(--totemia-line);
border-left: 6px solid var(--totemia-gold);
background: color-mix(in srgb, var(--totemia-gold) 6%, #ffffff);
padding: 16px 18px;
}
.credential-reveal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.credential-reveal-note {
margin: 0 0 12px;
color: var(--totemia-ink);
font-size: 13.5px;
line-height: 1.5;
}
.credential-reveal-note strong {
font-weight: 800;
}
.credential-copy-row {
display: flex;
align-items: stretch;
gap: 10px;
}
.credential-code {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
padding: 0 16px;
min-height: 50px;
border: 1px solid color-mix(in srgb, var(--totemia-gold) 38%, var(--totemia-line));
background: #ffffff;
color: var(--totemia-ink);
font-family: var(--mono, "SFMono-Regular", "Consolas", "Liberation Mono", monospace);
font-size: 19px;
font-weight: 700;
letter-spacing: 0.06em;
overflow-x: auto;
white-space: nowrap;
user-select: all;
}
.credential-copy-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 18px;
min-height: 50px;
border: 0;
border-radius: 0;
background: var(--totemia-green);
color: #ffffff;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
box-shadow: none;
transition: background .12s ease, transform .08s ease;
}
.credential-copy-btn:hover {
background: color-mix(in srgb, var(--totemia-green) 88%, #000000);
}
.credential-copy-btn:active {
transform: translateY(1px);
}
.credential-copy-btn.is-copied {
background: #155642;
}
.credential-copy-btn svg {
display: block;
}
@media (max-width: 640px) {
.account-creator-grid {
grid-template-columns: minmax(0, 1fr);
}
.account-creator-actions,
.account-creator-submit {
width: 100%;
}
.account-creator-submit {
justify-content: center;
}
.credential-copy-row {
flex-direction: column;
}
.credential-copy-btn {
justify-content: center;
padding: 12px 18px;
}
}