:root {
--rail-width: 260px;
}
html, body {
height: 100%;
background: #f4f5f7;
}
/* ===== Loading splash =====
The loader's styles are inlined in in index.html so the splash can
paint on the first byte, before this (non-render-blocking) stylesheet loads.
Keep edits to the loader there, not here. */
body {
display: flex;
flex-direction: column;
}
/* Top bar */
#topbar.ui.menu {
margin: 0;
border-radius: 0;
position: sticky;
top: 0;
z-index: 50;
display: none; /* desktop: brand lives in the sidebar; only needed for mobile toggle */
}
/* Layout: sidebar rail + content */
#layout {
flex: 1;
display: flex;
min-height: 0;
align-items: stretch;
}
#rail {
width: var(--rail-width);
flex: 0 0 var(--rail-width);
background: #fff;
border-right: 1px solid #eaeaea;
display: flex;
flex-direction: column;
}
#rail-scroll {
flex: 1;
overflow-y: auto;
padding: 1rem .75rem;
}
.rail-brand {
display: flex;
align-items: center;
font-size: 1.25rem;
font-weight: 700;
color: #2185d0;
padding: .25rem .25rem .5rem;
}
.rail-brand-name { display: inline-flex; align-items: center; }
.rail-search-btn {
margin-left: auto;
color: #8a8d91;
cursor: pointer;
font-size: .95rem;
padding: .25rem .35rem;
border-radius: 6px;
}
.rail-search-btn:hover { color: #2185d0; background: #f2f2f2; }
.rail-search-btn .icon { margin: 0; }
/* Task search header (toggled open from the logo search icon). */
#search-bar {
position: sticky;
top: 0;
z-index: 41;
display: flex;
align-items: center;
gap: .4rem;
background: #f4f5f7;
padding: .5rem 0 .75rem;
margin-bottom: .75rem;
border-bottom: 1px solid #e2e2e2;
}
#search-bar .search-input { flex: 1 1 auto; }
#search-bar .search-input input {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.search-input.error input {
border-color: #db2828 !important;
background: #fff6f6 !important;
}
.search-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 6px;
color: #767676;
cursor: pointer;
}
.search-icon-btn:hover { color: #2185d0; background: #ececec; }
.search-icon-btn .icon { margin: 0; }
/* Active search mode: light up the trigger icon and point a triangle from the
sidebar icon toward the search box. */
.rail-search-btn.active {
position: relative;
background: #2185d0;
color: #fff;
}
.rail-search-btn.active:hover { background: #1a6fb5; color: #fff; }
.rail-search-btn.active::after {
content: "";
position: absolute;
right: -7px;
top: 50%;
transform: translateY(-50%);
border: 6px solid transparent;
border-left-color: #2185d0;
}
#topbar .js-search-toggle.active { background: rgba(255, 255, 255, .22); color: #fff; }
/* Reinforce search mode with an accent border on the search box. */
body.search-mode .search-input:not(.error) input { border-color: #2185d0; }
/* While searching, the sidebar status/bucket filters don't apply — drop their
active highlight so it's clear search is what's driving the list. */
body.search-mode .status-link.active,
body.search-mode .bucket-link.active,
body.search-mode .bucket-row.active {
background: transparent !important;
font-weight: 400 !important;
}
body.search-mode .bucket-row.active .bucket-name { font-weight: 400 !important; }
/* Footer with sync + settings icons, pinned to the bottom of the sidebar. */
#rail-footer {
display: flex;
gap: .25rem;
align-items: center;
padding: .5rem .75rem;
border-top: 1px solid #eaeaea;
}
.rail-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 6px;
color: #767676;
cursor: pointer;
}
.rail-icon:hover { background: #f2f2f2; }
.rail-icon .icon { margin: 0; font-size: 1.15rem; }
#sync-now.online .icon { color: #21ba45; }
#sync-now.offline .icon { color: #db2828; }
#sync-now #pending-badge,
#notif-btn #notif-badge { position: absolute; top: 2px; right: 0; }
.card-bell { color: #fbbd08; margin-right: .35rem; }
.notif-item {
padding: .6rem .4rem;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
}
.notif-item:hover { background: #f9fafb; }
#content {
flex: 1 1 420px;
min-width: 0;
overflow-y: auto;
padding: 1rem 1.25rem 4rem;
}
/* Third column: task details. Hidden until a task is selected. */
#detail-pane {
display: none;
flex: 1.6 1 480px;
flex-direction: column;
min-width: 0;
background: #fff;
border-left: 1px solid #eaeaea;
position: relative; /* anchor for the drag-and-drop overlay */
}
body.detail-open #detail-pane { display: flex; }
/* Drag-and-drop overlay: shown while a file is dragged over the open task. */
#detail-dropzone {
display: none;
position: absolute;
inset: 0;
z-index: 60;
background: rgba(33, 133, 208, .07);
border: 2px dashed #2185d0;
border-radius: 8px;
align-items: center;
justify-content: center;
pointer-events: none; /* let drag events reach the pane underneath */
}
#detail-pane.dropping #detail-dropzone { display: flex; }
#detail-dropzone .dz-inner { text-align: center; color: #2185d0; font-weight: 700; }
#detail-dropzone .dz-inner .icon {
font-size: 2.6rem;
display: block;
margin: 0 auto .5rem;
}
/* Upload progress overlay: covers the open task while a file is uploading. */
#detail-upload {
display: none;
position: absolute;
inset: 0;
z-index: 65;
background: rgba(255, 255, 255, .92);
align-items: center;
justify-content: center;
}
#detail-pane.uploading #detail-upload { display: flex; }
#detail-upload .du-inner { width: min(360px, 80%); text-align: center; color: #2185d0; }
#detail-upload .du-icon {
font-size: 2.6rem;
display: block;
margin: 0 auto .6rem;
animation: du-bob 1.3s ease-in-out infinite;
}
@keyframes du-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
#detail-upload .du-label {
font-weight: 600;
color: #333;
margin-bottom: .7rem;
word-break: break-all;
}
#detail-upload .du-bar {
height: 8px;
border-radius: 5px;
background: #e6e8eb;
overflow: hidden;
position: relative;
}
#detail-upload .du-bar #du-bar-fill {
display: block;
height: 100%;
width: 0;
background: #2185d0;
border-radius: 5px;
transition: width .15s ease;
}
/* Indeterminate "finishing" state: a sliding sliver instead of a fixed width. */
#detail-upload .du-bar #du-bar-fill.indeterminate {
width: 40% !important;
position: absolute;
left: 0;
animation: du-slide 1.1s ease-in-out infinite;
transition: none;
}
@keyframes du-slide {
0% { left: -40%; }
100% { left: 100%; }
}
#detail-upload .du-pct { margin-top: .5rem; font-weight: 700; color: #2185d0; }
@media (prefers-reduced-motion: reduce) {
#detail-upload .du-icon { animation: none; }
#detail-upload .du-bar #du-bar-fill.indeterminate { animation-duration: 2s; }
}
/* Draggable gutter between the task list and the detail pane. */
#detail-resizer {
display: none;
flex: 0 0 7px;
cursor: col-resize;
position: relative;
background: #eef0f2;
}
body.detail-open #detail-resizer { display: block; }
#detail-resizer::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 28px;
transform: translate(-50%, -50%);
background: #b9c2cc;
border-radius: 2px;
}
#detail-resizer:hover,
#detail-resizer.dragging { background: #dbe3ea; }
body.resizing { cursor: col-resize; user-select: none; }
#detail-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem 4rem; }
/* Watcher-email autocomplete (Fomantic search): make the results dropdown span
the full width of the text box rather than Fomantic's default fixed width. */
.ui.search.email-search { width: 100%; }
.ui.search.email-search > .results { width: 100%; min-width: 0; }
/* Mobile-only "back" bar for the full-screen detail overlay. */
#detail-mobile-bar { display: none; }
#detail-mobile-close { cursor: pointer; color: #2185d0; font-weight: 600; }
@media (max-width: 991px) {
body.detail-open #detail-mobile-bar {
display: flex;
align-items: center;
padding: .7rem .9rem;
border-bottom: 1px solid #eee;
position: sticky;
top: 0;
background: #fff;
z-index: 6;
}
}
/* Buttons row on top (right-aligned), title spanning the full width below. */
.detail-top {
display: flex;
flex-direction: column;
gap: .5rem;
margin-bottom: .75rem;
}
.detail-title-input {
width: 100%;
font-size: 1.4rem;
font-weight: 600;
border: none;
border-bottom: 1px solid transparent;
padding: .2rem .1rem;
background: transparent;
}
.detail-title-input:hover { border-bottom-color: #ddd; }
.detail-title-input:focus { border-bottom-color: #2185d0; outline: none; }
.detail-controls {
display: flex;
flex-wrap: wrap;
gap: .4rem;
align-items: center;
justify-content: flex-end;
position: relative;
}
/* Popover anchored under the detail action buttons (not a centered modal). */
.detail-popover {
position: absolute;
top: calc(100% + 9px);
right: 0;
width: min(320px, 86vw);
z-index: 50;
background: #fff;
border: 1px solid #d4d4d5;
border-radius: 8px;
box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
padding: .9rem;
text-align: left;
}
.detail-popover::before {
content: "";
position: absolute;
top: -7px;
right: 14px;
width: 12px;
height: 12px;
background: #fff;
border-left: 1px solid #d4d4d5;
border-top: 1px solid #d4d4d5;
transform: rotate(45deg);
}
.detail-popover-title {
font-weight: 700;
margin-bottom: .55rem;
color: #333;
}
.detail-controls .button { margin: 0; }
#d-timeline.ui.feed .date { color: #999; }
/* Connected activity feed: circular icon badges joined by a vertical line. */
.ui.feed > .event > .label {
position: relative;
width: 2.2em;
height: 2.2em;
display: flex;
align-items: center;
justify-content: center;
background: #f0f1f2;
border-radius: 50%;
color: #767676;
}
.ui.feed > .event > .label .icon {
margin: 0;
width: auto;
height: auto;
font-size: 1em;
}
.ui.feed > .event > .label::before {
content: "";
position: absolute;
top: 2.2em;
bottom: -1.15em;
left: 50%;
width: 2px;
margin-left: -1px;
background: #e2e2e2;
}
.ui.feed > .event:last-child > .label::before { display: none; }
/* Selected task highlight in the list */
.todo-card.selected { outline: 2px solid #2185d0; outline-offset: -1px; }
/* Permanent quick-add bar, pinned to the top of the scrolling content. */
#quick-add {
position: sticky;
top: 0;
z-index: 40;
background: #f4f5f7;
padding: .5rem 0 .75rem;
margin-bottom: .75rem;
border-bottom: 1px solid #e2e2e2;
}
.quick-add-row {
display: flex;
gap: .5rem;
align-items: stretch;
flex-wrap: wrap;
}
.qa-input { flex: 1 1 260px; }
.qa-input.input input {
font-weight: 500;
box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
border-color: #c8d4e0;
}
.qa-input.input input:focus {
border-color: #2185d0;
box-shadow: 0 2px 6px rgba(33, 133, 208, .18);
}
/* Inline autocomplete menu under the quick-add input. */
.qa-ac {
position: absolute;
top: calc(100% + 2px);
left: 0;
right: 0;
z-index: 60;
background: #fff;
border: 1px solid #c8d4e0;
border-radius: .28rem;
box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
overflow: hidden;
}
.qa-ac-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .5rem .75rem;
cursor: pointer;
font-size: .95rem;
}
.qa-ac-item.active,
.qa-ac-item:hover {
background: #e8f1fb;
}
.qa-ac-label {
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.qa-ac-meta {
color: #8a94a0;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .03em;
flex: 0 0 auto;
}
.qa-bucket {
border: 1px solid rgba(34, 36, 38, .15);
border-radius: .28rem;
padding: 0 .6rem;
background: #fff;
font-size: .95rem;
}
#advanced-add {
display: inline-block;
margin-top: .5rem;
font-size: .85rem;
color: #2185d0;
cursor: pointer;
}
.bucket-link.active,
.status-link.active { font-weight: 700; background: #f0f6ff !important; }
/* Bucket rows in the sidebar: name + kebab actions menu. */
.bucket-row {
display: flex;
align-items: center;
gap: .35rem;
padding: .5rem .55rem;
border-radius: 6px;
}
.bucket-row.active { background: #f0f6ff; }
.bucket-row .bucket-name {
flex: 1;
min-width: 0;
cursor: pointer;
color: rgba(0, 0, 0, .85);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bucket-row.active .bucket-name { font-weight: 700; }
.bucket-row.archived .bucket-name { color: #aaa; font-style: italic; }
.bucket-menu.ui.dropdown {
flex: 0 0 auto;
color: #ababab;
cursor: pointer;
padding: .15rem;
}
.bucket-menu.ui.dropdown:hover { color: #666; }
.bucket-menu .menu { font-weight: 400; }
#toggle-archived {
display: inline-block;
margin: .5rem 0 0 .55rem;
font-size: .8rem;
color: #999;
cursor: pointer;
}
#toggle-archived:hover { color: #2185d0; }
/* Todo cards + tree */
.todo-card { cursor: pointer; }
.todo-card.ui.card { margin: 0 0 .4rem; }
.todo-card.ui.card > .content { padding: .55rem .8rem; }
.todo-card .meta-row { margin-top: .25rem; color: #888; font-size: .82rem; }
.todo-card .todo-main .header { font-size: .98rem; }
.status-pill { text-transform: capitalize; flex: 0 0 auto; }
.todo-row { display: flex; align-items: flex-start; gap: .6rem; }
.todo-main { flex: 1; min-width: 0; }
.todo-pills {
flex: 0 0 auto;
/* Reserve a label's height so the row stays the same height whether or not
the status/bucket pills are present (e.g. switching All buckets ↔ a bucket). */
min-height: 1.857rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: .25rem;
}
.todo-pills .label { margin: 0; }
.bucket-pill { white-space: nowrap; }
/* Watched-task cards (the "Watching" view): owner + bucket sub-line. */
.watch-card .watch-sub { margin-top: .25rem; color: #888; font-size: .82rem; }
.watch-card .watch-sub .icon { margin-right: .15rem; }
/* The "Watching" sidebar button, highlighted while its view is active. */
#watching-btn.active.ui.button {
background: #e8f3fc;
color: #2185d0;
box-shadow: 0 0 0 1px #c2e0fa inset;
}
.todo-main .header { font-size: 1rem; }
.todo-check {
flex: 0 0 auto;
width: 18px; height: 18px;
margin-top: .15rem;
cursor: pointer;
}
/* Nested subtasks: indent with a guide line. */
.todo-children {
margin-left: 1.1rem;
padding-left: .6rem;
border-left: 2px solid #e6e6e6;
}
.subtodo-item { padding: .4rem .2rem; border-bottom: 1px solid #f0f0f0; }
.subtodo-item:last-child { border-bottom: none; }
/* Timeline */
.timeline-event { padding: .5rem 0; border-bottom: 1px solid #f3f3f3; }
.timeline-event .who { font-weight: 600; }
.timeline-event.system .body { color: #777; font-style: italic; }
.timeline-event .markdown img { max-width: 100%; }
.markdown p:last-child { margin-bottom: 0; }
/* Below 3-column width: the detail pane becomes a full-screen overlay. */
@media (max-width: 991px) {
body.detail-open #detail-pane {
position: fixed;
inset: 0;
z-index: 130;
}
#detail-resizer { display: none !important; }
}
/* Mobile */
#rail-toggle { display: none; }
@media (max-width: 767px) {
#topbar.ui.menu { display: flex; }
.rail-brand { display: none; }
#rail {
position: fixed;
top: 0; bottom: 0; left: 0;
z-index: 100;
transform: translateX(-100%);
transition: transform .25s ease;
box-shadow: 2px 0 12px rgba(0,0,0,.15);
}
body.rail-open #rail { transform: translateX(0); }
#rail-backdrop {
display: none;
position: fixed; inset: 0; z-index: 90;
background: rgba(0,0,0,.4);
}
body.rail-open #rail-backdrop { display: block; }
#rail-toggle { display: inline-flex !important; }
#content { padding: .75rem .75rem 4rem; }
}
/* ============================================================
Landing page (shown when signed out)
Clean, GitHub-like: lots of whitespace, neutral grays,
one blue accent, subtle borders.
============================================================ */
#login {
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
background: #fff;
scroll-behavior: smooth;
}
.landing {
color: #1f2328;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
Helvetica, Arial, sans-serif;
line-height: 1.55;
}
.landing a { color: #2185d0; text-decoration: none; }
.landing a:hover { text-decoration: underline; }
/* ---- Top nav ---- */
.landing-nav {
border-bottom: 1px solid #e6e8eb;
background: #fff;
position: sticky;
top: 0;
z-index: 10;
}
.landing-nav-inner {
max-width: 1000px;
margin: 0 auto;
padding: .85rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.landing-brand {
display: flex;
align-items: center;
gap: .5rem;
font-weight: 700;
font-size: 1.2rem;
color: #1f2328 !important;
}
.landing-brand:hover { text-decoration: none; }
.landing-nav-links { display: flex; align-items: center; gap: 1.4rem; }
.landing-nav-links a { color: #57606a; font-weight: 500; }
.landing-nav-links a:hover { color: #1f2328; text-decoration: none; }
/* Compact email + button login in the landing header. */
.nav-login { display: flex; align-items: center; gap: .4rem; }
.nav-login input {
border: 1px solid rgba(34, 36, 38, .15);
border-radius: .28rem;
padding: .5rem .65rem;
font-size: .9rem;
width: 180px;
}
.nav-login input:focus { border-color: #2185d0; outline: none; }
.nav-login .button { margin: 0; white-space: nowrap; }
/* ---- Hero ---- */
.landing-hero {
max-width: 1000px;
margin: 0 auto;
padding: 4rem 1.25rem 2rem;
display: flex;
align-items: center;
gap: 3rem;
}
.landing-hero-copy {
flex: 1 1 0;
min-width: 0;
}
.landing-logo {
flex: 0 0 auto;
width: 320px;
max-width: 45%;
height: auto;
margin: 0;
display: block;
filter: drop-shadow(0 10px 22px rgba(0,0,0,.14));
}
.landing-title {
font-size: 2.7rem;
line-height: 1.12;
font-weight: 800;
letter-spacing: -0.02em;
margin: .25rem 0 .9rem;
}
.landing-subtitle {
font-size: 1.2rem;
color: #57606a;
margin: 0;
}
/* ---- Login box ---- */
.landing-login-section {
max-width: 1000px;
margin: 3.5rem auto 0;
padding: 3.5rem 2rem;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #cfe3f6;
border-radius: 18px;
background: linear-gradient(180deg, #f1f8ff 0%, #ffffff 70%);
box-shadow: 0 10px 34px rgba(33,133,208,.12);
}
.landing-login {
width: 100%;
max-width: 460px;
text-align: left;
}
.landing-login-title {
font-size: 2rem;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 .5rem;
text-align: center;
}
.landing-login-lede {
color: #57606a;
font-size: 1.12rem;
max-width: 620px;
margin: 0 auto 1.75rem;
text-align: center;
}
.landing-login .field label {
font-weight: 600 !important;
font-size: 1rem !important;
margin-bottom: .5rem !important;
}
.landing-login .ui.input input,
.landing-login input[type="email"] {
background: #fff !important;
border-color: #d0d7de !important;
box-shadow: none !important;
}
.landing-login .ui.input input:focus {
border-color: #2185d0 !important;
}
.landing-login-note {
text-align: center;
color: #6e7781;
font-size: .9rem;
margin: .9rem 0 0;
}
.landing-login-note .icon { color: #8c959f; }
/* ---- Features section ---- */
.landing-features {
max-width: 1000px;
margin: 0 auto;
padding: 4.5rem 1.25rem 1rem;
text-align: center;
}
.landing-section-title {
font-size: 2rem;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 .5rem;
}
.landing-section-lede {
font-size: 1.12rem;
color: #57606a;
max-width: 620px;
margin: 0 auto 2.75rem;
}
.landing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
text-align: left;
}
.landing-card {
border: 1px solid #e6e8eb;
border-radius: 12px;
background: #fff;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.landing-card:hover {
border-color: #d0d7de;
box-shadow: 0 6px 20px rgba(27,31,36,.08);
transform: translateY(-2px);
}
.landing-card-img {
border-bottom: 1px solid #e6e8eb;
background: #eef7fe;
line-height: 0;
}
.landing-card-img img {
display: block;
width: 100%;
height: auto;
}
.landing-card-body { padding: 1.5rem; }
.landing-card-icon {
font-size: 2rem;
line-height: 1;
color: #2185d0;
margin-bottom: .85rem;
}
.landing-card-icon i.icon { margin: 0; }
.landing-card h3 {
font-size: 1.18rem;
font-weight: 700;
margin: 0 0 .5rem;
}
.landing-card p { color: #57606a; margin: 0; }
.landing-statuses {
display: flex;
flex-wrap: wrap;
gap: .45rem;
margin-top: 1.1rem;
}
.landing-status {
display: inline-flex;
align-items: center;
gap: .3rem;
font-size: .82rem;
font-weight: 600;
padding: .25rem .6rem;
border-radius: 999px;
border: 1px solid #e6e8eb;
background: #f6f8fa;
color: #57606a;
}
.landing-status .icon { margin: 0; font-size: .8rem; }
.landing-status.grey { color:#6e7781; }
.landing-status.blue { color:#2185d0; border-color:#bfe0fb; background:#eef7fe; }
.landing-status.red { color:#cf222e; border-color:#f5c6c8; background:#fdf0f0; }
.landing-status.green { color:#1a7f37; border-color:#bfe5c8; background:#eef9f1; }
/* ---- Footer ---- */
.landing-footer {
margin-top: 4rem;
border-top: 1px solid #e6e8eb;
background: #f6f8fa;
text-align: center;
padding: 1.75rem 1.25rem;
}
.landing-footer p {
max-width: 640px;
margin: 0 auto;
color: #6e7781;
font-size: .9rem;
}
/* ---- Responsive ---- */
@media (max-width: 820px) {
.landing-grid { grid-template-columns: 1fr; }
.landing-login-section { margin: 2.5rem 1.25rem 0; padding: 2.5rem 1.5rem; }
.landing-title { font-size: 2.05rem; }
.landing-subtitle { font-size: 1.08rem; }
/* Hero stacks and re-centers on narrow screens */
.landing-hero {
flex-direction: column;
gap: 2rem;
padding-top: 2.5rem;
text-align: center;
}
.landing-hero-copy { flex: 0 1 auto; }
.landing-logo { width: 180px; max-width: 60%; margin-left: auto; margin-right: auto; }
.landing-subtitle { max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) {
/* The header login duplicates the full login section below on small screens,
so hide it there and keep just the Open source link. */
.nav-login { display: none; }
}
/* ===== Sidebar sections & nav ===== */
.rail-section { margin-bottom: 1.1rem; }
.rail-section:last-child { margin-bottom: 0; }
/* Small, muted, left-aligned section label (replaces the old divider headers). */
.rail-section-label {
font-size: .7rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: #9aa0a6;
padding: 0 .55rem .3rem;
}
/* Section title with an inline action button (e.g. "Buckets" + add). */
.rail-section-head { display: flex; align-items: center; justify-content: space-between; }
.rail-add-btn {
border: none;
background: transparent;
color: #9aa0a6;
cursor: pointer;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
padding: 0;
margin-bottom: .3rem;
}
.rail-add-btn:hover { background: #eef0f3; color: #2185d0; }
.rail-add-btn .icon { margin: 0; font-size: .85rem; }
/* Flatten Semantic's vertical-menu chrome into clean, rounded nav rows. */
.rail-menu.ui.vertical.menu {
border: none;
box-shadow: none;
border-radius: 0;
background: transparent;
margin: 0;
}
.rail-menu.ui.vertical.menu > .item {
border-radius: 7px;
padding: .5rem .55rem;
margin: 1px 0;
color: rgba(0, 0, 0, .8);
font-size: 1rem;
}
.rail-menu.ui.vertical.menu > .item::before { display: none; } /* drop divider lines */
.rail-menu.ui.vertical.menu > .item:hover { background: #f5f6f8; }
.rail-menu.ui.vertical.menu > .item .icon { color: #9aa0a6; margin-right: .55rem; }
.rail-menu .item.active,
.rail-menu .item.active:hover {
font-weight: 700 !important;
background: #f0f6ff !important;
color: #2185d0 !important;
}
.rail-menu .item.active .icon { color: #2185d0; }
/* ===== Automation / API panels (shown in the main content area) ===== */
.main-panel { max-width: 760px; }
.main-panel > .ui.header:first-child { margin-bottom: 1rem; }
.api-curl-block {
background: #1b1c1d; color: #e8e8e8; border-radius: 6px;
padding: 1rem; font-family: monospace; font-size: .85rem;
white-space: pre-wrap; word-break: break-all; overflow-x: auto; margin: 0;
}
/* Numbered setup steps in the "use with software" reveals. */
.api-howto { padding-left: 1.2rem; margin: .5rem 0 1rem; }
.api-howto li { margin: .35rem 0; line-height: 1.45; }
#rec-list .rec-card { margin-bottom: .75rem; }
#rec-list .rec-card .meta .label { margin: 0 .3rem .3rem 0; }
.rec-card.rec-paused { opacity: .6; }
#rec-when-controls select { width: 100%; }
/* ===== Empty state (no tasks) ===== */
#empty-state-img {
display: block;
width: 220px;
max-width: 60%;
height: auto;
margin: 0 auto 1rem;
}
/* The "no tasks" header carries no icon, so drop the icon-header top spacing. */
#empty-state .ui.icon.header {
margin-top: 0;
padding-top: 0;
}
/* Fomantic's placeholder inserts a spacer ::before any non-first child; the
image sits first, so the header would otherwise get a phantom gap above it. */
#empty-state .header:not(:first-child)::before {
content: none;
}