/* papaya application shell and components. Tokens live in brand.css. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--ui);
    font-size: 13.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* The hidden attribute comes from the browser's own stylesheet, which any author
   rule outranks. Without this, a class that sets display makes hidden do nothing:
   it left the empty media window covering the whole composer. */
[hidden] { display: none !important; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
:focus-visible { outline: 2px solid var(--papaya-deep); outline-offset: 2px; border-radius: 2px; }
svg { display: block; }
a { color: var(--green); }

/* ------------------------------------------------------------------ shell */
.app { display: grid; grid-template-columns: 196px 1fr; height: 100vh; overflow: hidden; }

.nav { background: var(--green); color: #dfe8e5; display: flex; flex-direction: column; min-height: 0; }
.nav .brand { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 3px; }
.nav .mark {
    font-family: var(--display); font-weight: 700; font-size: 14px;
    letter-spacing: 0.02em; color: var(--paper);
}
.nav .mark i { color: var(--papaya); font-style: normal; }
.nav .mark.short { display: none; font-size: 17px; letter-spacing: 0.03em; }
.nav .sub {
    font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: #8fada8; font-weight: 500;
}
.nav ul { list-style: none; display: flex; flex-direction: column; gap: 1px; padding: 0 8px; }
.nav a {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    border-radius: var(--r); color: #b9cfcb; text-decoration: none;
    font-size: 12.5px; font-weight: 500; transition: background 0.14s, color 0.14s;
}
.nav a:hover, .nav a.on { background: var(--green-lift); color: var(--paper); }
.nav a.on svg { color: var(--papaya); }
.nav a svg { width: 15px; height: 15px; flex-shrink: 0; color: #7d9b96; }
.nav a .soon {
    margin-left: auto; font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: #7d9b96; border: 1px solid #2a5551; padding: 1px 4px; border-radius: 2px;
    font-style: normal;
}
.nav-foot { margin-top: auto; padding: 12px 8px 14px; border-top: 1px solid #1c4844; }
.nav-foot form { margin: 0; }
.who { display: flex; align-items: center; gap: 9px; padding: 8px 10px; font-size: 11.5px; }
.who .av {
    width: 24px; height: 24px; border-radius: 50%; background: var(--papaya);
    color: var(--green); display: grid; place-items: center; flex-shrink: 0;
    font-family: var(--display); font-weight: 700; font-size: 10.5px;
}
.who b { color: var(--paper); font-weight: 500; display: block; }
.who span { color: #7d9b96; font-size: 10px; }
.signout {
    display: block; width: 100%; text-align: left; padding: 6px 10px;
    color: #7d9b96; font-size: 11px; border-radius: var(--r);
}
.signout:hover { color: var(--paper); background: var(--green-lift); }

/* ------------------------------------------------------------------- main */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.topbar {
    display: flex; align-items: center; gap: 16px; flex-shrink: 0;
    padding: 11px 18px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.bar-space { flex: 1; }

.picker { position: relative; }
.picker select {
    appearance: none; background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r); padding: 7px 30px 7px 11px; font-size: 12.5px;
    font-weight: 500; color: var(--green); cursor: pointer;
}
.picker select:hover { border-color: var(--line-firm); }
.picker svg {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 11px; height: 11px; color: var(--muted); pointer-events: none;
}

.health { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); }
/* Defined once, not under .health: the banner and the client cards show the
   same dot and a bare `.pip` would otherwise have no size at all. */
.pip {
    display: inline-block; width: 6px; height: 6px;
    border-radius: 50%; flex-shrink: 0; background: var(--muted);
}
.pip.ok { background: var(--green); }
.pip.warn { background: var(--papaya); }
.pip.bad { background: var(--clay); }
.health b { color: var(--green); font-weight: 500; }
.health .flag { color: var(--papaya-deep); font-weight: 500; }

.nextup {
    font-size: 11.5px; color: var(--muted); white-space: nowrap;
    border-left: 1px solid var(--line); padding-left: 16px;
}
.nextup b { color: var(--papaya-deep); font-weight: 600; }

.section-head {
    display: flex; align-items: center; gap: 14px; flex-shrink: 0;
    padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.section-title { font-family: var(--display); font-weight: 500; font-size: 14.5px; color: var(--green); }
.section-note { font-size: 11.5px; color: var(--muted); margin-top: 1px; }

.body { flex: 1; overflow-y: auto; min-height: 0; }
.body::-webkit-scrollbar, .sheet::-webkit-scrollbar { width: 9px; }
.body::-webkit-scrollbar-thumb, .sheet::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
.pad { padding: 18px; }

/* --------------------------------------------------------------- controls */
.btn {
    display: inline-block; padding: 9px 16px; border-radius: var(--r);
    font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
    text-decoration: none; transition: all 0.15s; border: 1px solid transparent;
}
.btn-primary { background: var(--papaya); color: var(--green); border-color: var(--papaya); }
.btn-primary:hover { background: var(--papaya-hover); border-color: var(--papaya-hover); }
.btn-ghost { border-color: var(--line); color: var(--green); background: var(--paper); }
.btn-ghost:hover { border-color: var(--papaya); background: var(--papaya-wash); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.chip {
    font-size: 10px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 4px 8px; border: 1px solid var(--line); border-radius: 2px;
    color: var(--muted); background: var(--paper); text-decoration: none;
    display: inline-block; transition: all 0.14s;
}
.chip:hover { color: var(--green); border-color: var(--line-firm); }
.chip.on { background: var(--green); color: var(--paper); border-color: var(--green); }
.chip b { font-weight: 600; opacity: 0.75; margin-left: 3px; }

.label {
    display: block; font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 7px; font-weight: 600;
}
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=file], textarea, select.field {
    width: 100%; background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r); padding: 9px 11px; font-size: 12.5px; transition: border-color 0.14s;
}
textarea { resize: vertical; min-height: 92px; line-height: 1.6; }
input:focus, textarea:focus, select:focus { border-color: var(--papaya-deep); outline: none; }

.notice, .error {
    padding: 9px 12px; font-size: 12px; border-radius: var(--r);
    border-left-width: 2px; border-left-style: solid; margin-bottom: 10px;
}
.notice { background: var(--papaya-wash); border-left-color: var(--papaya); color: var(--ink); }
.error { background: var(--clay-wash); border-left-color: var(--clay); color: var(--clay-ink); }

/* ------------------------------------------------------- contact sheet */
.sheet {
    display: grid; gap: 13px 11px; align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    list-style: none;
}
/* min-width: 0 is load-bearing. A grid item's automatic minimum size is its
   content, and `1fr` means `minmax(auto, 1fr)`, so one long unbreakable
   filename widens the whole column and the photographs grow with it. */
.frame { position: relative; min-width: 0; }
.frame-img {
    position: relative; aspect-ratio: 1; border-radius: 3px; overflow: hidden;
    border: 1px solid var(--line); background: var(--inset);
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.14s, transform 0.14s, box-shadow 0.14s;
}
.frame:hover .frame-img { border-color: var(--papaya); transform: translateY(-1px); box-shadow: var(--shadow); }
.frame-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame-img .none { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.frame-num {
    position: absolute; top: 5px; left: 6px; z-index: 2;
    font-family: var(--display); font-size: 9.5px; font-weight: 500;
    color: rgba(255,255,255,0.92); letter-spacing: 0.08em;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6); font-variant-numeric: tabular-nums;
}
.kindtag, .dur {
    position: absolute; bottom: 6px; z-index: 2; font-size: 8.5px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 5px; border-radius: 2px;
    background: rgba(15,48,46,0.82); color: var(--paper);
}
.kindtag { left: 6px; }
.dur { right: 6px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.frame-meta { margin-top: 6px; }
.frame-file {
    font-size: 10.5px; color: var(--green); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.frame-sub { font-size: 9.5px; color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; }

.fits { list-style: none; display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.fits li {
    font-size: 8.5px; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 2px 5px; border-radius: 2px; border: 1px solid transparent;
}
.fits .fit { background: var(--papaya-wash); color: var(--papaya-deep); border-color: #f0dfc9; }
.fits .unfit { color: #b0aaa4; border-color: var(--line); cursor: help; }

/* ------------------------------------------------------------ empty state */
.empty { text-align: center; padding: 12vh 1rem; }
.empty svg { color: var(--papaya); margin: 0 auto 1.5rem; }
.empty h2 {
    font-family: var(--display); font-weight: 500; font-size: 1.25rem;
    color: var(--green); margin-bottom: 0.5rem;
}
.empty p { color: var(--muted); max-width: 26rem; margin: 0 auto 1.5rem; }

/* ----------------------------------------------------------------- login */
.signin-page { display: grid; place-items: center; min-height: 100vh; background: var(--paper); }
.signin { width: 320px; }
.signin .mark {
    font-family: var(--display); font-weight: 700; font-size: 18px;
    color: var(--green); letter-spacing: 0.02em; display: block;
}
.signin .mark i { color: var(--papaya-deep); font-style: normal; }
.signin .sub {
    font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--muted); font-weight: 500; display: block; margin-bottom: 2rem;
}
.signin .label { margin-top: 1rem; }
.signin .btn { width: 100%; text-align: center; margin-top: 1.5rem; }
.signin .note { font-size: 11px; color: var(--muted); margin-top: 1.5rem; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1120px) {
    .app { grid-template-columns: 60px 1fr; }
    .nav .sub, .nav a span, .who b, .who span, .nav a .soon, .signout { display: none; }
    /* The full wordmark does not fit the rail, so the initials stand in. */
    .nav .mark.full { display: none; }
    .nav .mark.short { display: block; }
    .nav a { justify-content: center; padding: 11px 0; }
    .nav .brand { align-items: center; padding: 16px 0; }
    .who { justify-content: center; padding: 8px 0; }
}
@media (max-width: 680px) {
    .topbar { flex-wrap: wrap; gap: 9px 12px; }
    .nextup { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* --------------------------------------------------------------- filters */
.filters { display: flex; gap: 9px; margin-bottom: 16px; flex-wrap: wrap; }
.filters select.field { width: auto; min-width: 150px; font-size: 12px; padding: 7px 10px; }
.hint { font-size: 11.5px; color: var(--muted); margin: 12px 0 18px; max-width: 46ch; }

/* ----------------------------------------------------------------- cards */
.cards {
    list-style: none; display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.card {
    position: relative; background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r); padding: 14px 15px; box-shadow: var(--shadow);
}
.card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.card-name { font-family: var(--display); font-weight: 500; font-size: 14px; color: var(--green); }
.pill {
    margin-left: auto; font-size: 8.5px; letter-spacing: 0.09em; text-transform: uppercase;
    font-weight: 600; padding: 3px 7px; border-radius: 2px;
    background: var(--inset); color: var(--muted);
}
.pill.on { background: var(--sage-wash); color: var(--sage-deep); }
.card-facts { display: flex; flex-direction: column; gap: 6px; }
.card-facts > div { display: grid; grid-template-columns: 86px 1fr; gap: 8px; font-size: 11.5px; }
.card-facts dt { color: var(--muted); }
.card-facts dd { color: var(--ink); }
.card-edit {
    position: absolute; top: 13px; right: 15px; font-size: 11px;
    color: var(--papaya-deep); text-decoration: none; font-weight: 500;
}
.card-edit:hover { text-decoration: underline; }
.card-head .pill + .card-edit { display: none; }

/* =======================================================  publish panel  */
.work { display: flex; flex: 1; min-height: 0; }

/* ------------------------------------------------------- media column */
.repo {
    width: 336px; flex-shrink: 0; background: var(--panel);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column; min-height: 0;
}
.repo-head { padding: 14px 14px 12px; border-bottom: 1px solid var(--line); }
.repo-title {
    font-family: var(--display); font-weight: 500; font-size: 12px;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--green);
}
.repo-note { font-size: 11px; color: var(--muted); margin-top: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.repo-sheet {
    flex: 1; overflow-y: auto; padding: 13px;
    grid-template-columns: repeat(2, 1fr);
}
.sheet-empty {
    grid-column: 1/-1; padding: 36px 14px; text-align: center;
    font-size: 11.5px; color: var(--muted); line-height: 1.75;
}
.sheet-empty a { color: var(--papaya-deep); }

.frame[role="button"] { cursor: pointer; }
.frame.picked .frame-img { border-color: var(--papaya-deep); box-shadow: 0 0 0 2px var(--papaya); }

/* ---------------------------------------------------------- calendar */
.cal { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cal-head {
    display: flex; align-items: center; gap: 14px; flex-shrink: 0;
    padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.legend { display: flex; gap: 13px; font-size: 10px; color: var(--muted); margin-left: 18px; }
.legend i { display: inline-block; width: 7px; height: 7px; border-radius: 1px; margin-right: 5px; }
.zone {
    margin-left: auto; font-size: 10.5px; color: var(--muted);
    border: 1px solid var(--line); border-radius: var(--r); padding: 4px 9px; white-space: nowrap;
}
.zone b { color: var(--green); font-weight: 500; }
.wknav { display: flex; gap: 5px; align-items: center; }
.wknav a:not(.chip) {
    width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--r);
    color: var(--muted); display: grid; place-items: center;
    background: var(--paper); transition: all 0.14s;
}
.wknav a:not(.chip):hover { color: var(--green); border-color: var(--line-firm); }

.grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); overflow-y: auto; min-height: 0; }
.grid::-webkit-scrollbar { width: 9px; }
.grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }

.day {
    border-right: 1px solid var(--line); display: flex; flex-direction: column;
    min-height: 100%; transition: background 0.14s;
}
.day:last-child { border-right: none; }
.day.today { background: var(--panel); }
.day-head {
    padding: 10px 11px 8px; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 3; background: var(--paper);
}
.day.today .day-head { background: var(--panel); }
.day-name { font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.day-num {
    font-family: var(--display); font-size: 18px; font-weight: 500; line-height: 1.15;
    margin-top: 1px; color: var(--green); font-variant-numeric: tabular-nums;
}
.day.today .day-num, .day.today .day-name { color: var(--papaya-deep); }
.day.past .day-num { color: var(--muted); }
.slots { flex: 1; padding: 8px 7px; display: flex; flex-direction: column; gap: 7px; }
.day-empty { font-size: 10.5px; color: #b0aaa4; text-align: center; padding: 14px 6px; line-height: 1.6; }

/* ------------------------------------------------------------ drawer */
.scrim {
    position: fixed; inset: 0; background: rgba(15, 48, 46, 0.34);
    opacity: 0; pointer-events: none; transition: opacity 0.22s; z-index: 40;
}
.scrim.open { opacity: 1; pointer-events: auto; }
/* A centred window rather than a side panel: on a wide screen the composer
   sitting at the far right meant working across the whole desk. Resizable from
   the bottom right corner, the browser's own affordance. */
.drawer {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.98);
    /* Fixed and comfortable rather than resizable. Free resizing changed how
       the photograph sat in its frame for no gain, and a window this size fits
       a laptop and a large display alike. */
    width: min(680px, 94vw); height: min(860px, 88vh);
    overflow: hidden;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 6px; opacity: 0; pointer-events: none;
    transition: opacity 0.18s, transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50; display: flex; flex-direction: column;
    box-shadow: 0 24px 64px rgba(15, 48, 46, 0.24);
}
.drawer.open {
    opacity: 1; pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.drawer-head {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
    padding: 15px 18px; border-bottom: 1px solid var(--line);
}
.drawer-title {
    font-family: var(--display); font-size: 12px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--green);
}
.x { margin-left: auto; color: var(--muted); width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r); }
.x:hover { color: var(--green); background: var(--inset); }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px; }
.drawer-body::-webkit-scrollbar { width: 9px; }
.drawer-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }

.preview {
    position: relative; aspect-ratio: 4/5; border-radius: 3px; overflow: hidden;
    border: 1px solid var(--line); background: var(--inset); margin-bottom: 13px;
    display: flex; align-items: center; justify-content: center;
}
.preview img { width: 100%; height: 100%; object-fit: cover; }
.preview .none { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pv-file { font-size: 12.5px; color: var(--green); font-weight: 500; margin-bottom: 3px; word-break: break-all; }
.pv-sub { font-size: 11px; color: var(--muted); margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.field { margin-bottom: 17px; }

/* Suitability, stated per format with the reason where it does not apply */
.verdicts { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.verdicts li { display: flex; gap: 9px; align-items: flex-start; }
.v-mark { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.v-mark svg { width: 15px; height: 15px; }
.verdicts .ok .v-mark { color: var(--papaya-deep); }
.verdicts .no .v-mark { color: #c4bdb6; }
.v-name { font-size: 12px; font-weight: 500; color: var(--green); display: block; }
.verdicts .no .v-name { color: var(--muted); font-weight: 400; }
.v-why { font-size: 11px; color: var(--muted); line-height: 1.5; display: block; margin-top: 2px; }

.phase-note {
    border: 1px dashed var(--line-firm); border-radius: var(--r);
    padding: 13px; font-size: 11px; color: var(--muted); line-height: 1.6; margin-top: 20px;
}
.phase-note b { color: var(--green); font-weight: 600; display: block; margin-bottom: 3px; font-size: 11.5px; }

@media (max-width: 1120px) { .repo { width: 280px; } }
@media (max-width: 900px) {
    .work { flex-direction: column; overflow-y: auto; }
    .repo { width: 100%; border-right: none; border-bottom: 1px solid var(--line); max-height: 50vh; }
    .repo-sheet { grid-template-columns: repeat(3, 1fr); }
    .grid { min-height: 420px; }
    .day-head { position: static; }
    .legend { display: none; }
}
@media (max-width: 680px) {
    .grid { grid-template-columns: 1fr; min-height: 0; }
    .day { border-right: none; border-bottom: 1px solid var(--line); min-height: 0; }
    .repo-sheet { grid-template-columns: repeat(2, 1fr); }
    .zone { display: none; }
}

/* ====================================================  composer + posts  */
.chip.subtle { font-size: 9.5px; opacity: 0.85; }
.state-bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; }
.state-bar.scheduled, .state-bar.draft { background: var(--papaya); }
.state-bar.published, .state-bar.publishing { background: var(--green); }
.state-bar.failed { background: var(--clay); }
.frame.state-published .frame-img, .frame.state-publishing .frame-img { opacity: 0.55; }
.frame[draggable=true] { cursor: grab; }
.frame[draggable=true]:active { cursor: grabbing; }
.frame.dragging { opacity: 0.35; }
.day.drop { background: var(--papaya-wash); box-shadow: inset 0 0 0 1.5px var(--papaya); }

/* post cards */
.post {
    display: block; width: 100%; text-align: left; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
    transition: border-color 0.14s, transform 0.14s, box-shadow 0.14s;
}
.post:hover { border-color: var(--line-firm); transform: translateY(-1px); box-shadow: var(--shadow); }
.post-strip { display: block; height: 34px; background: var(--inset); overflow: hidden; }
.post-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-body { display: block; padding: 6px 8px 7px; }
.post-time {
    display: flex; align-items: center; gap: 5px;
    font-family: var(--display); font-size: 11.5px; font-weight: 500;
    color: var(--green); font-variant-numeric: tabular-nums;
}
.post.scheduled .post-time { color: var(--papaya-deep); }
.post.failed .post-time { color: var(--clay); }
.post-alt { display: block; font-size: 9px; color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
.post-kind { display: block; font-size: 8.5px; color: var(--muted); letter-spacing: 0.09em; text-transform: uppercase; margin-top: 3px; }
.post-cap { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.live {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--papaya); animation: pulse 1.15s ease-in-out infinite; font-style: normal;
}
@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(245, 164, 92, 0.6); }
    50% { opacity: 0.5; box-shadow: 0 0 0 5px rgba(245, 164, 92, 0); }
}

/* composer */
.seg { display: flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.seg button {
    flex: 1; padding: 8px 4px; font-size: 10.5px; font-weight: 500;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
    border-right: 1px solid var(--line); background: var(--paper); transition: all 0.14s;
}
.seg button:last-child { border-right: none; }
.seg button:hover:not(:disabled) { color: var(--green); background: var(--inset); }
.seg button.on { background: var(--green); color: var(--paper); }
.seg button:disabled { color: #bdb7b1; cursor: not-allowed; background: var(--inset); }
.why { font-size: 10.5px; color: var(--muted); margin-top: 7px; line-height: 1.55; }
.count { font-size: 10px; color: var(--muted); text-align: right; margin-top: 5px; font-variant-numeric: tabular-nums; }
.count.over { color: var(--clay); }
.when { display: grid; grid-template-columns: 1.35fr 1fr; gap: 9px; }

.clocks {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 9px;
    background: var(--line); border: 1px solid var(--line);
    border-radius: var(--r); overflow: hidden;
}
.clock { background: var(--paper); padding: 8px 10px; }
.cl-label { font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.cl-time {
    font-family: var(--display); font-size: 14px; font-weight: 500; color: var(--green);
    margin-top: 2px; font-variant-numeric: tabular-nums;
}
.clock.away .cl-time { color: var(--papaya-deep); }
.cl-city { font-size: 9.5px; color: var(--muted); margin-top: 1px; }

.actions { margin-top: 22px; }
.actions .btn, .btn.full { width: 100%; text-align: center; }
.btn.full { margin-top: 8px; }

.status {
    border: 1px solid var(--line); border-left-width: 2px; border-radius: var(--r);
    padding: 11px 13px; margin-bottom: 16px; font-size: 11.5px; line-height: 1.65; background: var(--paper);
}
.status.published, .status.publishing { border-left-color: var(--green); }
.status.scheduled, .status.draft { border-left-color: var(--papaya); }
.status.failed { border-left-color: var(--clay); background: var(--clay-wash); }
.status .st { font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; margin-bottom: 5px; display: block; }
.status.published .st, .status.publishing .st { color: var(--green); }
.status.scheduled .st, .status.draft .st { color: var(--papaya-deep); }
.status.failed .st { color: var(--clay); }
.status p { color: var(--muted); }

/* ------------------------------------------------------------ carousel */
/* superseded by .deck */
.strip { display: flex; gap: 6px; flex-wrap: wrap; }
.strip-item {
    position: relative; width: 46px; height: 46px; border-radius: 3px;
    overflow: hidden; border: 1px solid var(--line); background: var(--inset); display: block;
}
.strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.strip-item .ord {
    position: absolute; top: 2px; left: 2px;
    font-family: var(--display); font-size: 8.5px; font-weight: 700;
    background: var(--papaya); color: var(--green);
    width: 14px; height: 14px; border-radius: 2px; display: grid; place-items: center;
}
.cs-hint { font-size: 10.5px; color: var(--muted); margin-top: 9px; line-height: 1.5; }
.cs-hint.bad { color: var(--clay); }

.pick-num {
    position: absolute; top: 4px; right: 5px; z-index: 3;
    width: 17px; height: 17px; border-radius: 50%;
    background: var(--papaya); color: var(--green);
    font-family: var(--display); font-weight: 700; font-size: 9.5px;
    display: grid; place-items: center;
}
.frame.in-carousel .frame-img { border-color: var(--papaya-deep); box-shadow: 0 0 0 2px var(--papaya); }

/* ------------------------------------------------- publish preparation */
.frames { display: flex; flex-direction: column; gap: 12px; margin-bottom: 13px; }
.shot { margin: 0; }
/* The box is exactly the picture's shape. That way the whole photograph is
   always visible, resizing scales it instead of cropping it, and the overlay
   percentages stay true because the box IS the image. */
.shot-img {
    --tall: 38vh;
    position: relative; border-radius: 3px; overflow: hidden;
    border: 1px solid var(--line); background: var(--inset);
    aspect-ratio: var(--r, 1);
    width: min(100%, calc(var(--tall) * var(--r, 1)));
    margin: 0 auto;
}
.shot-img img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    -webkit-user-drag: none; user-select: none;
}
.shot-img .none { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 3rem 0; }

/* Everything outside the window is what Instagram will not receive. */
.shot.croppable .shot-img { cursor: grab; }
.shot.croppable.holding .shot-img { cursor: grabbing; }
.window {
    position: absolute; pointer-events: none;
    outline: 1px solid var(--papaya);
    box-shadow: 0 0 0 9999px rgba(15, 48, 46, 0.62);
    transition: left 0.06s linear, top 0.06s linear;
    /* Full size until the script positions it. A zero sized window would shade
       the entire photograph, which is the opposite of what it means. */
    inset: 0; width: 100%; height: 100%;
}
.shot.holding .window { transition: none; }
.grip {
    position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
    font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600;
    background: var(--papaya); color: var(--green);
    padding: 3px 8px; border-radius: 2px; pointer-events: none; z-index: 2;
}
.shot.holding .grip { opacity: 0; }

.shot figcaption {
    display: flex; align-items: baseline; gap: 7px;
    font-size: 10.5px; color: var(--muted); margin-top: 6px; line-height: 1.5;
}
.shot figcaption .ord {
    font-family: var(--display); font-size: 9px; font-weight: 700;
    background: var(--papaya); color: var(--green);
    width: 15px; height: 15px; border-radius: 2px;
    display: grid; place-items: center; flex-shrink: 0;
}
.shot.croppable figcaption .what { color: var(--papaya-deep); font-weight: 500; }

/* --------------------------------------------------------------- the deck */
.deck {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 7px; background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--r);
}
.deck-item {
    position: relative; width: 52px; height: 52px; border-radius: 3px;
    overflow: hidden; border: 1px solid var(--line); background: var(--inset);
    display: block; cursor: grab; flex-shrink: 0;
}
.deck-item:active { cursor: grabbing; }
.deck-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deck-item .ord {
    position: absolute; top: 2px; left: 2px;
    font-family: var(--display); font-size: 8.5px; font-weight: 700;
    background: var(--papaya); color: var(--green);
    width: 15px; height: 15px; border-radius: 2px; display: grid; place-items: center;
}
.deck-item.lifting { opacity: 0.35; outline: 1px dashed var(--papaya-deep); }
.cs-hint.solo { margin: 0 0 17px; }

/* A photo already in the post being composed */
.frame.in-post .frame-img { border-color: var(--papaya-deep); box-shadow: 0 0 0 2px var(--papaya); }

/* ---------------------------------------------------- choosing in the sheet */
.frame { cursor: pointer; }
.frame[draggable=true]:active { cursor: grabbing; }
.frame.chosen .frame-img { border-color: var(--papaya-deep); box-shadow: 0 0 0 2px var(--papaya); }
.frame.dragging { opacity: 0.35; }

/* One frame at a time in the drawer */
.shot { display: none; }
.shot.is-active { display: block; }

/* Miniatures */
.deck {
    display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
    padding: 7px; background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--r);
}
.deck-item {
    position: relative; width: 52px; height: 52px; border-radius: 3px; padding: 0;
    overflow: visible; border: 1px solid var(--line); background: var(--inset);
    cursor: grab; flex-shrink: 0; display: block;
}
.deck-item img { border-radius: 2px; }
.deck-item:active { cursor: grabbing; }
.deck-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deck-item .ord {
    position: absolute; top: 2px; left: 2px;
    font-family: var(--display); font-size: 8.5px; font-weight: 700;
    background: var(--papaya); color: var(--green);
    width: 15px; height: 15px; border-radius: 2px; display: grid; place-items: center;
}
.deck-item.active { border-color: var(--papaya-deep); box-shadow: 0 0 0 2px var(--papaya); }
.deck-item.lifting { opacity: 0.35; outline: 1px dashed var(--papaya-deep); }

/* Toast */
.toast {
    position: fixed; bottom: 22px; left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--green); color: var(--paper);
    border-left: 2px solid var(--papaya);
    padding: 11px 17px; border-radius: var(--r); font-size: 12px;
    opacity: 0; transition: all 0.26s; z-index: 60; pointer-events: none;
    box-shadow: 0 10px 30px rgba(15, 48, 46, 0.22);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Removing one, and adding another */
.drop-one {
    position: absolute; top: -6px; right: -6px; z-index: 3;
    width: 17px; height: 17px; padding: 0; border-radius: 50%;
    background: var(--green); color: var(--paper);
    border: 1.5px solid var(--panel);
    display: grid; place-items: center; opacity: 0; transition: opacity 0.14s;
}
.drop-one svg { width: 8px; height: 8px; }
.deck-item:hover .drop-one, .deck-item:focus-within .drop-one { opacity: 1; }
.drop-one:hover { background: var(--clay); }

.deck-add {
    width: 52px; height: 52px; flex-shrink: 0; padding: 0;
    border: 1px dashed var(--line-firm); border-radius: 3px;
    color: var(--muted); display: grid; place-items: center; background: var(--paper);
}
.deck-add svg { width: 17px; height: 17px; }
.deck-add:hover { border-color: var(--papaya); color: var(--papaya-deep); background: var(--papaya-wash); }

/* The media window, over the composer. Named library, not picker: the topbar
   client selector already owns .picker, and reusing it made that selector
   absolutely positioned over the whole page. */
.library {
    position: absolute; inset: 0; z-index: 4;
    background: var(--panel); display: flex; flex-direction: column;
}
.library-head {
    display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0;
    padding: 15px 18px; border-bottom: 1px solid var(--line);
}
.library-note { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.library-filters {
    display: flex; gap: 5px; padding: 11px 18px; flex-shrink: 0;
    border-bottom: 1px solid var(--line);
}
.library-sheet {
    flex: 1; overflow-y: auto; padding: 14px 18px;
    display: grid; gap: 13px 11px; align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.library-sheet::-webkit-scrollbar { width: 9px; }
.library-sheet::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
.library-frame { display: block; text-align: left; padding: 0; width: 100%; }
.library-frame .frame-img { display: flex; }
.library-frame .frame-meta { display: block; }

/* =====================================================  clients panel  */

/* The state pill and the edit action used to occupy the same corner: the pill
   was pushed right by margin-left auto and the action was positioned on top of
   it. Actions now sit in a foot of their own, in the flow. */
.card-head { align-items: baseline; }
a.card-name { text-decoration: none; }
a.card-name:hover { color: var(--papaya-deep); text-decoration: underline; }
.card-foot {
    display: flex; align-items: center; gap: 10px; margin-top: 12px;
    padding-top: 10px; border-top: 1px solid var(--line);
}
.card-act { margin-left: auto; font-size: 11px; color: var(--papaya-deep); font-weight: 500; }

.crumbs { font-size: 10.5px; color: var(--muted); margin-bottom: 2px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--papaya-deep); }

/* Going back is a direction, so it is an arrow beside the name rather than a
   word above it. Sized as a real target, not a glyph. */
.back {
    display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0;
    margin-left: -6px; border-radius: var(--r); color: var(--muted);
    transition: background 0.14s, color 0.14s;
}
.back svg { width: 17px; height: 17px; }
.back:hover { background: var(--inset); color: var(--green); }
.narrow { max-width: 640px; display: flex; flex-direction: column; gap: 16px; }

/* ------------------------------------------------------------- banner */
.banner {
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
    padding: 11px 14px; border-radius: var(--r); border: 1px solid var(--line);
    background: var(--panel); font-size: 12px;
}
.banner b { display: block; color: var(--green); font-weight: 600; }
.banner span { color: var(--muted); }
.banner.warn { background: var(--papaya-wash); border-color: #f0dfc9; }
.banner.bad { background: var(--clay-wash); border-color: #eed3d3; }
.banner-note { font-size: 11px; color: var(--muted); }

/* ------------------------------------------------------------ the board */
.board { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.board-main, .board-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.panel {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r); padding: 15px 16px; box-shadow: var(--shadow);
}
.panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.panel-head h2 {
    font-family: var(--display); font-weight: 500; font-size: 12px;
    letter-spacing: 0.11em; text-transform: uppercase; color: var(--green);
}
.panel-head h3, .split h3 {
    font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--muted); font-weight: 600; margin-bottom: 9px;
}
.panel-note { font-size: 11px; color: var(--muted); line-height: 1.6; }
.panel-empty { font-size: 11.5px; color: var(--muted); }
.panel-link {
    display: inline-block; margin-top: 11px; font-size: 11.5px;
    color: var(--papaya-deep); font-weight: 500;
}
.panel-link.danger { color: var(--clay); }

/* Sample data is marked wherever it appears. Nobody should be able to read a
   number off this screen and believe Instagram said it. */
.tag-sample {
    font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
    padding: 2px 6px; border-radius: 2px; background: var(--inset); color: var(--muted);
    border: 1px dashed var(--line-firm);
}
.panel-warn {
    font-size: 11px; color: var(--papaya-deep); background: var(--papaya-wash);
    border-radius: var(--r); padding: 7px 10px; margin-bottom: 13px;
}

/* --------------------------------------------------------- stat tiles */
.tiles {
    list-style: none; display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}
.tile { min-width: 0; padding: 11px 12px; border-radius: var(--r); background: var(--paper); }
.tile-label { font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }
.tile-value {
    font-family: var(--ui); font-size: 23px; font-weight: 600; color: var(--green);
    line-height: 1.25; margin-top: 2px;
}
.tile-foot { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.delta { font-size: 10.5px; font-weight: 600; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }
.tile-note { font-size: 9.5px; color: var(--muted); }

/* ------------------------------------------------------------- the plot */
.plot svg { width: 100%; height: auto; display: block; overflow: visible; }
.rule { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plot-area { fill: var(--chart-1); opacity: 0.1; stroke: none; }
.plot-line {
    fill: none; stroke: var(--chart-1); stroke-width: 2;
    stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.plot-end { fill: var(--chart-1); stroke: var(--panel); stroke-width: 2; vector-effect: non-scaling-stroke; }
.plot-hit { fill: transparent; }
.plot-hit:hover { fill: var(--chart-1); fill-opacity: 0.25; }
.plot figcaption {
    display: flex; justify-content: space-between;
    font-size: 9.5px; color: var(--muted); margin-top: 7px;
}

/* ------------------------------------------------------------- the bars */
.splits { display: grid; gap: 18px 22px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.split { min-width: 0; }
.bars { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.bars li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 34px; gap: 8px; align-items: center; }
.bar-label { font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 9px; background: var(--inset); border-radius: 2px; }
.bar-fill { display: block; height: 100%; background: var(--chart-1); border-radius: 0 4px 4px 0; }
.bar-value { font-size: 10.5px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* A 2px gap in the surface colour separates the two parts. Never a border:
   that would add ink that is not data. */
.stack { display: flex; gap: 2px; height: 13px; border-radius: 2px; overflow: hidden; }
.stack-part { display: block; height: 100%; }
.stack-part.s1, .key.s1 { background: var(--chart-1); }
.stack-part.s2, .key.s2 { background: var(--chart-2); }
.keys { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; }
.keys li { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); }
.keys b { color: var(--ink); font-weight: 600; }
.key { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }

/* --------------------------------------------------- counts and stubs */
.counts { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.counts li { display: flex; flex-direction: column; }
.counts b { font-size: 19px; font-weight: 600; color: var(--green); line-height: 1.2; }
.counts span { font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }
.stubs { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 9px; }
.stubs li { display: flex; flex-direction: column; gap: 1px; }
.stubs b { font-size: 11.5px; color: var(--green); font-weight: 600; font-variant-numeric: tabular-nums; }
.stubs span { font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.caps { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.cap {
    font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600;
    padding: 3px 7px; border-radius: 2px; border: 1px solid var(--line); color: #b0aaa4;
}
.cap.on { background: var(--papaya-wash); color: var(--papaya-deep); border-color: #f0dfc9; }

.note-block { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.note-block p { font-size: 11.5px; color: var(--ink); line-height: 1.65; }

/* ------------------------------------------------------------- the form */
.sheet-form { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.fields { display: flex; flex-direction: column; gap: 13px; }
.field-row { min-width: 0; }
.panel > .field-row + .field-row { margin-top: 15px; }
.field-row.bad input, .field-row.bad select, .field-row.bad textarea { border-color: var(--clay); }
.help { font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.field-error { font-size: 11px; color: var(--clay); margin-top: 4px; }
/* Django renders a checkbox group as nested divs, not a list. */
.ticks > div { display: flex; flex-wrap: wrap; gap: 7px 18px; }
.ticks label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.ticks input { accent-color: var(--papaya-deep); width: 14px; height: 14px; }
.form-foot { display: flex; gap: 9px; align-items: center; }
.panel > .form-foot { margin-top: 15px; }

/* The split phone field is two controls in one row, and neither inherits the
   field styling from its type alone. */
.field-row select[name$="_0"] { width: auto; max-width: 210px; }
.field-row input[name$="_1"] { width: auto; flex: 1; min-width: 0; }
.field-row select[name$="_0"], .field-row input[name$="_1"] {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r); padding: 9px 11px; font-size: 12.5px;
}
.field-row:has(select[name$="_0"]) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.field-row:has(select[name$="_0"]) > .label { flex-basis: 100%; margin-bottom: 0; }
/* White, not paper: paper on this red measures 4.36:1 and misses the threshold. */
.btn-danger { background: var(--clay); color: #fff; border-color: var(--clay); }
.btn-danger:hover { background: #a63f3f; border-color: #a63f3f; }

@media (max-width: 1120px) { .board { grid-template-columns: 1fr; } }

/* ==================================================  deleting and the bin  */

/* The cross on a thumbnail. Hidden until the frame is under the pointer, so a
   contact sheet stays a contact sheet rather than a wall of buttons. */
.frame-x {
    position: absolute; top: 5px; right: 5px; z-index: 3;
    width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center; line-height: 1;
    font-size: 13px; color: #fff; background: rgba(15,48,46,0.7);
    opacity: 0; transition: opacity 0.14s, background 0.14s;
}
.frame:hover .frame-x, .frame-x:focus-visible { opacity: 1; }
.frame-x:hover { background: var(--clay); }

/* Header actions swap for the selection bar, so the two never sit side by side
   competing for the same corner. */
.bulk { display: flex; align-items: center; gap: 8px; }
.bulk-count { font-size: 11.5px; color: var(--muted); margin-right: 2px; }
.head-acts { display: flex; align-items: center; gap: 8px; }
.head-acts b { font-weight: 600; margin-left: 4px; color: var(--papaya-deep); }

.repo-del { display: inline; }
.linkish {
    font: inherit; font-size: 11px; font-weight: 600; padding: 0;
    text-decoration: underline; background: none; border: none;
}
.linkish.danger { color: var(--clay); }

.msgbar { padding: 10px 18px 0; flex-shrink: 0; }
.msgbar p:last-child { margin-bottom: 10px; }

/* -------------------------------------------------------- client brand */
.logo-box {
    display: grid; place-items: center; padding: 14px; margin-bottom: 12px;
    background: var(--paper); border-radius: var(--r); min-height: 76px;
}
.logo-box img, .logo-now { max-width: 100%; max-height: 90px; height: auto; display: block; }
.logo-now { border-radius: var(--r); background: var(--paper); padding: 8px; }
.swatch {
    display: inline-block; width: 11px; height: 11px; border-radius: 2px;
    border: 1px solid var(--line); margin-right: 6px; vertical-align: -1px;
}
.help.stated { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.help code { font-size: 10.5px; color: var(--green); background: var(--inset); padding: 1px 4px; border-radius: 2px; }
.field-row input[type=file] { padding: 8px 10px; font-size: 11.5px; }

/* ==========================================================  the accounts  */

/* Role is a fact, not a state, so it does not take a state colour. Green ink on
   the neutral pill measures 11.80:1 and reads as emphasis rather than as a
   third status standing beside active and disabled. Papaya deep on the papaya
   wash was measured first and rejected at 4.27:1. */
.pill.role { color: var(--green); }

.you { font-size: 11px; color: var(--muted); }

/* What stands in for the password. The widget renders this line and nothing
   else: never the algorithm, the iteration count, the salt or the hash. */
.password-set {
    font-size: 12px; color: var(--ink); background: var(--inset);
    border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px;
}

/* =====================================================  instagram picker  */

/* One row per Facebook page. A page with no Instagram account attached is
   listed and dimmed rather than hidden, because hiding it leaves somebody
   hunting for an account that is sitting right there unlinked. */
.picklist { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pick {
    display: flex; align-items: center; gap: 12px; padding: 11px 13px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
}
.pick-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pick-main b { font-size: 13px; color: var(--green); font-weight: 600; }
.pick-main span { font-size: 11px; color: var(--muted); }
.pick.off { opacity: 0.62; }