/* ==================================================================================================
   ARCHEX F - THE NEW LOOK (7 October 2026)

   Adam Deane approved the "F" design (Home, Dispatch, the job with its diary, the phone) on the design canvas and
   asked for it to go into the system: "Im happy for you to start putting the new design into the system". His
   measure for every screen is his dad's: KISS, Keep It Simple Stupid - for the person using it, not the system
   ("it should be simple to use but fuckn strong under it").

   Light and calm: a warm off-white ground, white cards, one clay orange for the thing to press, and each person in
   their own colour (PersonDisplay.Hue) on every page.

   Its own file, loaded after archex-one.css, so nothing older has to change for it to apply, and its own tokens
   (--f-*): the --archex-* tokens each have one owner, and these are not them.
   ================================================================================================== */

:root {
    --f-bg: #F4F3F0;
    --f-card: #FFFFFF;
    --f-line: #E6E2DC;
    --f-line2: #D6D0C7;
    --f-rule: #F1EEEA;
    --f-ink: #1E1C19;
    --f-ink2: #34302B;
    --f-muted: #5F5952;
    --f-faint: #736D65;
    --f-clay: #B05A28;
    --f-clay-d: #8E4519;
    --f-clay-t: #FBEFE7;
    --f-clay-l: #EFD5C3;
    --f-green: #2A7449;
    --f-green-t: #E4F1E8;
    --f-blue: #2A6293;
    --f-blue-t: #E5EEF7;
    --f-red: #B23B2A;
    --f-red-t: #F9E6E2;
    --f-amber: #9A6A12;
    --f-amber-t: #FBF1DC;
    --f-font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-shadow: 0 2px 10px rgba(30, 28, 25, .06);
}

/* ---- A face: a person's picture, or their initials in their own colour --------------------------- */

.f-face {
    position: relative;
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: hsl(var(--h, 30) 38% 44%);
    color: #FFFFFF;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
}

.f-face > img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.f-face.is-sm { width: 30px; height: 30px; font-size: 12px; }
.f-face.is-xs { width: 24px; height: 24px; font-size: 10.5px; }
.f-face.is-system { background: var(--f-clay); }

.f-face > b {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2.5px solid #FFFFFF;
}

.f-face > b.is-site { background: var(--f-green); }
.f-face > b.is-office { background: var(--f-blue); }
.f-face > b.is-leave { background: #8C867E; }

.f-badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--f-clay);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* ==================================================================================================
   THE BAR ACROSS THE TOP, CALMER
   Where you are is a light pill, as in the design, not a charcoal one: orange stays the colour of the one thing to do
   (New job), and nothing else on the bar shouts.
   ================================================================================================== */

.ax-place { color: var(--f-muted); font-family: var(--f-font); font-weight: 600; }
.ax-place:hover { background: var(--f-bg); color: var(--f-ink); }

.ax-place.is-here,
.ax-place.is-here:hover {
    background: var(--f-bg);
    color: var(--f-ink);
    font-weight: 700;
}

.ax-place-badge { background: var(--f-clay); font-family: var(--f-font); }
.ax-app-topbar .ax-btn-primary { border-color: var(--f-clay); background: var(--f-clay); font-family: var(--f-font); }
.ax-app-topbar .ax-btn-primary:hover { border-color: var(--f-clay-d); background: var(--f-clay-d); }

/* ==================================================================================================
   HOME ("/")
   ================================================================================================== */

.fh {
    min-height: calc(100vh - var(--archex-topbar-h, 64px));
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 28px 28px;
    background: var(--f-bg);
    color: var(--f-ink);
    font-family: var(--f-font);
    font-size: 15px;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;
}

.fh *,
.fh *::before,
.fh *::after { box-sizing: border-box; }

.fh a { color: inherit; text-decoration: none; }
.fh button { font: inherit; color: inherit; cursor: pointer; }
.fh svg { flex: none; }

/* ---- Hello: who you are, your dad's words, the weather, and the team ---------------------------- */

.fh-hello {
    display: flex;
    align-items: center;
    gap: 26px;
    min-height: 84px;
}

.fh-hi { min-width: 0; }

.fh-hi h1 {
    margin: 0;
    font-family: var(--f-font);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--f-ink);
}

.fh-sub {
    margin: 3px 0 0;
    font-size: 15px;
    color: var(--f-muted);
}

/* "Be kind to yourself and be kind to others." Adam's dad's words, in his memory: one quiet line, never decoration. */
.fh-kind {
    margin: 6px 0 0;
    font-size: 14px;
    font-style: italic;
    color: var(--f-clay-d);
}

.fh-wxs {
    display: flex;
    gap: 10px;
    min-width: 0;
}

.fh-wx {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 300px;
    height: 64px;
    padding: 0 18px 0 14px;
    border: 1px solid var(--f-line);
    border-radius: 16px;
    background: var(--f-card);
}

