:root {
--navy: #1f2d3d;
--green: #2f6f4f;
--paper-bg: #ffffff;
--panel-bg: #f4f6f5;
--border: #d4dad7;
--text-muted: #6b7a76;
}
* { box-sizing: border-box; }
html, body {
height: 100%;
margin: 0;
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--panel-bg);
color: var(--navy);
}
body {
display: flex;
flex-direction: column;
}
.app {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
/* Floats over the map rather than occupying its own row in the layout —
that used to push the map down and leave a bare strip above it whenever
the banner was hidden or its height changed. */
.announcement-banner {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 1500;
max-width: calc(100% - 48px);
background: #ffe9a8;
color: #4a3b00;
padding: 8px 16px;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0,0,0,0.25);
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
font-size: 0.85rem;
text-align: center;
}
.announcement-banner[hidden] { display: none; }
#announcement-dismiss {
border: none;
background: none;
color: inherit;
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
padding: 0 4px;
}
/* ---------------- Save toast ---------------- */
/* Transient confirmation ("Map saved to ...") — mirrors the .modal-overlay/
.open opacity-transition pattern rather than the [hidden] attribute, since
its visibility needs to animate in/out on a timer, not just toggle. */
.toast {
position: fixed;
left: 50%;
bottom: 28px;
transform: translate(-50%, 8px);
background: var(--navy);
color: #fff;
padding: 10px 18px;
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
font-size: 0.88rem;
font-weight: 600;
z-index: 3000;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show {
opacity: 1;
transform: translate(-50%, 0);
}
.app-header {
flex: 0 0 auto;
background: var(--navy);
color: #fff;
padding: 10px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.app-header-brand {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
/* The source artwork is a wide horizontal lockup (icon + wordmark) — fixing
the height and letting width scale keeps it legible at any header size
without distorting it. */
.app-logo {
flex: 0 0 auto;
height: 34px;
width: auto;
}
.app-header h1 { margin: 0; font-size: 1.15rem; }
.app-header .tagline { margin: 1px 0 0; font-size: 0.8rem; color: #cfd8e3; }
.account-widget { flex: 0 0 auto; }
.account-signed-out,
.account-signed-in {
display: flex;
align-items: center;
gap: 8px;
}
/* Class selectors above tie the [hidden] UA style on specificity, and author
rules win ties — so a plain `display: flex` would show these regardless of
the `hidden` attribute JS toggles. This attribute-qualified rule outranks
it and lets `hidden` actually hide the element. */
.account-signed-out[hidden],
.account-signed-in[hidden] {
display: none;
}
.account-username {
font-size: 0.85rem;
font-weight: 600;
color: #cfd8e3;
}
.account-btn {
padding: 6px 12px;
border: 1px solid rgba(255,255,255,0.5);
background: transparent;
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
}
.account-btn:hover { background: rgba(255,255,255,0.12); }
.account-btn-primary {
background: #fff;
color: var(--navy);
border-color: #fff;
}
.account-btn-primary:hover { background: #e7ecea; }
.layout {
position: relative;
flex: 1 1 auto;
min-height: 0;
display: grid;
grid-template-columns: 1fr 320px;
grid-template-rows: 1fr;
grid-template-areas: "front controls";
gap: 0;
}
.front-composer {
grid-area: front;
position: relative;
min-width: 0;
min-height: 0;
overflow: hidden;
}
/* ---------------- Controls sidebar ---------------- */
.controls {
grid-area: controls;
background: #fff;
border-left: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 8px 16px 16px;
min-height: 0;
overflow-y: auto;
}
/* The active tab gets the header's navy fill with white text so it reads as
the current, selected tab with strong contrast; the inactive tab sits on
the same white surface as the panel below it (background inherited from
.controls). */
.sidebar-tabs {
display: flex;
gap: 0;
margin: 8px 0 4px;
}
.sidebar-tab {
flex: 1;
padding: 10px 10px 9px;
border: none;
background: none;
border-radius: 0;
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
color: var(--navy);
}
.sidebar-tab:hover { background: var(--panel-bg); color: var(--navy); }
.sidebar-tab.active {
background: var(--navy);
font-weight: 700;
color: #fff;
}
.sidebar-tab.active:hover { background: #14202e; color: #fff; }
.sidebar-pane { display: none; }
.sidebar-pane.active { display: block; }
fieldset {
border: none;
border-top: 1px solid var(--border);
padding: 12px 0;
margin: 0;
min-width: 0; /* fieldsets default to min-content width, ignoring the container — this lets long group/map names actually truncate instead of overflowing the sidebar */
}
fieldset:first-of-type { border-top: none; }
legend {
font-weight: 600;
font-size: 0.85rem;
color: var(--green);
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0;
margin-bottom: 6px;
}
label {
display: block;
font-size: 0.82rem;
font-weight: 600;
margin: 10px 0 4px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
width: 100%;
padding: 7px 8px;
border: 1px solid var(--border);
border-radius: 5px;
font-size: 0.9rem;
font-family: inherit;
background: #fff;
color: var(--navy);
}
textarea { resize: vertical; }
.hint {
font-size: 0.75rem;
color: var(--text-muted);
margin: 8px 0 0;
}
/* Custom stand-in for a native /