/* =====================================================================
   Blog Automation – dropdown menus, select fields, guided tour (loaded after layout.css)
   One look for every menu: shell menus (.dd-menu, js/menu.js) and the top navigation (.tn-menu).
   Colours only from theme.css tokens (the select chevron is an SVG, one per mode = --text-3).
   ===================================================================== */

/* ---------- menus ---------- */
.dd-menu { position: fixed; z-index: 150;   /* above dialogs (.overlay 100), below toasts (200) and the tour (300) */ display: flex; flex-direction: column; gap: 1px; padding: 6px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: dd-in .12s ease-out; transform-origin: top right; }
.dd-menu.up { transform-origin: bottom right; }
.tn-menu { border-radius: var(--radius-lg); animation: dd-in .12s ease-out; transform-origin: top left; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.dd-menu.up { animation-name: dd-in-up; } @keyframes dd-in-up { from { opacity: 0; transform: translateY(4px) scale(.98); } }

.dd-menu > a, .tn-menu a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 7px 10px; border-radius: var(--radius);
  background: none; color: var(--text-2); font: 500 var(--fs-sm)/1.35 var(--font); text-align: left; text-decoration: none; cursor: pointer; }
.dd-menu > a .ico, .tn-menu a .ico { width: 17px; height: 17px; flex: none; color: var(--text-3); }
.dd-menu > a:hover, .dd-menu > a:focus-visible, .tn-menu a:hover, .tn-menu a:focus-visible { background: var(--surface-3); color: var(--text); text-decoration: none; outline: none; }
.dd-menu > a:hover .ico, .dd-menu > a:focus-visible .ico, .tn-menu a:hover .ico, .tn-menu a:focus-visible .ico { color: var(--accent); }
[data-mode="dark"] .dd-menu > a:hover .ico, [data-mode="dark"] .dd-menu > a:focus-visible .ico { color: var(--text); }
.dd-menu > a:focus-visible, .tn-menu a:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.dd-t { flex: 1; min-width: 0; }
.dd-t small { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--text-3); }

/* current choice (language): soft accent + check */
.dd-menu > a.on { background: var(--accent-50); color: var(--accent-700); font-weight: 600; }
.dd-menu > a.on .ico { color: var(--accent); }
[data-mode="dark"] .dd-menu > a.on, [data-mode="dark"] .dd-menu > a.on .ico { color: var(--text); }
.dd-check { margin-left: auto; display: inline-flex; }

/* dangerous entry (lock, delete): red text + icon */
.dd-menu.dd-menu > a.danger, .dd-menu.dd-menu > a.danger .ico { color: var(--err); }
.dd-menu.dd-menu > a.danger:hover, .dd-menu.dd-menu > a.danger:focus-visible { background: var(--err-bg); color: var(--err); }
[data-mode="dark"] .dd-menu.dd-menu > a.danger[role]:not(.btn), [data-mode="dark"] .dd-menu.dd-menu > a.danger .ico { color: var(--err); }   /* beats the neutral dark-mode menu colour */

.dd-head { padding: 8px 10px 10px; font-size: var(--fs-sm); color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }
.dd-head b { font-size: var(--fs); }
.dd-label { font-size: var(--fs-xs); color: var(--text-3); }
.dd-empty { padding: 18px 10px; text-align: center; font-size: var(--fs-sm); color: var(--text-3); }
.dd-menu .sep { height: 1px; flex: none; background: var(--border); margin: 5px 4px; }
.dd-menu .dd-mode { padding: 6px 10px 8px; }
/* light / dark / automatic: three equal tiles (icon above the word) – fits any label length, also when the browser translates the page */
.dd-menu .dd-mode .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; width: 100%; padding: 3px; }
.dd-menu .dd-mode .seg button { flex-direction: column; justify-content: center; gap: 3px; min-width: 0; padding: 7px 4px 6px; font-size: var(--fs-xs); line-height: 1.2; }
.dd-menu .dd-mode .seg button > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-menu .dd-mode .seg .ico { width: 16px; height: 16px; }
.dd-menu .dd-mode .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* notifications: two-line entries, unread = bold + coral dot */
.dd-notes > a { align-items: flex-start; padding-top: 9px; padding-bottom: 9px; }
.dd-notes > a .ico { margin-top: 1px; }
.dd-notes > a.unread { color: var(--text); font-weight: 600; }
.dd-notes > a.unread .ico { color: var(--coral); }
.dd-notes > a:not(.unread) { font-weight: 400; }

@media (prefers-reduced-motion: reduce) { .dd-menu, .tn-menu { animation: none; } }

/* "Neu" on a phone: a round + button instead of an empty pill (app.css hides the label) */
@media (max-width: 700px) { .topbar [data-new] { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; } .topbar [data-new] span { display: none; } }

