/* ============================================================================ console.css v1 — the Ikhaa Studio console chassis. SOURCE OF TRUTH: marketing-site/assets/css/console.css masjid-app/admin/css/console.css is a VERBATIM COPY. The two consoles live in separate repos served from separate origins, so they cannot share a file at runtime — this is copied, never forked. Edit the source, copy across, bump the version in both. git diff --no-index \ marketing-site/assets/css/console.css \ masjid-app/admin/css/console.css # must print nothing Two rules keep the copy safe to load anywhere: 1. SELF-CONTAINED. Every variable it uses is declared in its own :root. It does not @import tokens.css, so it works in masjid-app/admin/ where no token file exists. On the marketing site the primitives are simply declared twice with identical values — a deliberate no-op. 2. NAMESPACED `c-`. Every class and variable is prefixed. style.css already owns .btn/.card/.badge/.control with a different padding scale, so the business console can load both files with zero collision. THE TENANT CONTRACT. A console may override exactly nine variables, marked TENANT below, via a theme.js that sets them on before first paint. Everything else is the design language and is fixed. The rule is "Ikhaa's paper, the masjid's ink" — the tenant supplies the ink (brand, accent, logo), never the paper (page, card, line, text ramp, focus ring). Defaults here are Ikhaa's own, so a missing or broken theme.js renders a correct ink-green console rather than an unstyled page. ========================================================================= */ :root{ /* ---- Ledger primitives (fixed) ---------------------------------------- */ --c-gold:#C99331; --c-gold-strong:#A9781F; --c-gold-a12:rgba(201,147,49,.12); --c-gold-a30:rgba(201,147,49,.30); /* ---- TENANT LAYER — the only nine theme.js may set -------------------- */ --c-brand:#102825; /* structural: topbar, rail, primary fill, table head */ --c-brand-deep:#0B1D1B; /* hover/active, rail base, scrim source */ --c-brand-soft:rgba(16,40,37,.08); /* hover washes, active nav tint */ --c-on-brand:#FFF4ED; /* text on brand surfaces — must clear 4.5:1 */ --c-accent:#C99331; /* ceremonial accent */ /* Darker than the site's --gold-600 (#A9781F) on purpose. Gold-600 measures 3.89:1 on white and 3.25:1 on sunken — fine for a decorative rule on a marketing page, not fine here, where this colour is the TEXT of a status badge and of a changed value in an approvals diff. #8A6114 clears AA on card (5.53), sunken (4.61) and the gold tint behind a pending badge (5.06). A tenant overriding this must clear 4.5:1 on all three. */ --c-accent-strong:#8A6114; /* AA-readable accent text on light surfaces */ --c-on-accent:#102825; /* text on accent fill */ --c-logo:none; /* url("img/logo-mark.svg") */ --c-brand-name:"Ikhaa Studio"; /* CSS-string fallback for the wordmark */ /* ---- Surfaces (fixed — Ikhaa's paper) --------------------------------- */ --c-page:#FFF4ED; --c-card:#FFFFFF; --c-sunken:#F7E8DC; --c-line:#DDD1C4; --c-line-subtle:#EADFD4; --c-scrim:rgba(16,40,37,.60); /* ---- Text (fixed) ----------------------------------------------------- */ --c-ink:#102825; --c-heading:#18423C; --c-muted:#4A5C58; --c-subtle:#7C8B87; --c-on-brand-muted:rgba(255,244,237,.72); /* ---- Feedback (fixed) ------------------------------------------------- */ --c-ok-fg:#4C7A5A; --c-ok-bg:#E2EDE4; --c-warn-fg:var(--c-accent-strong); --c-warn-bg:var(--c-gold-a12); --c-err-fg:#B3542E; --c-err-bg:#F7E3D8; --c-danger:#B3542E; --c-danger-hover:#8E4324; --c-on-danger:#FFF4ED; /* ---- Shape & elevation (fixed) ---------------------------------------- */ --c-radius-sm:4px; --c-radius-md:6px; --c-radius-lg:8px; --c-shadow-sm:0 1px 2px rgba(16,40,37,.06); --c-shadow-md:0 2px 8px rgba(16,40,37,.08); --c-shadow-lg:0 12px 32px rgba(16,40,37,.12); /* Gold at focus stays gold on every tenant. It is one of the four things (with type, shape and motion) that make the two consoles read as one system, so it is deliberately outside the tenant layer. */ --c-focus-ring:0 0 0 3px var(--c-gold-a30); /* ---- Type (fixed) ----------------------------------------------------- */ --c-font-display:"Alice",Georgia,"Times New Roman",serif; --c-font-sans:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* Digits that must line up column to column. Work Sans carries `tnum`, but the fallback stack has to be tabular by construction or a 31-row timetable jitters on a machine that never loaded the webfont. */ --c-font-tabular:"Work Sans",ui-monospace,"SF Mono",Menlo,Consolas,monospace; --c-text-h2:32px; --c-lh-h2:1.18; --c-text-h3:24px; --c-lh-h3:1.25; --c-text-h4:20px; --c-lh-h4:1.3; --c-text-lead:18px; --c-lh-lead:1.6; --c-text-body:16px; --c-lh-body:1.65; --c-text-sm:14px; --c-lh-sm:1.55; --c-text-caption:13px; --c-lh-caption:1.45; --c-text-eyebrow:12px; --c-tracking-eyebrow:.18em; /* ---- Space (fixed) ---------------------------------------------------- */ --c-s1:4px; --c-s2:8px; --c-s3:16px; --c-s4:24px; --c-s5:32px; --c-s6:48px; --c-tap:44px; /* minimum touch target */ --c-topbar-h:64px; /* ---- Motion (fixed) --------------------------------------------------- */ --c-dur-fast:120ms; --c-dur-base:180ms; --c-ease:cubic-bezier(.2,.6,.3,1); } @media (prefers-reduced-motion:reduce){ :root{ --c-dur-fast:0ms; --c-dur-base:0ms } } @media (max-width:640px){ :root{ --c-text-h2:26px; --c-text-h3:21px; --c-text-h4:18px; --c-s6:36px } } /* --------------------------------------------------------------------------- Base defaults. Wrapped in :where() so specificity is 0 — on the marketing site, style.css's own element rules always win and nothing is disturbed. ------------------------------------------------------------------------ */ :where(.c-shell *){box-sizing:border-box} :where(body.c-body){ margin:0;background:var(--c-page);color:var(--c-ink); font-family:var(--c-font-sans);font-size:var(--c-text-body); line-height:var(--c-lh-body);-webkit-font-smoothing:antialiased; } :where(.c-shell h2,.c-shell h3,.c-shell h4){ font-family:var(--c-font-display);font-weight:400;color:var(--c-heading); margin:0;text-wrap:pretty; } :where(.c-shell h2){font-size:var(--c-text-h2);line-height:var(--c-lh-h2)} :where(.c-shell h3){font-size:var(--c-text-h3);line-height:var(--c-lh-h3)} :where(.c-shell h4){font-size:var(--c-text-h4);line-height:var(--c-lh-h4)} :where(.c-shell p){margin:0;text-wrap:pretty} :where(.c-shell img){max-width:100%;display:block} /* The one rule that gives every control in both consoles a visible focus state. Neither panel had a single :focus-visible rule before this. */ :where(.c-shell a,.c-shell button,.c-shell input,.c-shell select, .c-shell textarea,.c-shell [tabindex]):focus-visible{ outline:none;box-shadow:var(--c-focus-ring);border-radius:var(--c-radius-sm); } .c-hide{display:none!important} /* Spacing utilities. Deliberately few. The components carry their own rhythm, and these exist only so that a one-off nudge does not have to become an inline style="" — which is how the old console ended up with 41 of them in the markup and a colour smuggled into a third of those. */ .c-mt-2{margin-top:var(--c-s2)!important} .c-mt-3{margin-top:var(--c-s3)!important} .c-mb-3{margin-bottom:var(--c-s3)!important} .c-narrow{max-width:420px;margin-left:auto;margin-right:auto} /* ---- Accessibility utilities ------------------------------------------- */ .c-sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .c-skip{ position:absolute;left:var(--c-s3);top:-100px;z-index:60; background:var(--c-card);color:var(--c-ink);padding:var(--c-s2) var(--c-s3); border:1px solid var(--c-line);border-radius:var(--c-radius-sm); text-decoration:none;transition:top var(--c-dur-fast) var(--c-ease); } .c-skip:focus{top:var(--c-s3)} /* ============================================================================ LAYOUT ========================================================================= */ .c-shell{min-height:100vh;display:flex;flex-direction:column} .c-main{flex:1 1 auto} .c-wrap{max-width:760px;margin:0 auto;padding:var(--c-s4) var(--c-s3)} .c-wrap--wide{max-width:1040px} .c-wrap--narrow{max-width:420px} .c-stack{display:flex;flex-direction:column;gap:var(--c-s3)} .c-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--c-s3)} @media (max-width:640px){ .c-grid2{grid-template-columns:1fr} } .c-btn-row{display:flex;gap:var(--c-s2);flex-wrap:wrap;align-items:center;margin-top:var(--c-s3)} .c-rowactions{display:flex;gap:var(--c-s2);flex-wrap:wrap;align-items:center} /* ============================================================================ CHROME — topbar, drawer/rail, footer ========================================================================= */ .c-topbar{ background:var(--c-brand);color:var(--c-on-brand); display:flex;align-items:center;justify-content:space-between;gap:var(--c-s3); padding:var(--c-s2) var(--c-s3);min-height:var(--c-topbar-h); } .c-topbar__left{display:flex;align-items:center;gap:var(--c-s2);min-width:0} .c-menu-btn{ background:none;border:none;color:inherit;cursor:pointer; width:var(--c-tap);height:var(--c-tap);flex:0 0 auto; display:flex;flex-direction:column;justify-content:center;gap:5px; padding:0 var(--c-s2) 0 0; } .c-menu-btn span{display:block;width:22px;height:2px;background:currentColor} .c-brand{display:flex;align-items:center;gap:var(--c-s2);min-width:0; color:inherit;text-decoration:none} /* The tenant's mark arrives as a CSS variable, so it is correct in the very first painted frame — no JS in the paint path, no flash of the wrong logo. */ .c-brand__mark{ flex:0 0 auto;width:34px;height:34px; background-image:var(--c-logo);background-size:contain; background-repeat:no-repeat;background-position:center; } .c-brand__word{ min-width:0;font-family:var(--c-font-sans);font-size:var(--c-text-sm); font-weight:600;letter-spacing:.06em;line-height:1.2;margin:0; color:var(--c-on-brand);overflow-wrap:anywhere; } .c-brand__word small{ display:block;font-size:var(--c-text-eyebrow);font-weight:500; letter-spacing:var(--c-tracking-eyebrow);text-transform:uppercase; color:var(--c-accent);margin-top:2px; } /* ---- Drawer (<900px) / rail (>=900px): one DOM node, two presentations --- The seven nav buttons are a real tablist either way, so nothing about the markup or the JS changes across the breakpoint. */ .c-scrim{position:fixed;inset:0;background:var(--c-scrim);z-index:30} .c-drawer{ position:fixed;top:0;left:0;bottom:0;width:270px;max-width:82vw;z-index:40; background:var(--c-brand-deep);color:var(--c-on-brand); display:flex;flex-direction:column;overflow-y:auto; transform:translateX(-100%); transition:transform var(--c-dur-base) var(--c-ease); } .c-drawer.is-open{transform:translateX(0)} .c-drawer__head{ display:flex;justify-content:space-between;align-items:center; padding:var(--c-s3);border-bottom:1px solid rgba(255,244,237,.18); } .c-drawer__head b{ font-size:var(--c-text-eyebrow);font-weight:500; letter-spacing:var(--c-tracking-eyebrow);color:var(--c-accent); } .c-drawer__close{ background:none;border:none;color:inherit;cursor:pointer; font-size:1.4rem;line-height:1;width:var(--c-tap);height:var(--c-tap); } .c-drawer__nav{display:flex;flex-direction:column;padding:var(--c-s1) 0} .c-drawer__nav button{ background:none;border:none;border-left:3px solid transparent; color:var(--c-on-brand-muted);text-align:left;cursor:pointer; font-family:var(--c-font-sans);font-size:var(--c-text-body);font-weight:500; padding:var(--c-s3);min-height:var(--c-tap); display:flex;align-items:center;gap:var(--c-s2); transition:background var(--c-dur-fast) var(--c-ease), color var(--c-dur-fast) var(--c-ease); } .c-drawer__nav button:hover{background:rgba(255,244,237,.08);color:var(--c-on-brand)} .c-drawer__nav button[aria-selected="true"]{ background:var(--c-gold-a12);border-left-color:var(--c-accent); /* The label is on-brand, not accent. A tenant whose accent is a mid tone rather than a bright one can measure under 3.7:1 against its own brand-deep, which would ship an unreadable selected tab; the accent bar already says which one is active, so the label does not need to carry it. (Naming no tenant here on purpose: this file is shared, and the merge gate greps it for masjid names and palette hexes.) */ color:var(--c-on-brand);font-weight:600; } @media (min-width:900px){ .c-menu-btn,.c-scrim,.c-drawer__head{display:none!important} .c-drawer{ position:static;transform:none;width:auto;max-width:none; flex-direction:row;overflow:visible; border-bottom:1px solid rgba(255,244,237,.18); } .c-drawer__nav{ flex-direction:row;padding:0 var(--c-s3);margin:0 auto; width:100%;max-width:1040px; } .c-drawer__nav button{ border-left:none;border-bottom:3px solid transparent; padding:var(--c-s3);font-size:var(--c-text-sm); } .c-drawer__nav button[aria-selected="true"]{ border-left-color:transparent;border-bottom-color:var(--c-accent); } } /* ---- Footer: where Ikhaa signs a masjid-branded console ----------------- */ .c-footer{ background:var(--c-brand-deep);color:var(--c-on-brand-muted); border-top:1px solid rgba(255,244,237,.18); padding:var(--c-s5) var(--c-s3);margin-top:var(--c-s6); font-size:var(--c-text-sm);line-height:var(--c-lh-sm); } .c-footer__inner{ max-width:1040px;margin:0 auto;display:flex;flex-wrap:wrap; align-items:center;justify-content:space-between;gap:var(--c-s4); } .c-footer__by{display:flex;align-items:center;gap:var(--c-s2)} .c-footer__by img{width:28px;height:28px;flex:0 0 auto} .c-footer a{color:var(--c-on-brand);text-underline-offset:3px} /* ============================================================================ BUTTONS ========================================================================= */ .c-btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--c-s2); font-family:var(--c-font-sans);font-size:var(--c-text-body);font-weight:500; line-height:1;text-decoration:none;cursor:pointer; border:1px solid transparent;border-radius:var(--c-radius-sm); padding:0 var(--c-s4);min-height:var(--c-tap); transition:background var(--c-dur-fast) var(--c-ease), border-color var(--c-dur-fast) var(--c-ease), color var(--c-dur-fast) var(--c-ease); } .c-btn--primary{background:var(--c-brand);color:var(--c-on-brand)} .c-btn--primary:hover{background:var(--c-brand-deep)} .c-btn--accent{background:var(--c-accent);color:var(--c-on-accent)} .c-btn--accent:hover{background:var(--c-accent-strong);color:var(--c-page)} .c-btn--secondary{background:transparent;color:var(--c-heading);border-color:var(--c-line)} .c-btn--secondary:hover{background:var(--c-sunken);border-color:var(--c-brand)} .c-btn--ghost{background:transparent;color:var(--c-heading)} .c-btn--ghost:hover{background:var(--c-brand-soft)} .c-btn--danger{background:var(--c-danger);color:var(--c-on-danger)} .c-btn--danger:hover{background:var(--c-danger-hover)} /* Delete sits in a row beside Edit all day. A filled red there shouts at the admin on every row; the outline says the same thing once they reach for it. */ .c-btn--danger-quiet{background:transparent;color:var(--c-danger);border-color:var(--c-danger)} .c-btn--danger-quiet:hover{background:var(--c-err-bg)} /* On a brand-coloured surface (topbar, drawer). */ .c-btn--inverse{background:rgba(255,244,237,.10);color:var(--c-on-brand); border-color:rgba(255,244,237,.45)} .c-btn--inverse:hover{background:rgba(255,244,237,.20)} .c-btn--sm{font-size:var(--c-text-sm);padding:0 var(--c-s3);min-height:36px} .c-btn--lg{font-size:var(--c-text-lead);padding:0 var(--c-s5);min-height:54px} .c-btn--block{display:flex;width:100%} /* Row actions stack three small buttons side by side; below 640 they are the primary way to touch anything, so they grow back to the tap minimum. */ @media (max-width:640px){ .c-btn--sm{min-height:var(--c-tap)} } .c-btn[disabled],.c-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed} .c-btn.is-busy{cursor:progress;opacity:.75} .c-btn.is-busy::before{ content:"";width:14px;height:14px;flex:0 0 auto;border-radius:50%; border:2px solid currentColor;border-top-color:transparent; animation:c-spin 620ms linear infinite; } @keyframes c-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){ .c-btn.is-busy::before{animation-duration:2s} } /* ============================================================================ CARDS ========================================================================= */ .c-card{ background:var(--c-card);border:1px solid var(--c-line); border-radius:var(--c-radius-lg);box-shadow:var(--c-shadow-sm); padding:var(--c-s4);margin-bottom:var(--c-s4); } .c-card--sunken{background:var(--c-sunken);border-color:var(--c-line-subtle);box-shadow:none} .c-card__head{ display:flex;align-items:baseline;justify-content:space-between; gap:var(--c-s3);flex-wrap:wrap;margin-bottom:var(--c-s3); } .c-card__head h2,.c-card__head h3{margin:0} @media (max-width:640px){ .c-card{padding:var(--c-s3)} } /* Add and edit share one form throughout the masjid console. Without a standing marker, clicking Edit on row 40 silently repopulates a card far above and the admin overwrites the wrong record. */ .c-editing{ display:flex;align-items:center;justify-content:space-between;gap:var(--c-s3); flex-wrap:wrap;background:var(--c-gold-a12); border-left:3px solid var(--c-accent);border-radius:var(--c-radius-sm); padding:var(--c-s2) var(--c-s3);margin-bottom:var(--c-s3); font-size:var(--c-text-sm);color:var(--c-accent-strong);font-weight:500; } /* ============================================================================ FORMS ========================================================================= */ .c-field{display:block;margin-bottom:var(--c-s3)} .c-label{ display:block;font-family:var(--c-font-sans);font-size:var(--c-text-eyebrow); font-weight:500;letter-spacing:var(--c-tracking-eyebrow);text-transform:uppercase; color:var(--c-muted);margin-bottom:var(--c-s1); } .c-req{color:var(--c-danger);margin-left:2px} .c-control{ display:block;width:100%;background:var(--c-card);color:var(--c-ink); font-family:var(--c-font-sans);font-size:var(--c-text-body);line-height:1.4; border:1px solid var(--c-line);border-radius:var(--c-radius-sm); padding:11px 14px;min-height:var(--c-tap); transition:border-color var(--c-dur-fast) var(--c-ease); } .c-control:focus{border-color:var(--c-accent);outline:none;box-shadow:var(--c-focus-ring)} textarea.c-control{min-height:110px;resize:vertical;line-height:var(--c-lh-body)} select.c-control{ appearance:none;padding-right:38px; 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 d='M1 1l5 5 5-5' fill='none' stroke='%234A5C58' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center; } .c-control[disabled]{background:var(--c-sunken);color:var(--c-subtle);cursor:not-allowed} .c-hint{ display:block;color:var(--c-muted);font-size:var(--c-text-caption); line-height:var(--c-lh-caption);margin-top:var(--c-s1); } .c-hint--error{color:var(--c-err-fg)} .c-check{ display:flex;align-items:center;gap:var(--c-s2);cursor:pointer; font-size:var(--c-text-body);color:var(--c-ink); padding:var(--c-s2) var(--c-s3);min-height:var(--c-tap); border:1px solid var(--c-line);border-radius:var(--c-radius-sm); } .c-check input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--c-brand);cursor:pointer} .c-checkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--c-s2)} .c-filefield{display:flex;flex-direction:column;gap:var(--c-s2)} .c-preview{ max-width:180px;border:1px solid var(--c-line);border-radius:var(--c-radius-sm); background:var(--c-sunken); } /* ============================================================================ DATA — rows, badges, submissions ========================================================================= */ .c-row{ display:flex;align-items:center;justify-content:space-between; gap:var(--c-s3);flex-wrap:wrap; padding:var(--c-s3) 0;border-top:1px solid var(--c-line-subtle); } .c-row:first-child{border-top:none} .c-row__info{min-width:0;flex:1 1 240px} .c-row__info b{display:block;font-weight:600;overflow-wrap:anywhere} .c-row__info span{display:block;color:var(--c-muted);font-size:var(--c-text-sm); line-height:var(--c-lh-sm);overflow-wrap:anywhere} .c-was{color:var(--c-muted);font-weight:400} .c-badge{ display:inline-block;border-radius:var(--c-radius-sm); padding:3px 8px;font-size:var(--c-text-caption);font-weight:500; letter-spacing:.05em;text-transform:uppercase;white-space:nowrap; } .c-badge--pending,.c-badge--attention{ background:var(--c-gold-a12);color:var(--c-warn-fg); border:1px solid var(--c-gold-a30); } .c-badge--approved{background:var(--c-ok-bg);color:var(--c-ok-fg)} .c-badge--rejected{background:var(--c-err-bg);color:var(--c-err-fg)} .c-badge--neutral{background:var(--c-sunken);color:var(--c-muted);border:1px solid var(--c-line-subtle)} .c-sub-item{ border:1px solid var(--c-line);border-radius:var(--c-radius-lg); padding:var(--c-s3);margin-bottom:var(--c-s3);background:var(--c-card); } .c-sub-item h4{margin:0 0 var(--c-s1)} .c-sub-item .c-meta{color:var(--c-muted);font-size:var(--c-text-caption);margin-bottom:var(--c-s2)} .c-sub-item p{margin:0 0 var(--c-s2);white-space:pre-wrap} .c-sub-item img.c-preview{margin-bottom:var(--c-s2)} .c-dl{margin:0 0 var(--c-s2);font-size:var(--c-text-sm)} .c-dl div{display:flex;gap:var(--c-s2);padding:var(--c-s1) 0;border-top:1px solid var(--c-line-subtle)} .c-dl dt{font-weight:600;min-width:120px;flex:0 0 auto;color:var(--c-muted)} .c-dl dd{margin:0;min-width:0;overflow-wrap:anywhere} .c-dl .c-changed dd{color:var(--c-accent-strong);font-weight:600} @media (max-width:640px){ .c-dl div{flex-direction:column;gap:2px} .c-dl dt{min-width:0} } /* ============================================================================ TABLES — the prayer timetable and its month picker ========================================================================= */ .c-months{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--c-s1);margin-bottom:var(--c-s3)} .c-months button{ font-family:var(--c-font-sans);font-size:var(--c-text-sm);font-weight:500; padding:var(--c-s2) var(--c-s1);min-height:var(--c-tap);cursor:pointer; background:var(--c-sunken);color:var(--c-heading); border:1px solid var(--c-line-subtle);border-radius:var(--c-radius-sm); transition:background var(--c-dur-fast) var(--c-ease); } .c-months button:hover{background:var(--c-gold-a12)} .c-months button[aria-pressed="true"]{background:var(--c-brand);color:var(--c-on-brand);border-color:var(--c-brand)} @media (max-width:420px){ .c-months{grid-template-columns:repeat(4,1fr)} } /* Desktop gets a fixed-height scroll region with a sticky head. Phones do NOT — a scroll box inside a scrolling page is the worst thing on the most-used tab, so below 900 the table scrolls with the document instead. */ .c-pt-scroll{border:1px solid var(--c-line);border-radius:var(--c-radius-lg);overflow:auto} @media (min-width:900px){ .c-pt-scroll{max-height:60vh} } .c-pt-table{ width:100%;border-collapse:collapse; font-family:var(--c-font-tabular);font-variant-numeric:tabular-nums; } .c-pt-table th{ background:var(--c-brand);color:var(--c-on-brand); font-size:var(--c-text-eyebrow);font-weight:500;text-transform:uppercase; letter-spacing:.04em;padding:var(--c-s2) var(--c-s1); position:sticky;top:0;z-index:1; } .c-pt-table td{ padding:var(--c-s2) var(--c-s1);text-align:center;font-size:var(--c-text-sm); border-top:1px solid var(--c-line-subtle); } .c-pt-table td.c-d{font-weight:600;color:var(--c-heading)} .c-pt-table tr.is-sel{background:var(--c-gold-a12)} .c-pt-table td.c-custom{color:var(--c-accent-strong);font-weight:600;background:var(--c-gold-a12)} .c-pt-table input[type=checkbox]{width:18px;height:18px;accent-color:var(--c-brand);cursor:pointer} /* Seven columns will not fit a phone, so the two that say WHICH day you are looking at are pinned while the times scroll under them. */ @media (max-width:640px){ .c-pt-table th:nth-child(-n+2),.c-pt-table td:nth-child(-n+2){ position:sticky;left:0;background:var(--c-card);z-index:2; } .c-pt-table th:nth-child(-n+2){background:var(--c-brand);z-index:3} .c-pt-table td:nth-child(2),.c-pt-table th:nth-child(2){left:44px} } .c-applybar{display:flex;gap:var(--c-s2);flex-wrap:wrap;align-items:flex-end} .c-applybar > div{flex:1 1 140px;margin-bottom:0} /* ============================================================================ FEEDBACK — messages, banners, empty states, skeletons ========================================================================= */ .c-msg{ border-radius:var(--c-radius-sm);padding:var(--c-s2) var(--c-s3); margin-bottom:var(--c-s3);font-size:var(--c-text-sm);line-height:var(--c-lh-sm); border:1px solid transparent; } .c-msg:empty{display:none} .c-msg--ok{background:var(--c-ok-bg);color:var(--c-ok-fg);border-color:var(--c-ok-fg)} .c-msg--err{background:var(--c-err-bg);color:var(--c-err-fg);border-color:var(--c-err-fg)} .c-msg--warn{background:var(--c-warn-bg);color:var(--c-warn-fg);border-color:var(--c-gold-a30)} .c-msg details{margin-top:var(--c-s1)} .c-msg summary{cursor:pointer;font-size:var(--c-text-caption);opacity:.8} .c-msg code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--c-text-caption)} /* Sticky so a confirmation for a form at the bottom of a long card is seen. Both consoles previously rendered it at the top of the pane with nothing scrolling to it, so saving on a phone looked like nothing happened. */ .c-msg--sticky{position:sticky;top:var(--c-s2);z-index:5;box-shadow:var(--c-shadow-md)} .c-banner{ background:var(--c-sunken);border:1px solid var(--c-line-subtle); border-left:3px solid var(--c-accent);border-radius:var(--c-radius-sm); padding:var(--c-s3);margin-bottom:var(--c-s3); font-size:var(--c-text-sm);line-height:var(--c-lh-sm);color:var(--c-muted); } .c-empty{ text-align:center;padding:var(--c-s5) var(--c-s3); border:1px dashed var(--c-line);border-radius:var(--c-radius-lg); background:var(--c-sunken);color:var(--c-muted); } .c-empty h4{color:var(--c-heading);margin-bottom:var(--c-s1)} .c-empty p{font-size:var(--c-text-sm);line-height:var(--c-lh-sm)} /* Skeletons stand in while the six refreshers fetch. Before this, every list in both consoles rendered from empty and a slow connection read as broken. */ .c-skel{display:flex;flex-direction:column;gap:var(--c-s3);padding:var(--c-s2) 0} .c-skel__row{display:flex;flex-direction:column;gap:var(--c-s2)} .c-skel__bar{ height:12px;border-radius:var(--c-radius-sm);background:var(--c-sunken); background-image:linear-gradient(90deg,var(--c-sunken),var(--c-line-subtle),var(--c-sunken)); background-size:200% 100%;animation:c-shimmer 1.4s var(--c-ease) infinite; } .c-skel__bar--title{height:16px;width:45%} .c-skel__bar--meta{width:70%} @keyframes c-shimmer{from{background-position:200% 0}to{background-position:-200% 0}} @media (prefers-reduced-motion:reduce){ .c-skel__bar{animation:none} } /* ============================================================================ TABS / PANES ========================================================================= */ .c-tabs{ display:flex;gap:var(--c-s1);flex-wrap:wrap; border-bottom:1px solid var(--c-line);margin-bottom:var(--c-s4); } .c-tabs button{ background:none;border:none;border-bottom:3px solid transparent; font-family:var(--c-font-sans);font-size:var(--c-text-body);font-weight:500; color:var(--c-muted);cursor:pointer; padding:var(--c-s2) var(--c-s3);min-height:var(--c-tap); transition:color var(--c-dur-fast) var(--c-ease), border-color var(--c-dur-fast) var(--c-ease); } .c-tabs button:hover{color:var(--c-heading)} .c-tabs button[aria-selected="true"]{color:var(--c-heading);border-bottom-color:var(--c-accent);font-weight:600} .c-tabs button[aria-disabled="true"]{opacity:.5;cursor:not-allowed} .c-pane:focus{outline:none} .c-pane:focus-visible{box-shadow:var(--c-focus-ring);border-radius:var(--c-radius-sm)}