.fh-wx svg { flex: none; width: 34px; height: 34px; color: #4D6F8E; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* The words may shrink so the long place name ends in "…" inside the card (7 October 2026, the audit: at tablet width
   "100-104 Schreenans Road, Bonshaw · clear, gusts 30" ran out past the card's edge). */
.fh-wx > div { min-width: 0; }
.fh-wx b { display: block; font-size: 20px; font-weight: 800; line-height: 1.1; }
.fh-wx span { display: block; overflow: hidden; font-size: 12.5px; color: var(--f-muted); text-overflow: ellipsis; white-space: nowrap; }
a.fh-wx:hover { border-color: var(--f-line2); box-shadow: var(--f-shadow); }
.fh-wx.is-alert { border-color: #E9CF9B; background: var(--f-amber-t); }
.fh-wx.is-alert svg { color: var(--f-amber); }
.fh-wx.is-alert span { color: #6B4A0C; }

.fh-crew {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.fh-crew-t {
    margin-right: 6px;
    font-size: 13px;
    line-height: 1.3;
    text-align: right;
    color: var(--f-muted);
}

.fh-crew-t b { display: block; font-size: 14px; color: var(--f-blue); }
.fh-crew-faces { display: flex; gap: 6px; }
.fh-crew-faces .f-face { cursor: default; }

/* ---- The doors, as tiles ------------------------------------------------------------------------ */

.fh-tiles {
    display: grid;
    grid-template-columns: 1.4fr repeat(var(--fh-tiles, 8), minmax(0, 1fr));
    gap: 12px;
}

.fh-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 9px;
    min-width: 0;
    min-height: 120px;
    padding: 14px 16px;
    border: 1px solid var(--f-line);
    border-radius: 16px;
    background: var(--f-card);
    text-align: left;
}

.fh-tile:hover { border-color: var(--f-line2); box-shadow: var(--f-shadow); }
.fh-tile:focus-visible { outline: 3px solid var(--f-clay-l); outline-offset: 2px; }

.fh-tile .ic {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--f-bg);
    color: var(--f-ink);
}

.fh-tile .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fh-tile strong { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; }
.fh-tile small { display: block; max-width: 100%; margin-top: -6px; overflow: hidden; font-size: 12.5px; color: var(--f-muted); text-overflow: ellipsis; white-space: nowrap; }
.fh-tile.is-main { border-color: var(--f-clay-l); background: var(--f-clay-t); }
.fh-tile.is-main .ic { background: var(--f-clay); color: #FFFFFF; }

/* ---- Three columns: what needs you, the team, your own list ------------------------------------- */

.fh-cols {
    flex: 1;
    display: grid;
    grid-template-columns: 480px minmax(0, 1fr) 440px;
    gap: 18px;
    align-items: start;
}

.fh-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.fh-col-h {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.fh-col-h span.is-quiet { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--f-faint); }

.fh-empty {
    margin: 0;
    padding: 14px 16px;
    border: 1px dashed var(--f-line2);
    border-radius: 14px;
    font-size: 14px;
    color: var(--f-muted);
}

/* Needs you: one card per thing, the question first and the way to do it under it. */
.fh-need {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 12px;
    border: 1px solid var(--f-clay-l);
    border-radius: 14px;
    background: var(--f-card);
}

.fh-need-from { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--f-muted); }
.fh-need-from svg { width: 16px; height: 16px; color: var(--f-clay); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fh-need-from .f-badge { margin-left: auto; }
.fh-need-q { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.fh-need-d { margin: -4px 0 0; font-size: 13.5px; color: var(--f-muted); }
.fh-need.is-high { border-color: #E8B9AE; }
.fh-need.is-high .fh-need-from svg { color: var(--f-red); }

.fh-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.fh-go,
.fh-quiet,
.fh-look {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
}

.fh-go { border: 0; background: var(--f-clay); color: #FFFFFF !important; }
.fh-go:hover { background: var(--f-clay-d); }
.fh-quiet { border: 1px solid var(--f-line2); background: var(--f-card); color: var(--f-muted) !important; font-weight: 600; }
.fh-quiet:hover { border-color: var(--f-faint); color: var(--f-ink) !important; }
.fh-look { margin-left: auto; padding: 0 8px; border: 0; background: transparent; color: var(--f-clay-d) !important; }
.fh-look:hover { text-decoration: underline; }

/* The email cards (MailWaiting), dressed as the rest of Needs you. */
:is(.fh, .fd-mail) .mw {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

:is(.fh, .fd-mail) .mw-head { display: none; }
:is(.fh, .fd-mail) .mw-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }

:is(.fh, .fd-mail) .mw-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--f-clay-l);
    border-radius: 14px;
    background: var(--f-card);
}

:is(.fh, .fd-mail) .mw-email { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; color: var(--f-muted); }
:is(.fh, .fd-mail) .mw-from { font-weight: 700; color: var(--f-ink); }
:is(.fh, .fd-mail) .mw-subject { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.fh, .fd-mail) .mw-when { margin-left: auto; color: var(--f-faint); }
:is(.fh, .fd-mail) .mw-question { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--f-ink); }
:is(.fh, .fd-mail) .mw-why { font-size: 12.5px; color: var(--f-muted); }
:is(.fh, .fd-mail) .mw-acts { display: flex; gap: 6px; margin-top: 2px; }
:is(.fh, .fd-mail) .mw-acts .ax-btn { height: 38px; padding: 0 16px; border-radius: 10px; font-size: 14.5px; }
:is(.fh, .fd-mail) .mw-acts .ax-btn-primary { border-color: var(--f-clay); background: var(--f-clay); color: #FFFFFF; }
:is(.fh, .fd-mail) .mw-said { margin: 0 0 8px; font-size: 13.5px; color: var(--f-green); }
:is(.fh, .fd-mail) .mw-said.is-bad { color: var(--f-red); }
:is(.fh, .fd-mail) .mw-more { font-size: 13.5px; font-weight: 700; color: var(--f-clay-d); }

.fh-more {
    display: grid;
    place-items: center;
    height: 44px;
    border: 1px dashed var(--f-line2);
    border-radius: 12px;
    font-weight: 700;
    color: var(--f-muted);
}

.fh-more:hover { border-style: solid; color: var(--f-ink); }

/* Your day (staff): the one job today, and the way there. */
.fh-day {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--f-clay-l);
    border-radius: 16px;
    background: var(--f-clay-t);
}

.fh-day .tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 13px;
    background: #FFFFFF;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--f-clay-d);
}

.fh-day h3 { margin: 2px 0 0; font-size: 22px; font-weight: 800; line-height: 1.2; }
.fh-day p { margin: 0; font-size: 14px; color: #4A3D35; }
.fh-day .fh-acts { margin-top: 8px; }

/* ---- The team: posts and what happened, newest first --------------------------------------------- */

.fh-feed {
    overflow: hidden;
    border: 1px solid var(--f-line);
    border-radius: 16px;
    background: var(--f-card);
}

.fh-post {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--f-line);
}

.fh-post textarea {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    max-height: 160px;
    padding: 11px 14px;
    border: 1px solid var(--f-line2);
    border-radius: 12px;
    background: #FFFFFF;
    font: inherit;
    color: var(--f-ink);
    resize: vertical;
    outline: none;
}

.fh-post textarea:focus { border-color: var(--f-clay); box-shadow: 0 0 0 3px var(--f-clay-t); }
.fh-post textarea::placeholder { color: var(--f-faint); }
.fh-post .fh-go { height: 44px; }
.fh-post .fh-go:disabled { opacity: .45; cursor: default; }
.fh-post-said { margin: 0; padding: 0 16px 10px; font-size: 13px; color: var(--f-muted); }

.fh-mentions {
    position: absolute;
    z-index: 5;
    top: 58px;
    left: 54px;
    display: flex;
    flex-direction: column;
    min-width: 240px;
    padding: 6px;
    border: 1px solid var(--f-line);
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 12px 30px rgba(30, 28, 25, .14);
}

.fh-mentions button {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
}

.fh-mentions button:hover { background: var(--f-bg); }
.fh-mentions small { margin-left: auto; color: var(--f-faint); }

.fh-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--f-line);
}

.fh-item:last-of-type { border-bottom: 0; }
.fh-item .who { font-size: 14.5px; font-weight: 700; }
.fh-item .what { font-size: 14.5px; color: var(--f-ink); }
.fh-item p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--f-ink2); overflow-wrap: anywhere; white-space: pre-line; }
.fh-item time { padding-top: 2px; font-size: 12.5px; color: var(--f-faint); white-space: nowrap; }
.fh-item.is-post { background: #FFFDFB; }
.fh-item.is-attention { box-shadow: inset 3px 0 0 var(--f-red); }

.fh-tag { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; font-size: 13px; font-weight: 700; color: var(--f-green); }
.fh-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fh-tag.is-red { color: var(--f-red); }
.fh-tag.is-blue { color: var(--f-blue); }

.fh-jobchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: 28px;
    margin-top: 8px;
    padding: 0 11px;
    border: 1px solid var(--f-line);
    border-radius: 14px;
    background: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    color: var(--f-ink);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fh-jobchip:hover { border-color: var(--f-line2); }
.fh-jobchip i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--h, 30) 45% 45%); }

