/* Copyright © 2026 Baka Attila Tamás. Minden jog fenntartva / All rights reserved. Lásd / see: LICENSE */
/* ============================================================
   The Miami Sunset look (v168; themes.php): pink and turquoise neon. By
   night a deep violet board with glowing titles and pink-edged cards, by
   day lavender into peach with white cards. Yellowtail for the name,
   Michroma for names of things, Space Mono for data, Sora for the rest.
   Rounded corners; a four-colour stripe under the header.

   Everything here is under html[data-skin="miami"], so it does nothing in
   any other look. The tokens of style.css are all set again (light, then
   dark), then the shapes that differ.
   ============================================================ */

/* The faces, self-hosted: Yellowtail (Apache 2.0), Michroma, Sora and Space
   Mono (SIL OFL 1.1) — see THIRD-PARTY-NOTICES.md. Cut down to Latin and
   Latin Extended-A (ő, ű) with their punctuation; none of the four has a
   reserved name, so the cut keeps it. Fetched only while this look is on. */
@font-face { font-family: 'Yellowtail'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Yellowtail-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Michroma'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Michroma-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('fonts/Sora-Variable.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/SpaceMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/SpaceMono-Bold.woff2') format('woff2'); }

/* ---------- tokens: lavender into peach (light) ----------
   Text contrasts, all at least 4.5:1: ink 16.7 (13.6 on the peach), muted
   6.1 (4.9 on the board), the magenta links 5.7, the titles' purple 6.0,
   red text 5.9, the pink buttons' ink 5.7, the bell's count 4.9. */
html[data-skin="miami"] {
  --search-lift: 0px;   /* the header's search box (v196): this face's lower case already sits in the middle */
  --bg:        #f0e4fc;   /* the gradient's top (body below): the sticky column heads' fill */
  --surface:   #ffffff;
  --ink:       #2a1240;
  --ink-2:     #43285c;
  --muted:     #6e5a86;
  --line:      #f0d6ea;
  --line-strong: #d9a8cf;
  --accent:    #ff3da5;   /* hot pink: the buttons and what is selected */
  --accent-hi: #ff5cb4;
  --accent-text: #c2187a; /* links, project names: magenta */
  --accent-soft: #ffe0f0;
  --danger:    #c21858;
  --danger-solid: #d6177a;
  --stripe-none: transparent;   /* no deadline coming up: no stripe at all */
  --ok:        #1f7a5a;
  --dl-late:   #ff3da5;
  --dl-soon:   #ffc929;
  --dl-done:   #a97bff;
  --urgent-bg: #ff3da5;
  --urgent-ink: #1a0a2e;
  --high:      #1a0a2e;
  --prio3-bg:  #ffd23f;
  --low:       #43285c;
  --hover:     #fdf0f8;
  --soft:      #fde3f1;
  --count-bg:  #2a1240;
  --count-ink: #ffffff;
  --hl-bg:     #ffd23f;
  --hl-ink:    #2a1240;
  --soft2:     #fdf0f8;
  --panel:     #fdf4fa;
  --filter-bar: #f6e9fb;
  --desc-bg:   #fdeef6;
  --input-bg:  #fff8fc;
  --on-accent: #1a0a2e;
  --warn-bg:   #fff3d6;
  --warn-line: #f0d79a;
  --danger-soft: #ffe3ee;
  --danger-chip: #b0154f;
  --scroll:    #e6c3dc;
  --scroll-hi: #d4a2c6;
  --scroll-board: #dcb3d1;
  --ghost-hover: rgba(42, 18, 64, .06);
  --overlay:   rgba(42, 18, 64, .4);
  --radius:    10px;
  --shadow:    0 2px 10px rgba(255, 61, 165, .12);
  --shadow-up: 0 8px 24px rgba(255, 61, 165, .28);
  --shadow-modal: 0 16px 50px rgba(255, 61, 165, .3);
  --font:         'Sora', 'Geist', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Michroma', 'Sora', 'Geist', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* This look's own */
  --page:      linear-gradient(180deg, #f0e4fc 0%, #fbe3f2 55%, #fee3d0 100%);
  --header-bg: #ffffff;
  --title-ink: #6c4490;   /* column, lane and calendar titles */
  --logo-ink:  #e8168b;   /* 4.3:1 — the name is large text (3:1 is the bar) */
  --glow:      none;      /* the titles' neon: by night only */
  --logo-glow: 0 0 10px rgba(255, 61, 165, .35);
  --card-line: #f6dcee;
  --neon-1: #ffd23f; --neon-2: #ff8c3a; --neon-3: #ff3da5; --neon-4: #a97bff;
  --focus:     #c2187a;
  --check:     #ff3da5;
  /* The swatches (v167; themes.php): soft chips, deep text (6.3:1 or more). */
  --sw1-bg: #feddda; --sw1-fg: #94151d;  --sw2-bg: #fedfcc; --sw2-fg: #7b3d01;  --sw3-bg: #fde3ad; --sw3-fg: #664b00;
  --sw4-bg: #dfeeb6; --sw4-fg: #495700;  --sw5-bg: #c3f5cc; --sw5-fg: #016129;  --sw6-bg: #aff7e8; --sw6-fg: #005d51;
  --sw7-bg: #bcf1fe; --sw7-fg: #005a6a;  --sw8-bg: #d7e8fe; --sw8-fg: #024e9a;  --sw9-bg: #e3e3ff; --sw9-fg: #4b3aa2;
  --sw10-bg: #f8dbfe; --sw10-fg: #742785;  --sw11-bg: #ffdbea; --sw11-fg: #8a185c;  --sw12-bg: #e8e3f5; --sw12-fg: #544a67;
}

/* ---------- tokens: the neon night (dark) ----------
   Ink 15.5, muted 7.8 (6.5 at the board's foot), the turquoise links 11.1,
   red text 7.1, the pink chips' ink 5.7, the bell's count 4.9. */
html[data-skin="miami"][data-theme="dark"] {
  --bg:        #1b0b30;
  --surface:   #240f3a;
  --ink:       #f7eefe;
  --ink-2:     #e2d3f0;
  --muted:     #b9a5cf;
  --line:      #3d2358;
  --line-strong: #6b4a8c;
  --accent:    #ff3da5;
  --accent-hi: #ff5cb4;
  --accent-text: #2ee6d6; /* links, project names: turquoise */
  --accent-soft: rgba(255, 61, 165, .18);
  --danger:    #ff7aa8;
  --danger-solid: #d6177a;
  --stripe-none: transparent;
  --ok:        #5ce6a0;
  --dl-late:   #ff3da5;
  --dl-soon:   #ffd23f;
  --dl-done:   #a97bff;
  --urgent-bg: #ff3da5;
  --urgent-ink: #1a0a2e;
  --high:      #1a0a2e;
  --prio3-bg:  #ffd23f;
  --low:       #e2d3f0;
  --hover:     #2e1747;
  --soft:      #3a1d57;
  --count-bg:  #ff3da5;
  --count-ink: #1a0a2e;
  --hl-bg:     #ffd23f;
  --hl-ink:    #1a0a2e;
  --soft2:     #2e1747;
  --panel:     #1f0d33;
  --filter-bar: #1a0a2c;
  --desc-bg:   #1b0b30;
  --input-bg:  #1b0b30;
  --on-accent: #1a0a2e;
  --warn-bg:   #3d2a12;
  --warn-line: #6b4a1e;
  --danger-soft: #4a1630;
  --danger-chip: #ff8ab3;
  --scroll:    #4a2a66;
  --scroll-hi: #5e3a80;
  --scroll-board: #55307a;
  --ghost-hover: rgba(255, 235, 255, .07);
  --overlay:   rgba(10, 3, 18, .72);
  --shadow:    none;
  --shadow-up: 0 6px 22px rgba(255, 61, 165, .25);
  --shadow-modal: 0 0 40px rgba(255, 61, 165, .3), 0 18px 50px rgba(0, 0, 0, .6);

  --page:      linear-gradient(180deg, #1b0b30 0%, #2a0f3f 55%, #40154d 100%);
  --header-bg: #12061e;
  --title-ink: #2ee6d6;
  --logo-ink:  #ff5cb4;
  --glow:      0 0 8px rgba(46, 230, 214, .55);
  --logo-glow: 0 0 6px rgba(255, 61, 165, .8), 0 0 18px rgba(255, 61, 165, .55);
  --card-line: rgba(255, 61, 165, .38);
  --focus:     #2ee6d6;
  --sw1-bg: #59201e; --sw1-fg: #fec8c3;  --sw2-bg: #542801; --sw2-fg: #ffcba9;  --sw3-bg: #453201; --sw3-fg: #f9d280;
  --sw4-bg: #313b01; --sw4-fg: #cee38f;  --sw5-bg: #07411c; --sw5-fg: #a2ecb1;  --sw6-bg: #023f36; --sw6-fg: #7defda;
  --sw7-bg: #023c48; --sw7-fg: #8ae8fe;  --sw8-bg: #123560; --sw8-fg: #bedafe;  --sw9-bg: #322d5f; --sw9-fg: #d3d3fe;
  --sw10-bg: #482550; --sw10-fg: #f4c4fe;  --sw11-bg: #54203b; --sw11-fg: #fec4de;  --sw12-bg: #383243; --sw12-fg: #ddcffa;
}

/* ---------- the page: a sunset sky, top to bottom ---------- */
html[data-skin="miami"] body { background: var(--page); }

/* ---------- the header: the four-colour stripe under it ---------- */
html[data-skin="miami"] .toolbar {
  background: linear-gradient(to bottom, var(--neon-1) 0 3px, var(--neon-2) 3px 6px, var(--neon-3) 6px 9px, var(--neon-4) 9px 12px)
              bottom / 100% 12px no-repeat, var(--header-bg);
  border-bottom: 0;
  padding-bottom: calc(11px + 12px);
}
html[data-skin="miami"] .toolbar .filter-bar { background: var(--filter-bar); border-top-color: var(--line); }
/* The name in neon script; the board's own name too. */
html[data-skin="miami"] .toolbar .brand, html[data-skin="miami"] .login h1 {
  font-family: 'Yellowtail', var(--font-display); font-weight: 400; letter-spacing: 0;
  color: var(--logo-ink); text-shadow: var(--logo-glow);
}
html[data-skin="miami"] .toolbar .brand { font-size: 33px; line-height: 1; }
html[data-skin="miami"] .login h1 { font-size: 30px; line-height: 1.1; }   /* a script reads small at the sign-in's 20px */
html[data-skin="miami"] .toolbar .brand-name, html[data-skin="miami"] .login h1 .brand-name { color: inherit; }
html[data-skin="miami"] .toolbar .brand::before,
html[data-skin="miami"] .login h1::before { background: url("miami-sun.svg") center / 28px 28px no-repeat; }
html[data-skin="miami"] .toolbar .brand::before { margin-top: -6px; }
html[data-skin="miami"] .toolbar .icon-btn { color: var(--ink); }
html[data-skin="miami"] .toolbar .icon-btn.dim { color: var(--muted); }
html[data-skin="miami"] .user-btn { border: 1px solid var(--line-strong); background: transparent; }
html[data-skin="miami"][data-theme="dark"] .user-btn { border-color: var(--line); }
html[data-skin="miami"] .presence.crowd .pav { box-shadow: 0 0 0 2px var(--header-bg); }
@media (max-width: 640px) {
  html[data-skin="miami"] .toolbar { padding-bottom: calc(8px + 12px); }
  /* The name is clipped on a phone (style.css, for the …): room for the
     script's swashes and its glow, and a size that leaves the buttons room. */
  html[data-skin="miami"] .toolbar .brand { font-size: 24px; line-height: 1.35; padding: 0 6px 0 2px; }
  /* Michroma runs wide: a card's title a step smaller. */
  html[data-skin="miami"] .card-view .detail-head h3, html[data-skin="miami"] .card-edit .detail-head h3 { font-size: 18px; }
}

/* ---------- type ----------
   Michroma has one weight: anything bolder would be the browser's smear. */
html[data-skin="miami"] .col-head h2, html[data-skin="miami"] .agenda-group h2, html[data-skin="miami"] .lane-label,
html[data-skin="miami"] .settings-h {
  font-weight: 400; text-transform: uppercase; letter-spacing: .08em;
}
html[data-skin="miami"] .col-head h2, html[data-skin="miami"] .agenda-group h2 { color: var(--title-ink); text-shadow: var(--glow); }
html[data-skin="miami"] .col-head h2 { font-size: 13.5px; }
html[data-skin="miami"] .agenda-group h2 { font-size: 15px; }
html[data-skin="miami"] .settings-h { font-size: 12.5px; margin-top: 22px; }
html[data-skin="miami"] .detail-head + .settings-h, html[data-skin="miami"] .push-box .settings-h { margin-top: 0; }
html[data-skin="miami"] .modal h3, html[data-skin="miami"] .chk-head strong, html[data-skin="miami"] .att-head strong,
html[data-skin="miami"] .bell-head strong, html[data-skin="miami"] .rich .md-h, html[data-skin="miami"] .detail-tab { font-weight: 400; }
html[data-skin="miami"] .modal h3 { color: var(--title-ink); }
html[data-skin="miami"] .card-view .detail-head h3, html[data-skin="miami"] .card-edit .detail-head h3 { color: var(--ink); font-size: 22px; letter-spacing: -.01em; }
html[data-skin="miami"] .chk-head strong, html[data-skin="miami"] .att-head strong { font-size: 14px; }
html[data-skin="miami"] .card .title, html[data-skin="miami"] .agenda-title { font-weight: 600; }
html[data-skin="miami"] .rich code { font-family: var(--font-mono); }
/* The data in mono runs wider: a step smaller. */
html[data-skin="miami"] .card .meta, html[data-skin="miami"] .agenda-date { font-size: 11.5px; }
html[data-skin="miami"] .tag { font-size: 11px; }

/* ---------- buttons and fields: rounded, the main ones pink ---------- */
html[data-skin="miami"] .btn.primary {
  font-weight: 400; text-transform: uppercase; letter-spacing: .1em; font-size: 12px;
  border: 0; box-shadow: 0 0 14px rgba(255, 61, 165, .45);
}
html[data-skin="miami"] .btn.primary:hover:not(:disabled) { box-shadow: 0 0 20px rgba(255, 61, 165, .65); }
html[data-skin="miami"] .btn.tiny.primary { letter-spacing: .06em; }
html[data-skin="miami"] .att-add { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; box-shadow: 0 0 12px rgba(255, 61, 165, .4); }
html[data-skin="miami"] .att-add:hover { background: var(--accent-hi); }
html[data-skin="miami"] .fab { box-shadow: 0 0 22px rgba(255, 61, 165, .6), 0 6px 16px rgba(0, 0, 0, .25); }
html[data-skin="miami"] input:focus, html[data-skin="miami"] select:focus, html[data-skin="miami"] textarea:focus,
html[data-skin="miami"] .btn:focus-visible { outline-color: var(--focus); border-color: var(--focus); }
html[data-skin="miami"] input[type=checkbox], html[data-skin="miami"] input[type=radio] { accent-color: var(--check); }
html[data-skin="miami"] .chk-item .item-check { accent-color: var(--check); }

/* ---------- the board ---------- */
html[data-skin="miami"] .col-head .count, html[data-skin="miami"] .agenda-group h2 .count,
html[data-skin="miami"] .lane-label .lane-count, html[data-skin="miami"] .detail-tab .tab-count {
  font-weight: 700; background: var(--count-bg); color: var(--count-ink); text-shadow: none;
}
html[data-skin="miami"] .col-head .add { color: var(--ink); }
/* A lane's label in each column: smaller than the column's title (Michroma
   runs wide), no glow, a long name cut short (style.css). */
html[data-skin="miami"] .lane-label { font-size: 11px; letter-spacing: .05em; color: var(--ink); padding-bottom: 5px; border-bottom: 1px solid var(--line-strong); }
html[data-skin="miami"] .lane-label .tag { text-transform: none; letter-spacing: 0; }
html[data-skin="miami"] .cards.lane:empty { border-color: var(--line-strong); }

/* A card: white with a pink haze by day, by night violet with a pink edge;
   the deadline's colour is a band along the top (none when nothing is due). */
html[data-skin="miami"] .card {
  border: 1px solid var(--card-line);
  box-shadow: inset 0 4px 0 var(--card-color, transparent), var(--shadow);
  padding: 13px 12px 11px 12px;
}
html[data-skin="miami"] .card:hover { box-shadow: inset 0 4px 0 var(--card-color, transparent), var(--shadow-up); }
html[data-skin="miami"][data-theme="dark"] .card { box-shadow: inset 0 4px 0 var(--card-color, transparent), 0 0 12px rgba(255, 61, 165, .12); }
html[data-skin="miami"][data-theme="dark"] .card:hover { border-color: rgba(255, 61, 165, .6); box-shadow: inset 0 4px 0 var(--card-color, transparent), var(--shadow-up); }
html[data-skin="miami"] .card .ticket-link { top: 16px; }
html[data-skin="miami"] .card .project-link { font-size: 12.5px; }
html[data-skin="miami"] .card.sortable-drag { box-shadow: inset 0 4px 0 var(--card-color, transparent), 0 12px 30px rgba(255, 61, 165, .4); }

/* The calendar (v171): each group's panel is the card, its rows lines in it
   with the colour down the left side (none when nothing is due). */
html[data-skin="miami"] .agenda-panel { border: 1px solid var(--card-line); }
html[data-skin="miami"][data-theme="dark"] .agenda-panel { box-shadow: 0 0 12px rgba(255, 61, 165, .12); }
/* The header row gets the same border, unseen, so its columns stay over the rows'. */
html[data-skin="miami"] .agenda-head { border-left: 1px solid transparent; border-right: 1px solid transparent; }

/* Chips: Sürgős solid pink, Magas solid yellow, Alacsony an outline. */
html[data-skin="miami"] .prio { font-weight: 600; }
html[data-skin="miami"] .prio.p1 { background: transparent; color: var(--low); box-shadow: inset 0 0 0 1.5px var(--low); }
html[data-skin="miami"] .tag { color: var(--ink-2); }
html[data-skin="miami"] .detail-info .pick-trigger.pp4, html[data-skin="miami"] .detail-info .pick-trigger.pp3 { font-weight: 600; border-color: transparent; }
html[data-skin="miami"] .detail-info .pick-trigger.pp1 { background: transparent; color: var(--low); border-color: var(--low); }
html[data-skin="miami"] .bell-badge { border-radius: 3px; }

/* People: by day a thin edge, so yellow and lime show on white. */
html[data-skin="miami"] .uav, html[data-skin="miami"] .pav { font-weight: 700; letter-spacing: 0; }
html[data-skin="miami"]:not([data-theme="dark"]) .uav:not(.none):not(.uav-img),
html[data-skin="miami"]:not([data-theme="dark"]) .pav:not(.pav-img) { box-shadow: inset 0 0 0 1px rgba(42, 18, 64, .22); }

/* ---------- pop-ups and dialogs ---------- */
html[data-skin="miami"] .menu, html[data-skin="miami"] .bell-panel, html[data-skin="miami"] .filters.open,
html[data-skin="miami"] .detail-pick, html[data-skin="miami"] .assign-pop, html[data-skin="miami"] .mention-pop,
html[data-skin="miami"] .link-pick {
  border: 1px solid var(--card-line); box-shadow: var(--shadow-up);
}

/* A dialog: a pink edge and haze, the four colours across its top (a card's
   view and editor: the card's own band instead). */
html[data-skin="miami"] .modal, html[data-skin="miami"] .login {
  border: 1px solid var(--card-line);
  box-shadow: inset 0 2px 0 var(--neon-1), inset 0 4px 0 var(--neon-2), inset 0 6px 0 var(--neon-3), var(--shadow-modal);
}
html[data-skin="miami"][data-theme="dark"] .modal, html[data-skin="miami"][data-theme="dark"] .login { border-color: rgba(255, 61, 165, .6); }
html[data-skin="miami"] .modal > .detail-head { margin-top: -14px; padding-top: 14px; }
html[data-skin="miami"] .modal.card-view, html[data-skin="miami"] .modal.card-edit {
  box-shadow: inset 0 5px 0 var(--card-color, transparent), var(--shadow-modal);
}
html[data-skin="miami"] .modal.card-view > .detail-head, html[data-skin="miami"] .modal.card-edit > .detail-head { margin-top: -15px; padding-top: 15px; }
html[data-skin="miami"] .rich blockquote { border-left-color: var(--neon-2); }

/* The checklist's bar: a block per item, the done ones yellow and orange in
   turn (one plain bar past 20 items, when the blocks would be slivers). */
html[data-skin="miami"] .chk-bar { height: 8px; border-radius: 0; background: none; gap: 3px; }
html[data-skin="miami"] .chk-bar i { background: var(--soft); border-radius: 1px; }
html[data-skin="miami"] .chk-bar i.on { background: var(--neon-1); }
html[data-skin="miami"] .chk-bar i.on:nth-child(even) { background: var(--neon-2); }
html[data-skin="miami"] .chk-bar.many { gap: 0; }
html[data-skin="miami"] .chk-bar.many i.on { background: var(--neon-3); }

/* Beállítások: the looks' cards */
html[data-skin="miami"] .theme-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(255, 61, 165, .35); }
html[data-skin="miami"] .theme-card:focus-within { outline-color: var(--focus); }

/* Text and icons that style.css paints in the accent (v168): this look's
   accent is a fill, too light to read as text by day (its pink on white is 3.3:1), so they
   take the link colour, 4.7:1 or better in both variants. */
html[data-skin="miami"] .about a,
html[data-skin="miami"] .edit-pick .pick-add,
html[data-skin="miami"] .card-tag-pick .tag-new,
html[data-skin="miami"] .detail-pick .pick-check,
html[data-skin="miami"] .toolbar .view-btn.on,
html[data-skin="miami"] .toolbar .view-btn.on:hover,
html[data-skin="miami"] .card .ticket-link:hover,
html[data-skin="miami"] .btn.icon-link.copied,
html[data-skin="miami"] .btn.icon-link.copied:hover,
html[data-skin="miami"] .view-row .view-star.on,
html[data-skin="miami"] .project-link-copy:hover,
html[data-skin="miami"] .project-link-copy:focus-visible,
html[data-skin="miami"] .btn.project-link-copy.copied,
html[data-skin="miami"] .btn.project-link-copy.copied:hover,
html[data-skin="miami"] .detail-url a:hover { color: var(--accent-text); }