/* ---------- select fields: own chevron instead of the browser arrow (same in every browser and in dark mode) ---------- */
select:not([multiple]):not([size]) { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586479' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 16px 16px; }
[data-mode="dark"] select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
select:hover:not(:disabled):not(:focus) { border-color: var(--text-3); }
select:disabled { opacity: .6; cursor: not-allowed; }
select option { background: var(--surface); color: var(--text); }

/* the open list: browsers with customizable selects (Chrome / Edge 135+) get the menu look; others keep the system list */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]), select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  select:not([multiple]):not([size]) { display: flex; align-items: center; gap: 8px; padding-right: 12px; background-image: none; }
  [data-mode="dark"] select:not([multiple]):not([size]) { background-image: none; }
  select:not([multiple]):not([size])::picker-icon { content: ""; width: 16px; height: 16px; margin-left: auto; flex: none; background: var(--text-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
    transition: rotate .15s; }
  select:not([multiple]):not([size]):open::picker-icon { rotate: 180deg; }
  select:not([multiple]):not([size]):open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-100); }
  ::picker(select) { margin-block: 6px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text);
    box-shadow: var(--shadow-lg); max-height: min(360px, 60vh); min-width: anchor-size(width); }
  select option { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 7px 10px; border-radius: var(--radius);
    background: none; color: var(--text-2); font: 500 var(--fs-sm)/1.3 var(--font); cursor: pointer; }
  select option:hover, select option:focus-visible { background: var(--surface-3); color: var(--text); outline: none; }
  select option:checked { background: var(--accent-50); color: var(--accent-700); font-weight: 600; }
  [data-mode="dark"] select option:checked { background: color-mix(in srgb, var(--accent) 25%, var(--surface)); color: var(--text); }
  select option::checkmark { order: 1; margin-left: auto; content: "✓"; font-weight: 700; color: var(--accent); }
  [data-mode="dark"] select option::checkmark { color: var(--text); }
  select option:disabled { opacity: .5; cursor: not-allowed; }
}

/* ---------- guided tour (js/tour.js) ---------- */
.tour-block { position: fixed; inset: 0; z-index: 300; }
.tour-spot { position: fixed; z-index: 301; pointer-events: none; border-radius: var(--radius-lg);
  box-shadow: 0 0 0 3px var(--coral), 0 0 0 9999px var(--overlay); transition: top .25s, left .25s, width .25s, height .25s; }
.tour-spot.none { box-shadow: 0 0 0 9999px var(--overlay); }
.tour-card { position: fixed; z-index: 302; width: min(360px, calc(100vw - 32px)); padding: 18px 18px 14px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: pop .15s; }
.tour-card:focus { outline: none; }
.tour-step { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }
.tour-card h3 { margin: 4px 0 6px; font-size: 17px; line-height: 1.3; }
.tour-card p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; }
.tour-dots { display: flex; gap: 5px; margin: 14px 0 12px; }
.tour-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); transition: width .2s, background .2s; }
.tour-dots span.on { width: 18px; border-radius: 99px; background: var(--coral); }
.tour-foot { display: flex; align-items: center; gap: 8px; }
.tour-foot .sp { flex: 1; }
.tour-foot [data-t="prev"] .ico { transform: rotate(90deg); }
.tour-foot .tour-skip { margin-right: auto; padding-left: 0; color: var(--text-3); }
.tour-foot .tour-skip:hover { color: var(--text); background: none; }
body.bp-touring.nav-open::after { background: transparent; }   /* the tour dims the page itself */
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } .tour-card { animation: none; } }

/* dark mode: app.css colours every link in a light accent ([data-mode="dark"] a:not(…), 0-4-2) – menu entries stay neutral */
[data-mode="dark"] :is(.dd-menu.dd-menu > a[role], .tn-menu.tn-menu a[role]):not(.btn) { color: var(--text-2); }
[data-mode="dark"] :is(.dd-menu.dd-menu > a[role], .tn-menu.tn-menu a[role]):not(.btn):is(:hover, :focus-visible, .on, .active, .unread) { color: var(--text); }

/* show-password button: pressed (password visible) = accent tint + crossed-out eye (ui.js togglePw) */
.btn-icon[aria-pressed="true"] { background: var(--accent-50); border-color: var(--accent-100); color: var(--accent-700); }
[data-mode="dark"] .btn-icon[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 25%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, var(--surface)); color: var(--text); }

/* interface language switch with flags (top bar, admin top bar, sign-in page) */
.c-uilang { gap: 7px; }
.au-langbtn { display: inline-flex; align-items: center; gap: 6px; }
.bp-ilang { gap: 5px; } .bp-ilang .flag { width: 16px; height: 11px; }