.fh-ph { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.fh-ph a { position: relative; display: block; height: 96px; overflow: hidden; border-radius: 10px; background: #D9D4CC; }
.fh-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fh-ph span { position: absolute; inset: auto 0 0 0; padding: 14px 8px 5px; background: linear-gradient(to top, rgba(20, 18, 16, .7), rgba(20, 18, 16, 0)); font-size: 11.5px; font-weight: 700; color: #FFFFFF; }

.fh-week { margin: 12px 16px 16px; padding: 14px 16px; border-radius: 14px; background: var(--f-bg); }
.fh-week h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; }
.fh-week h3 span { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--f-faint); }
.fh-week-n { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.fh-week-n div { padding: 10px 12px; border-radius: 12px; background: #FFFFFF; }
.fh-week-n b { display: block; font-size: 24px; font-weight: 800; line-height: 1.1; }
.fh-week-n span { display: block; font-size: 12.5px; color: var(--f-muted); }

/* ---- Your own list: tasks, and what is coming ---------------------------------------------------- */

.fh-card {
    padding: 12px 14px 6px;
    border: 1px solid var(--f-line);
    border-radius: 16px;
    background: var(--f-card);
}

.fh-card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-family: var(--f-font); font-size: 15px; font-weight: 700; color: var(--f-ink); }
.fh-card h2 a,
.fh-card h2 span { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--f-faint); }
.fh-card h2 a:hover { color: var(--f-clay-d); }
.fh-card .fh-empty { margin: 6px 0 10px; }

.fh-task {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 9px 0;
    border: 0;
    border-top: 1px solid var(--f-rule);
    background: transparent;
    text-align: left;
}

.fh-task:first-of-type { border-top: 0; }
.fh-task .box { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; padding: 0; border: 2px solid var(--f-line2); border-radius: 7px; background: #FFFFFF; color: #FFFFFF; cursor: pointer; }
.fh-task .box svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.fh-task .box:hover { border-color: var(--f-green); }

/* The words open the task (TaskSheet, 8 October 2026, Louisa #331); only the box ticks it. */
.fh-task-open { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fh-task-open:hover .tt { color: var(--f-clay-d); }
.fh-task.is-done .box { border-color: var(--f-green); background: var(--f-green); }
.fh-task.is-done .tt { color: var(--f-muted); text-decoration: line-through; }
.fh-task .tt { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.fh-task small { display: block; font-size: 12.5px; color: var(--f-muted); }
.fh-task small em { font-style: normal; font-weight: 700; color: var(--f-red); }

.fh-up {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    padding: 9px 0;
    border-top: 1px solid var(--f-rule);
    text-align: left;
}

.fh-up:first-of-type { border-top: 0; }
.fh-up:hover .tt { color: var(--f-clay-d); }
.fh-up .dt { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 46px; border-radius: 10px; background: var(--f-bg); font-size: 11.5px; font-weight: 700; text-transform: uppercase; color: var(--f-muted); }
.fh-up .dt b { font-size: 18px; line-height: 1; color: var(--f-ink); }
.fh-up .tt { display: block; overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.fh-up small { display: block; font-size: 12.5px; color: var(--f-muted); }
.fh-up small em { font-style: normal; font-weight: 700; color: var(--f-clay-d); }

.fh-week-row { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--f-rule); font-size: 13.5px; }
.fh-week-row:first-of-type { border-top: 0; }
.fh-week-row b { flex: none; width: 64px; }
.fh-week-row span { min-width: 0; color: var(--f-muted); }
.fh-week-row a { color: var(--f-ink); font-weight: 600; }
.fh-week-row a:hover { color: var(--f-clay-d); }

.fh-wait { margin: 0; padding: 12px 2px; font-size: 14px; color: var(--f-muted); }
.fh-wait.is-in-feed { padding: 14px 16px; }
.fh-task small em.is-plain { font-weight: 600; color: var(--f-muted); }

/* ==================================================================================================
   THE JOB WINDOW (/projects/{id}, the job card): the job down the left, the diary in the middle, what the diary holds
   on the right. The card's own scoped rules draw the parts; these dress them in the new look and lay them out.
   ================================================================================================== */

/* The job's header, on every page of the job: calmer, in the same type, its stage in clay. */
.ax-workspace.is-f .ax-projecthead .ax-os-back { color: var(--f-muted); font-family: var(--f-font); font-weight: 600; }
.ax-workspace.is-f .ax-projecthead .ax-os-eyebrow { color: var(--f-faint); font-family: var(--f-font); letter-spacing: .08em; }
.ax-workspace.is-f .ax-projecthead .ax-os-heading h1 { font-family: var(--f-font); font-size: 28px; font-weight: 800; letter-spacing: -.01em; color: var(--f-ink); }
.ax-workspace.is-f .ax-projecthead .ax-os-title-row .ax-badge { height: 28px; padding: 0 12px; border: 1px solid var(--f-clay-l); border-radius: 14px; background: var(--f-clay-t); color: var(--f-clay-d); font-family: var(--f-font); font-size: 13px; font-weight: 700; }
.ax-workspace.is-f .ax-projecthead .ax-projectfacts dt { font-family: var(--f-font); color: var(--f-faint); }
.ax-workspace.is-f .ax-projecthead .ax-projectfacts dd { font-family: var(--f-font); color: var(--f-ink2); }
.ax-workspace.is-f .ax-projecthead .ax-tab { font-family: var(--f-font); }
.ax-workspace.is-f .ax-projecthead .ax-tab.active { color: var(--f-ink); border-bottom-color: var(--f-clay); }

.fj { gap: 16px; padding: 18px; border-color: var(--f-line); border-radius: 18px; background: var(--f-card); box-shadow: none; font-family: var(--f-font); color: var(--f-ink); }
.fj .jc-status { border-color: var(--f-line); }
.fj .jc-status button.jc-status-b.ax-list-button { color: var(--f-muted); font-family: var(--f-font); }
.fj .jc-status button.jc-status-b.ax-list-button.is-chosen { background: var(--f-ink); color: #FFFFFF; }
.fj .jc-stage button { border-color: var(--f-line); color: var(--f-faint); font-family: var(--f-font); }
.fj .jc-stage.is-done button { color: var(--f-ink2); }
.fj .jc-stage.is-now button { border-color: var(--f-clay-l); background: var(--f-clay-t); color: var(--f-clay-d); }
.fj .jc-stage.is-now .jc-stage-dot { border-color: var(--f-clay); background: var(--f-clay); }
.fj .jc-stage.is-now::before { background: var(--f-clay); }

.fj .jc-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 4px; padding: 2px 0 12px; border-bottom: 1px solid var(--f-line); }
.fj .jc-action { width: auto; height: 62px; border: 0; border-radius: 12px; background: transparent; color: var(--f-muted); font-family: var(--f-font); font-size: 13px; font-weight: 600; }
.fj .jc-action:link,
.fj .jc-action:visited { color: var(--f-muted); }
.fj .jc-action svg { width: 22px; height: 22px; color: var(--f-ink); }
.fj .jc-action:hover { background: var(--f-bg); color: var(--f-ink); }
/* SMS opens the phone's Messages - so it's there on a phone, not on a desk where nothing would answer it. */
.fj .jc-action.jc-action-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .fj .jc-action.jc-action-touch { display: flex; } }

.fj .jc-columns.fj-body { display: grid; grid-template-columns: 400px minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.fj-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fj .jc-panel { padding: 14px 16px; border-radius: 14px; background: var(--f-bg); }
.fj .jc-panel-head h2,
.fj-h { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--f-font); font-size: 15px; font-weight: 800; color: var(--f-ink); }

/* Next up: the first thing is the one to do, in clay; the rest under it. */
.fj .jc-next .jc-todo { border-left-color: var(--f-line2); border-radius: 12px; }
.fj .jc-next .jc-todo:first-child { border: 1px solid var(--f-clay-l); border-left: 4px solid var(--f-clay); background: var(--f-clay-t); }
.fj .jc-next .jc-todo:first-child .jc-todo-go { border-color: var(--f-clay); background: var(--f-clay); color: #FFFFFF; }
.fj .jc-todo.is-attention { border-left-color: var(--f-clay); }
.fj .jc-todo-go,
.fj .jc-todo-done { height: 36px; border-radius: 10px; font-family: var(--f-font); }

.fj-box { padding: 12px 14px; border: 1px solid var(--f-line); border-radius: 14px; background: #FFFFFF; }
.fj-box .fj-h { margin-bottom: 8px; }
.fj-kv { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 7px 12px; margin: 0; font-size: 14px; }
.fj-kv dt { color: var(--f-muted); }
.fj-kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.fj-team { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fj-team-n { margin-left: 4px; font-weight: 600; color: var(--f-ink2); }
.fj-none { margin: 6px 0; font-size: 13.5px; color: var(--f-muted); }

/* The client's people, one tap to call or email (7 October 2026, #273). */
.fj-client { display: grid; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--f-rule); }
.fj-client-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; font-size: 13px; color: var(--f-muted); }
.fj-client-head small { color: var(--f-amber); font-weight: 600; }
.fj-contact { display: grid; gap: 1px; font-size: 13.5px; }
.fj-contact-who strong { font-weight: 650; color: var(--f-ink); }
.fj-contact-who small { color: var(--f-muted); font-size: 12.5px; }
.fj-contact a { color: var(--f-clay-d); text-decoration: none; overflow-wrap: anywhere; }
.fj-contact a:hover { text-decoration: underline; }

.fj-task { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--f-rule); }
.fj-task:first-of-type { border-top: 0; }
.fj-task .box { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; padding: 0; border: 2px solid var(--f-line2); border-radius: 7px; background: #FFFFFF; color: #FFFFFF; cursor: pointer; }
.fj-task .box svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.fj-task .box:hover { border-color: var(--f-green); }
.fj-task.is-done .box { border-color: var(--f-green); background: var(--f-green); }
.fj-task.is-late .box { border-color: var(--f-red); }
.fj-task .tx { min-width: 0; }
.fj-task button.tx { flex: 1; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fj-task button.tx:hover .tt { color: var(--f-clay-d); }
.fj-task .tt { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.fj-task.is-done .tt { color: var(--f-muted); text-decoration: line-through; }
.fj-task small { display: block; font-size: 12.5px; color: var(--f-muted); }
.fj-task.is-late small { color: var(--f-red); }

.fj-add { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 6px; margin-top: 8px; }

.fj-add input,
.fj-add select {
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--f-line2);
    border-radius: 10px;
    background: #FFFFFF;
    font: inherit;
    font-size: 14px;
    color: var(--f-ink);
}

.fj-add input:focus,
.fj-add select:focus { outline: none; border-color: var(--f-clay); box-shadow: 0 0 0 3px var(--f-clay-t); }
.fj-add .f-btn { height: 38px; }
.fj-link { margin-top: 6px; padding: 0; border: 0; background: transparent; color: var(--f-clay-d); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }

/* The diary. */
.fj .fj-diary { padding: 14px 16px; background: #FFFFFF; border: 1px solid var(--f-line); }
.fj .jc-compose textarea { border-color: var(--f-line2); border-radius: 12px; font-family: var(--f-font); }
.fj .jc-compose textarea:focus { border-color: var(--f-clay); box-shadow: 0 0 0 3px var(--f-clay-t); }
.fj .jc-compose .ax-btn-primary { border-color: var(--f-clay); background: var(--f-clay); }
.fj .jc-link { color: var(--f-clay-d); }

.fj-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; }
.fj-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.fj-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--f-line);
    border-radius: 16px;
    background: #FFFFFF;
    color: var(--f-muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.fj-chip em { font-style: normal; font-weight: 700; color: var(--f-faint); }
.fj-chip.is-on { border-color: var(--f-ink); background: var(--f-ink); color: #FFFFFF; }
.fj-chip.is-on em { color: #D6D0C7; }

.fj-find { display: flex; align-items: center; gap: 6px; margin-left: auto; height: 34px; padding: 0 10px; border: 1px solid var(--f-line); border-radius: 10px; background: var(--f-bg); color: var(--f-faint); }
.fj-find svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fj-find input { width: 170px; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--f-ink); outline: none; }

.fj .jc-day { color: var(--f-faint); font-family: var(--f-font); }
.fj .jc-line:hover { background: var(--f-bg); }
.fj .jc-line-icon { background: var(--f-bg); }
.fj .jc-line.is-email .jc-line-icon { background: #EBF0F6; color: #355779; }
.fj .jc-line.is-note .jc-line-icon { background: #F8F1DC; color: #735709; }
.fj .jc-line.is-booking .jc-line-icon { background: var(--f-green-t); color: var(--f-green); }
.fj .jc-line.is-field .jc-line-icon { background: var(--f-clay-t); color: var(--f-clay-d); }
.fj .jc-line.is-photo .jc-line-icon { background: #EEF3E6; color: #4F5A22; }
.fj .jc-line.is-file .jc-line-icon { background: #F1EEEA; color: var(--f-ink2); }

.fj-more { display: block; width: 100%; height: 40px; margin: 6px 0 0; border: 1px dashed var(--f-line2); border-radius: 10px; background: transparent; color: var(--f-muted); font: inherit; font-weight: 700; cursor: pointer; }
.fj-more:hover { border-style: solid; color: var(--f-ink); }

.fj-month { margin-top: 8px; }

.fj-month-b {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto 20px;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 54px;
    padding: 8px 12px;
    border: 1px solid var(--f-line);
    border-radius: 12px;
    background: var(--f-bg);
    color: var(--f-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fj-month-b:hover { border-color: var(--f-line2); }
.fj-month-b .mn b { display: block; font-size: 15px; font-weight: 800; }
.fj-month-b .mn small { font-size: 12.5px; color: var(--f-faint); }
.fj-month-b .mk { overflow: hidden; font-size: 13.5px; color: var(--f-muted); text-overflow: ellipsis; white-space: nowrap; }
.fj-month-b .mc { font-size: 18px; font-weight: 800; text-align: right; }
.fj-month-b .mc small { display: block; font-size: 11.5px; font-weight: 600; color: var(--f-faint); }
.fj-month-b .chev { width: 20px; height: 20px; fill: none; stroke: var(--f-faint); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 120ms ease; }
.fj-month-b.is-open .chev { transform: rotate(180deg); }
.fj-month .jc-feed { padding: 0 4px; }
.fj-month-b.is-year { background: #FFFFFF; }
.fj-month-b.is-year .mn b { font-size: 17px; }
.fj-year-months { padding: 2px 0 6px 16px; border-left: 2px solid var(--f-line); margin: 6px 0 0 10px; }

/* The composer: tell someone, who reads it, a photo or a file, and Save. */
.fj-compose-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fj-tell { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; font-size: 13px; font-weight: 700; color: var(--f-faint); }
.fj-tell > span { margin-right: 4px; }
.fj-tell button { padding: 0; border: 2px solid #FFFFFF; cursor: pointer; }
.fj-tell button:hover { border-color: var(--f-clay-l); }
.fj-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #E9E6E1; }
.fj-seg button { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--f-muted); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.fj-seg button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fj-seg button.is-on { background: #FFFFFF; color: var(--f-ink); box-shadow: 0 1px 2px rgba(30, 28, 25, .12); }
.fj-ibtn { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--f-line2); border-radius: 10px; background: #FFFFFF; color: var(--f-muted); cursor: pointer; }
.fj-ibtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fj-ibtn:hover { color: var(--f-ink); border-color: var(--f-faint); }

.fj-hidden { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--f-bg); font-size: 13px; color: var(--f-muted); }

/* Coming up, and waiting. */
.fj-pins { margin: 12px 0 4px; padding: 10px 12px; border: 1px solid var(--f-clay-l); border-radius: 14px; background: var(--f-clay-t); }
.fj-pins-h { margin-bottom: 4px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--f-clay-d); }
.fj-pin { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.fj-pin + .fj-pin { border-top: 1px solid var(--f-clay-l); }
.fj-pin-t { flex: 1; min-width: 0; }
.fj-pin-t b { display: block; font-size: 14px; }
.fj-pin-t small { display: block; font-size: 12.5px; color: #6B4A33; }
.fj-pin .f-btn { height: 34px; }

.fj-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--f-bg); color: var(--f-muted); }
.fj-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fj-ic.is-wait { background: #FFFFFF; color: var(--f-amber); }
.fj-ic.is-book { background: #FFFFFF; color: var(--f-green); }
.fj-ic.is-field { background: var(--f-clay-t); color: var(--f-clay-d); }
.fj-ic.is-mail { background: #EBF0F6; color: #355779; }

/* The diary's days and cards. */
.fj-list { display: flex; flex-direction: column; }
.fj .fj-dayh { margin: 14px 0 4px; }

.fj-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
    margin: 4px 0;
    padding: 12px;
    border: 1px solid var(--f-line);
    border-radius: 14px;
    background: #FFFFFF;
}

.fj-card .f-face { width: 34px; height: 34px; font-size: 12.5px; }
.fj-card.is-office { border-style: dashed; background: #FCFBF9; }
.fj-field { border-color: var(--f-clay-l); }
.fj-b { min-width: 0; }
.fj-ch { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.fj-ch b { font-size: 15px; font-weight: 700; }
.fj-sub { font-size: 13px; color: var(--f-muted); }
.fj-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--f-bg); font-size: 12px; font-weight: 700; color: var(--f-muted); }
.fj-tag svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fj-tag.is-to { background: var(--f-blue-t); color: var(--f-blue); }
.fj-tag.is-warn { background: var(--f-red-t); color: var(--f-red); }
.fj-tag.is-lock { background: #EFEBE5; color: #5E554B; }
.fj-q { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--f-ink2); overflow-wrap: anywhere; white-space: pre-line; }
.fj-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; font-size: 13.5px; color: var(--f-muted); }
.fj-who > span:last-child { margin-left: 4px; }
.fj-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fj-stats span { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--f-bg); font-size: 12.5px; font-weight: 700; color: var(--f-ink2); }
.fj-stats span.is-lock { background: #EFEBE5; color: #5E554B; }
.fj-stats span svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fj-photos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.fj-photos a { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; background: #D9D4CC; }
.fj-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fj-phmore { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 10px; background: var(--f-bg); font-weight: 800; color: var(--f-muted); }
.fj-last { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--f-bg); font-size: 14px; line-height: 1.45; color: var(--f-ink2); }
.fj-last small { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--f-faint); }
.fj-log { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding: 6px 0; border-top: 1px solid var(--f-rule); }
.fj-logl { display: grid; grid-template-columns: 64px 24px minmax(0, 1fr); align-items: start; gap: 8px; padding: 4px 0; font-size: 14px; }
.fj-logl time { padding-top: 3px; font-size: 12px; font-weight: 700; color: var(--f-faint); white-space: nowrap; }
.fj-logl .t { line-height: 1.45; color: var(--f-ink2); overflow-wrap: anywhere; }
.fj-logl.is-office .t { color: var(--f-muted); font-style: italic; }
.fj-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.fj-acts .f-btn { height: 34px; padding: 0 12px; font-size: 13.5px; }
.fj-time { padding-top: 2px; font-size: 12.5px; color: var(--f-faint); white-space: nowrap; }
.fj-msgs { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

.fj-msg {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: var(--f-bg);
    color: var(--f-ink2);
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.fj-msg:hover { background: #ECE8E2; }
.fj-msg small { font-size: 12px; font-weight: 700; color: var(--f-faint); }
.fj-msg.is-out { background: #F4F7FB; }
.fj-line { display: flex; align-items: center; gap: 8px; }
.fj-line > :first-child { flex: 1; min-width: 0; }
.fj-line.is-office .jc-line { opacity: .85; }

/* A withdrawn entry (7 October 2026): struck through where it happened, with who, when and why - never hidden. */
.fj .jc-line.is-gone { display: flex; align-items: center; gap: 10px; width: 100%; }
.fj .jc-line.is-gone .jc-line-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fj .jc-line.is-gone s { color: var(--f-muted); font-weight: 600; text-decoration-thickness: 1.5px; overflow-wrap: anywhere; }
.fj .jc-line.is-gone small { color: var(--f-muted); font-size: 12px; overflow-wrap: anywhere; }
.fj .jc-line.is-gone .jc-line-icon { opacity: .55; }
.fj-tag.is-gone { flex: none; background: #F1EEEA; color: var(--f-muted); }

.fj-doc { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--f-ink); text-decoration: none; }
.fj-doc:hover b { color: var(--f-clay-d); }
.fj-doc b { display: block; font-size: 14px; }
.fj-doc small { display: block; font-size: 12.5px; color: var(--f-muted); }
.fj-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.fj-sources span { height: 26px; padding: 0 10px; border-radius: 13px; background: var(--f-bg); font-size: 12.5px; font-weight: 700; line-height: 26px; color: var(--f-ink2); }

@media (max-width: 1000px) {
    .fj-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fj-msg { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .fj-card { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 10px; }
    .fj-card .fj-time { font-size: 11.5px; }
    .fj-tell { margin-right: 0; }
}

/* What the diary holds - kept in view beside a long diary. */
.fj-rail { position: sticky; top: calc(var(--archex-topbar-h, 64px) + 12px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fj-bars { display: grid; grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr)); gap: 4px; align-items: end; height: 80px; }

.fj-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.fj-bar i { display: block; width: 100%; max-width: 18px; border-radius: 4px; background: #D9D2C8; }
.fj-bar:hover i,
.fj-bar.is-on i { background: var(--f-clay); }
.fj-bar span { font-size: 11px; font-weight: 700; color: var(--f-faint); }
.fj-note { margin: 8px 0 0; font-size: 12.5px; color: var(--f-muted); }

.fj-person { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.fj-person b { display: block; font-size: 14px; }
.fj-person small { display: block; font-size: 12.5px; color: var(--f-muted); }
.f-face.is-outside { background: #8C867E; }

.fj-print { display: flex; align-items: center; gap: 10px; }
.fj-print b { display: block; font-size: 14px; }
.fj-print small { display: block; font-size: 12.5px; color: var(--f-muted); }
.fj-print .f-btn { margin-left: auto; height: 36px; }

@media (max-width: 1500px) {
    .fj .jc-columns.fj-body { grid-template-columns: 360px minmax(0, 1fr); }
    .fj-rail { position: static; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 1000px) {
    .fj .jc-columns.fj-body { grid-template-columns: minmax(0, 1fr); }
    .fj-rail { grid-template-columns: minmax(0, 1fr); }
    .fj-find { margin-left: 0; }
    .fj-month-b { grid-template-columns: 90px minmax(0, 1fr) auto 20px; }
}

/* ==================================================================================================
   THE PHONE: "Got here earlier?" on a day at the office (feedback #266)
   ================================================================================================== */

.px-earlier { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 2px; }
.px-earlier > span { margin-right: 2px; font-size: 14px; font-weight: 600; color: #5F5952; }

.px-earlier-b {
    min-width: 64px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #D6D0C7;
    border-radius: 20px;
    background: #FFFFFF;
    color: #1E1C19;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.px-earlier-b:disabled { opacity: .5; cursor: default; }

/* Any time from 5 am (7 October 2026, #321): a time box and Save, on one line. */
.px-earlier-pick > label { font-size: 14px; font-weight: 600; color: #5F5952; }
.px-earlier-pick .px-earlier-time { flex: 0 0 auto; width: auto; min-width: 128px; min-height: 40px; }
.px-earlier-pick .px-earlier-save { flex: 0 0 auto; width: auto; min-height: 40px; margin: 0; padding: 0 18px; }

/* ==================================================================================================
   SETTINGS ("/settings")
   ================================================================================================== */

.fs {
    min-height: calc(100vh - var(--archex-topbar-h, 64px));
    padding: 24px 28px 32px;
    background: var(--f-bg);
    color: var(--f-ink);
    font-family: var(--f-font);
}

.fs-head h1 { margin: 0; font-family: var(--f-font); font-size: 30px; font-weight: 800; letter-spacing: -.01em; color: var(--f-ink); }
.fs-head p { margin: 4px 0 20px; font-size: 15px; color: var(--f-muted); }
.fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }

.fs-door {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 84px;
    padding: 14px 16px;
    border: 1px solid var(--f-line);
    border-radius: 16px;
    background: var(--f-card);
    color: var(--f-ink);
    text-decoration: none;
}

.fs-door:hover { border-color: var(--f-line2); box-shadow: var(--f-shadow); }
.fs-door .ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--f-bg); }
.fs-door .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fs-door strong { display: block; font-size: 15.5px; }
.fs-door small { display: block; font-size: 13px; color: var(--f-muted); }

@media (max-width: 900px) {
    .fs { padding: 16px; }
    .fs-head h1 { font-size: 26px; }
}

/* ==================================================================================================
   BUTTONS, the F way: one clay button for the thing to do, quiet ones beside it
   ================================================================================================== */

.f-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 15px;
    border: 1px solid var(--f-line2);
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--f-ink);
    font-family: var(--f-font);
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.f-btn:hover { border-color: var(--f-faint); }
.f-btn.is-go { border-color: var(--f-clay); background: var(--f-clay); color: #FFFFFF; }
.f-btn.is-go:hover { border-color: var(--f-clay-d); background: var(--f-clay-d); }
.f-btn:disabled { opacity: .45; cursor: default; }

/* ==================================================================================================
   DISPATCH ("/dispatch")
   ================================================================================================== */

.fd {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    height: calc(100vh - var(--archex-topbar-h, 64px));
    min-height: 640px;
    background: var(--f-bg);
    color: var(--f-ink);
    font-family: var(--f-font);
    font-size: 15px;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;
}

.fd.is-wide { grid-template-columns: minmax(0, 1fr); }

.fd *,
.fd *::before,
.fd *::after { box-sizing: border-box; }

.fd button { font: inherit; color: inherit; cursor: pointer; }
.fd svg { flex: none; }

.fd-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* The band: where every job is up to, and the team. */
.fd-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--f-line);
    background: #FFFFFF;
}

.fd-flow { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-flow.is-hidden { display: none; }
.px-office-seen { margin-top: 6px; }

.fd-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--f-line);
    border-radius: 20px;
    background: #FFFFFF;
    font-size: 14px;
    white-space: nowrap;
}

.fd-step:hover { border-color: var(--f-line2); }
.fd-step .dot { width: 9px; height: 9px; border-radius: 50%; }
.fd-step b { font-weight: 700; }
.fd-step em { font-style: normal; font-weight: 700; color: var(--f-faint); }
.fd-step.is-on { border-color: var(--f-ink); background: var(--f-ink); color: #FFFFFF; }
.fd-step.is-on em { color: #D6D0C7; }

.fd-staff { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; }
.fd-mate { position: relative; }

.fd-mate-b {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    padding: 0 8px 0 4px;
    border: 1px solid transparent;
    border-radius: 22px;
    background: transparent;
}

.fd-mate-b:hover,
.fd-mate-b.is-open { border-color: var(--f-line); background: var(--f-bg); }
.fd-mate-b .nm { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 600; }
.fd-mate-b .nm svg { width: 14px; height: 14px; fill: none; stroke: var(--f-faint); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.fd-menu {
    position: absolute;
    z-index: 30;
    top: 50px;
    right: 0;
    width: 300px;
    padding: 8px;
    border: 1px solid var(--f-line);
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 16px 40px rgba(30, 28, 25, .18);
}

.fd-menu-h { display: flex; align-items: center; gap: 10px; padding: 6px 6px 10px; border-bottom: 1px solid var(--f-rule); margin-bottom: 4px; }
.fd-menu-h b { display: block; font-size: 14.5px; }
.fd-menu-h small { display: block; font-size: 12.5px; color: var(--f-muted); }

.fd-mi {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 6px 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--f-ink);
    font-size: 14.5px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
}

.fd-mi:hover { background: var(--f-bg); }
.fd-mi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fd-mi small { display: block; font-size: 12px; font-weight: 500; color: var(--f-muted); }
.fd-mi .fd-mi-r { margin-left: auto; }
.fd-mi.is-off { color: var(--f-faint); cursor: default; }
.fd-mi.is-off:hover { background: transparent; }

.fd-compose textarea {
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    border: 1px solid var(--f-line2);
    border-radius: 10px;
    font: inherit;
    resize: vertical;
}

.fd-compose textarea:focus { outline: none; border-color: var(--f-clay); box-shadow: 0 0 0 3px var(--f-clay-t); }
.fd-compose > div { display: flex; gap: 6px; margin-top: 8px; }

/* The tabs. */
.fd-tabs {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
}

.fd-tablist { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #E9E6E1; }

.fd-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--f-muted);
    font-weight: 700;
}

.fd-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fd-tab:hover { color: var(--f-ink); }
.fd-tab.is-on { background: #FFFFFF; color: var(--f-ink); box-shadow: 0 1px 2px rgba(30, 28, 25, .12); }
.fd-when { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--f-faint); }

/* At phone width (7 October 2026, the audit: the four tabs ran 17 px past a 440 screen): the words without their
   icons, closer together, and a row that scrolls rather than pushing the page sideways if a fifth ever comes. */
@media (max-width: 560px) {
    .fd-tablist { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .fd-tablist::-webkit-scrollbar { display: none; }
    .fd-tab { flex: none; gap: 5px; padding: 0 11px; }
    .fd-tab svg { display: none; }
}

.fd-content {
    position: relative;
    flex: 1;
    min-height: 0;
    margin: 0 20px 20px;
    overflow: hidden;
    border: 1px solid var(--f-line);
    border-radius: 16px;
    background: #FFFFFF;
}

/* The map: the phone's map, in a frame. */
.fd-map { position: absolute; inset: 0; background: #DCE3DE; }
.fd-map-said { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 12px 16px; border-radius: 12px; background: #FFFFFF; color: var(--f-muted); }

/* The schedule: the board itself. */
.fd-sched { position: absolute; inset: 0; overflow: auto; padding: 12px; }

/* Tasks, a column each. */
.fd-tasks { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; overflow: auto; }

.fd-add { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr) 160px auto; gap: 8px; }

.fd-add input,
.fd-add select {
    height: 44px;
    min-width: 0;
    padding: 0 12px;
    border: 1px solid var(--f-line2);
    border-radius: 10px;
    background: #FFFFFF;
    font: inherit;
    color: var(--f-ink);
}

.fd-add input:focus,
.fd-add select:focus { outline: none; border-color: var(--f-clay); box-shadow: 0 0 0 3px var(--f-clay-t); }
.fd-add .f-btn { height: 44px; }
.fd-said { margin: 0; font-size: 13.5px; color: var(--f-green); }

.fd-tcols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 320px); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 6px; }
.fd-tcol { padding: 10px 12px; border: 1px solid var(--f-line); border-radius: 14px; background: var(--f-bg); }
.fd-tcol-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fd-tcol-h b { font-size: 14.5px; }
.fd-tcol-h > span:last-child { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--f-faint); }

.fd-task { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; padding: 10px; border-radius: 10px; background: #FFFFFF; }
.fd-task .box { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--f-line2); border-radius: 7px; background: #FFFFFF; color: #FFFFFF; }
.fd-task .box svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.fd-task .box:hover { border-color: var(--f-green); }
.fd-task.is-done .box { border-color: var(--f-green); background: var(--f-green); }
.fd-task.is-done .tt { color: var(--f-muted); text-decoration: line-through; }
.fd-task.is-late .box { border-color: var(--f-red); }
.fd-task .tx { min-width: 0; }
.fd-task .tt { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.fd-task .tj { display: block; font-size: 12.5px; color: var(--f-muted); text-decoration: none; }
.fd-task .tj:hover { color: var(--f-clay-d); }
.fd-task .tg { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 10px; background: var(--f-bg); font-size: 12px; font-weight: 700; color: var(--f-muted); }
.fd-task .tg.is-late { background: var(--f-red-t); color: var(--f-red); }

/* ---- THE TASK LIST (7 October 2026, Adam, #278: "this is cute for prep") ----------------------------------
   One list, grouped by when it is wanted; a line per task; filters above. Dense, quiet, work-like. */
.fd-tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fd-seg { display: inline-flex; padding: 3px; border: 1px solid var(--f-line); border-radius: 10px; background: var(--f-bg); }
.fd-seg button { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--f-muted); font: 600 13.5px var(--f-font); cursor: pointer; }
.fd-seg button span { margin-left: 4px; color: var(--f-faint); font-weight: 700; }
.fd-seg button.is-on { background: #FFFFFF; color: var(--f-ink); box-shadow: 0 1px 3px rgba(30, 28, 25, .12); }
.fd-tpeople { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-tperson { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 4px; border: 1px solid var(--f-line); border-radius: 17px; background: #FFFFFF; color: var(--f-ink2); font: 600 13px var(--f-font); cursor: pointer; }
.fd-tperson span:last-child { color: var(--f-faint); font-weight: 700; }
.fd-tperson.is-on { border-color: var(--f-clay); background: var(--f-clay-t); color: var(--f-clay-d); }
.fd-tfind { flex: 1 1 200px; min-width: 160px; height: 34px; margin-left: auto; padding: 0 12px; border: 1px solid var(--f-line2); border-radius: 10px; background: #FFFFFF; font: 14px var(--f-font); color: var(--f-ink); }
.fd-tfind:focus { outline: none; border-color: var(--f-clay); box-shadow: 0 0 0 3px var(--f-clay-t); }
.fd-tdone { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--f-muted); cursor: pointer; }

.fd-tlist { display: grid; gap: 14px; }
.fd-tgroup { border: 1px solid var(--f-line); border-radius: 12px; background: #FFFFFF; overflow: hidden; }
.fd-tgroup h3 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--f-rule); background: var(--f-bg); font: 700 12px var(--f-font); letter-spacing: .06em; text-transform: uppercase; color: var(--f-muted); }
.fd-tgroup h3 span { color: var(--f-faint); }
.fd-tgroup.is-late h3 { color: var(--f-red); }

.fd-trow { display: grid; grid-template-columns: 26px minmax(0, 1fr) 170px 96px 130px; align-items: center; gap: 12px; min-height: 46px; padding: 6px 14px; border-top: 1px solid var(--f-rule); font-size: 14px; }
.fd-tgroup h3 + .fd-trow { border-top: 0; }
.fd-trow:hover { background: #FBFAF8; }
.fd-trow .box { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 2px solid var(--f-line2); border-radius: 6px; background: #FFFFFF; color: #FFFFFF; cursor: pointer; }
.fd-trow .box svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.fd-trow .box:hover { border-color: var(--f-green); }
.fd-trow.is-late .box { border-color: var(--f-red); }
.fd-trow.is-done .box { border-color: var(--f-green); background: var(--f-green); }
.fd-trow.is-done .tt { color: var(--f-muted); text-decoration: line-through; }
.fd-tmain { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.fd-tmain .tt { font-weight: 600; color: var(--f-ink); overflow-wrap: anywhere; }
.fd-tmain .fd-topen { padding: 0; border: 0; background: transparent; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.fd-tmain .fd-topen:hover { color: var(--f-clay-d); text-decoration: underline; }
.fd-tmain .tj { font-size: 13px; color: var(--f-muted); text-decoration: none; }
.fd-tmain .tj:hover { color: var(--f-clay-d); text-decoration: underline; }
.fd-tflag { padding: 1px 7px; border-radius: 9px; background: var(--f-red-t); color: var(--f-red); font-size: 11.5px; font-weight: 700; }
.fd-twho { width: 100%; height: 32px; min-width: 0; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; font: 13.5px var(--f-font); color: var(--f-ink2); cursor: pointer; }
.fd-twho:hover, .fd-twho:focus { border-color: var(--f-line2); background: #FFFFFF; outline: none; }
.fd-tdue { font-size: 13px; font-weight: 600; color: var(--f-muted); }
.fd-tdue.is-late { color: var(--f-red); }
.fd-tby { font-size: 12.5px; color: var(--f-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
    .fd-trow { grid-template-columns: 26px minmax(0, 1fr); row-gap: 2px; }
    .fd-twho, .fd-tdue, .fd-tby { grid-column: 2; }
    .fd-twho { width: auto; justify-self: start; padding-left: 0; }
    .fd-tfind { margin-left: 0; }
}

/* Emails. */
.fd-mail { position: absolute; inset: 0; overflow: auto; padding: 14px; }
.fd-mail .mw { margin-bottom: 14px; }
.fd-mail-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.fd-mail-h h2 { margin: 0 auto 0 0; font-family: var(--f-font); font-size: 16px; font-weight: 800; color: var(--f-ink); }
.fd-mlist { border: 1px solid var(--f-line); border-radius: 14px; overflow: hidden; }

.fd-mrow {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto 90px;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--f-rule);
    color: var(--f-ink);
    text-decoration: none;
}

.fd-mrow:last-child { border-bottom: 0; }
.fd-mrow:hover { background: #FBFAF8; }
.fd-mrow b { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fd-mrow .sj { overflow: hidden; font-size: 14px; color: var(--f-muted); text-overflow: ellipsis; white-space: nowrap; }
.fd-mrow.is-unread b,
.fd-mrow.is-unread .sj { font-weight: 800; color: var(--f-ink); }
.fd-mrow .jb { max-width: 240px; overflow: hidden; padding: 2px 10px; border-radius: 11px; background: var(--f-green-t); font-size: 12.5px; font-style: normal; font-weight: 700; color: var(--f-green); text-overflow: ellipsis; white-space: nowrap; }
.fd-mrow .jb.is-guess { background: var(--f-amber-t); color: var(--f-amber); }
.fd-mrow time { font-size: 12.5px; color: var(--f-faint); text-align: right; white-space: nowrap; }

/* The jobs, down the right. */
.fd-jobs {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--f-line);
    background: #FFFFFF;
}

.fd-jobs-h { display: flex; align-items: center; gap: 8px; padding: 16px 18px 8px; }
.fd-jobs-h h2 { margin: 0; font-family: var(--f-font); font-size: 18px; font-weight: 800; color: var(--f-ink); }
.fd-jobs-h > span { font-size: 14px; font-weight: 700; color: var(--f-faint); }

.fd-clear {
    margin-left: auto;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--f-line2);
    border-radius: 16px;
    background: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
}

.fd-find {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 18px 8px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--f-line);
    border-radius: 10px;
    background: var(--f-bg);
    color: var(--f-faint);
}

.fd-find svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fd-find input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--f-ink); outline: none; }
.fd-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 10px; border-bottom: 1px solid var(--f-line); }

.fd-chip {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--f-line);
    border-radius: 16px;
    background: #FFFFFF;
    color: var(--f-muted);
    font-size: 13.5px;
    font-weight: 600;
}

.fd-chip.is-on { border-color: var(--f-ink); background: var(--f-ink); color: #FFFFFF; }
.fd-list { flex: 1; min-height: 0; overflow: auto; padding: 4px 0 16px; }
.fd-list .fh-wait,
.fd-list .fh-empty { margin: 14px 18px; }

.fd-job {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 18px 12px 22px;
    border-bottom: 1px solid var(--f-rule);
    box-shadow: inset 4px 0 0 var(--stripe, hsl(var(--h, 30) 45% 55%));
    color: var(--f-ink);
    text-decoration: none;
}

.fd-job:hover { background: #FBFAF8; }

/* The key (7 October 2026, #317): the stripe and the map's dot share these colours. */
.fd-key { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 18px 10px; font-size: 12px; font-weight: 600; color: var(--f-muted); }
.fd-key span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fd-key i { width: 9px; height: 9px; border-radius: 50%; }
.fd-key i.is-person { width: 11px; height: 11px; border: 2px solid #16191C; background: #FFCC00; }
.fd-job-a { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.fd-job-a b { overflow: hidden; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.fd-job-a small { flex: none; margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--f-faint); }
.fd-job-b { overflow: hidden; font-size: 13.5px; color: var(--f-muted); text-overflow: ellipsis; white-space: nowrap; }
.fd-job-c { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; font-size: 12.5px; color: var(--f-muted); }

.fd-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; background: var(--f-bg); font-weight: 700; color: var(--f-ink2); }
.fd-pill i { width: 7px; height: 7px; border-radius: 50%; }
.fd-late { padding: 1px 8px; border-radius: 10px; background: var(--f-red-t); font-weight: 700; color: var(--f-red); }
.fd-on { font-weight: 700; color: var(--f-green); }

.fd-toast {
    position: fixed;
    z-index: 60;
    left: 50%;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 12px 12px 18px;
    border-radius: 14px;
    background: var(--f-ink);
    color: #FFFFFF;
    font-weight: 600;
    transform: translateX(-50%);
    box-shadow: 0 16px 40px rgba(30, 28, 25, .3);
}

.fd-toast button { height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: #FFFFFF; color: var(--f-ink); font-weight: 700; }

@media (max-width: 1365px) {
    .fd { grid-template-columns: minmax(0, 1fr) 360px; }
    .fd-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 1000px) {
    .fd { display: flex; flex-direction: column; height: auto; }
    .fd-content { min-height: 70vh; }
    .fd-jobs { border-left: 0; border-top: 1px solid var(--f-line); }
    .fd-list { max-height: none; }
    .fd-staff { margin-left: 0; }
    .fd-tabs { flex-wrap: wrap; padding: 10px 16px; }
    .fd-content { margin: 0 16px 16px; }
    .fd-add { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Narrower screens --------------------------------------------------------------------------- */

@media (max-width: 1600px) {
    .fh-cols { grid-template-columns: 400px minmax(0, 1fr) 360px; }
    .fh-wx { max-width: 240px; }
}

@media (max-width: 1440px) {
    .fh-cols { grid-template-columns: 360px minmax(0, 1fr) 320px; }
    .fh-tile small { white-space: normal; }
}

@media (max-width: 1365px) {
    .fh-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .fh-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .fh-col.is-mine { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .fh-hello { flex-wrap: wrap; }
    .fh-crew { margin-left: 0; }
}

@media (max-width: 900px) {
    .fh { padding: 14px 16px 24px; gap: 14px; }
    .fh-hi h1 { font-size: 26px; }
    .fh-wxs { width: 100%; overflow-x: auto; scrollbar-width: none; }
    .fh-wxs::-webkit-scrollbar { display: none; }
    .fh-wx { flex: none; }
    .fh-crew { width: 100%; justify-content: flex-start; }
    .fh-crew-t { text-align: left; }
    .fh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .fh-tile { min-height: 96px; padding: 12px 14px; }
    .fh-tile.is-main { grid-column: 1 / -1; }
    .fh-cols,
    .fh-col.is-mine { grid-template-columns: minmax(0, 1fr); }
    .fh-week-n { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fh-item { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; }
    .fh-item time { font-size: 11.5px; }
}