/* Dosa Tycoon — drawer.css (5.0 NOTIF50): the notifications drawer (js/drawer.js), drawn into the HUD's news popover.
 * Desktop: a panel down the right side. Phone upright: a tall bottom sheet. Phone on its side: a panel down the right.
 * Tabs Needs you | Good news | News, items with "Take me there", a foot with the outlet filter and Clear, and the
 * settings pane (Pop-ups: Calm | Everything, the quiet switches). Text never under 12 px (--fl lifts it on a small stage). */

/* ---- the panel */
.hud-news.dr { top: 76px; bottom: 86px; width: 420px;      /* (above the toolbar, which reaches x 1322 of the 1600 stage) */
   max-height: none; animation-name: dr-slide; }
@keyframes dr-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.hud-news.dr .hud-news__head { gap: 8px; }
.dr-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-gear { display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin-left: auto; padding: 0; border: 2.5px solid var(--c-ink); border-radius: 10px; background: var(--hud-face); box-shadow: 0 3px 0 var(--c-ink); color: var(--c-ink); -webkit-text-stroke: 0; cursor: pointer; }
.dr-gear svg { width: 19px; height: 19px; }
.dr-gear.is-on { background: var(--hud-gold); box-shadow: inset 0 3px 0 rgba(120, 70, 0, .35); }
.dr-gear:active { transform: translateY(2px); }

/* ---- the tabs */
.dr-tabs { display: flex; flex: none; gap: 5px; padding: 8px 9px 0; border-bottom: 2.5px solid var(--c-ink); background: rgba(255, 255, 255, .35); }
.dr-tab { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; flex: 1 1 0; min-width: 0; min-height: 36px; padding: 3px 6px 5px; margin-bottom: -2.5px;
  border: 2.5px solid var(--c-ink); border-bottom: 0; border-radius: 11px 11px 0 0; background: #F1E3C4; color: #5A3A22;
  font-family: var(--font-ui); font-size: max(14px, var(--fl, 0px)); font-weight: 800; line-height: 1.05; cursor: pointer; }
.dr-tab__l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-tab.is-on { background: var(--hud-paper); color: var(--c-ink); box-shadow: inset 0 3px 0 var(--c-turmeric); }
.dr-tab:not(.is-on):hover { background: #FFF3D6; }
.dr-tab:focus-visible, .dr-gear:focus-visible, .dr-clear:focus-visible, .dr-sw:focus-visible, .dr-item.is-link:focus-visible { outline: 3px solid var(--c-teal); outline-offset: -3px; }
.dr-tab__n { flex: none; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid var(--c-ink); border-radius: 10px; background: #8A6A48; color: #fff; font-size: max(12px, var(--fl, 0px)); font-weight: 800; line-height: 16px; text-align: center; }
.dr-tab.is-needs .dr-tab__n { background: var(--c-kumkum); }
.dr-tab__n.is-hidden { display: none; }

/* ---- the items (the news list's own look, plus where it leads) */
.hud-news.dr .hud-news__list { flex: 1 1 auto; min-height: 0; }
.dr-item { position: relative; }
.dr-item .hud-news__txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dr-item.is-open { --tone: var(--c-kumkum); background: #FFF0E6; }
.dr-wait { color: var(--c-kumkum); font-weight: 800; }
.dr-go { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; padding: 2px 10px 3px; border: 2px solid var(--c-ink); border-radius: 9px; background: var(--hud-face); box-shadow: 0 2px 0 var(--c-ink); color: var(--c-ink); font-size: max(12.5px, var(--fl, 0px)); font-weight: 800; line-height: 1.15; }
.dr-go i { font-style: normal; font-size: 1.15em; line-height: 1; }
.dr-item.is-link { cursor: pointer; }
.dr-item.is-link:hover .dr-go { background: var(--hud-gold); }
.dr-item.is-link:active .dr-go { transform: translateY(2px); box-shadow: 0 0 0 var(--c-ink); }
.dr-item .hud-ic svg { width: 100%; height: 100%; }

/* ---- the foot: this outlet | all, and Clear */
.dr-foot { display: flex; align-items: center; flex: none; gap: 8px; padding: 7px 9px 9px; border-top: 2px dotted rgba(58, 31, 18, .3); }
.dr-foot .hud-news__filter { margin: 0; }
.dr-foot.is-hidden { display: none; }
.dr-clear { flex: none; margin-left: auto; min-height: 32px; padding: 2px 14px 4px; border: 2.5px solid var(--c-ink); border-radius: 10px; background: var(--hud-face); box-shadow: 0 3px 0 var(--c-ink); color: var(--c-ink); font-family: var(--font-ui); font-size: max(13.5px, var(--fl, 0px)); font-weight: 800; cursor: pointer; }
.dr-clear:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--c-ink); }
.dr-clear:disabled { opacity: .45; cursor: default; transform: none; box-shadow: 0 3px 0 var(--c-ink); }

/* ---- settings: Pop-ups (mirrors the pause menu's row) and the quiet switches */
.dr-set { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 14px; }
.dr-set.is-hidden, .hud-news.dr .hud-news__list.is-hidden { display: none; }
.dr-set__calm { padding: 4px 0 12px; border-bottom: 2px dotted rgba(58, 31, 18, .3); }
.dr-set .dts-calm { gap: 6px 10px; }
.dr-set .dts-calm__label { font-size: max(16px, var(--fl, 0px)); }
.dr-set .dts-calm__opt { min-height: 36px; padding: 1px 12px 3px; font-size: max(14.5px, var(--fl, 0px)); }
.dr-set .dts-calm__hint { flex-basis: 100%; font-size: max(13px, var(--fl, 0px)); }
.dr-set__h { margin: 12px 0 2px; font-size: max(16px, var(--fl, 0px)); font-weight: 800; color: #4A2C1A; }
.dr-set__hint, .dr-set__note { margin: 0 0 8px; font-size: max(13px, var(--fl, 0px)); font-weight: 600; line-height: 1.25; color: #6B4A33; }
.dr-set__note { margin: 10px 0 0; }
.dr-set__list { display: flex; flex-direction: column; gap: 5px; }
.dr-sw { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; padding: 4px 10px; border: 2px solid rgba(58, 31, 18, .35); border-radius: 10px; background: rgba(255, 255, 255, .7); color: #3A1F12; font-family: var(--font-ui); font-size: max(14px, var(--fl, 0px)); font-weight: 700; text-align: left; cursor: pointer; }
.dr-sw__l { min-width: 0; }
.dr-sw__k { position: relative; flex: none; width: 44px; height: 24px; border: 2.5px solid var(--c-ink); border-radius: 12px; background: #E6D7B8; transition: background .12s ease-out; }
.dr-sw__k::after { content: ''; position: absolute; left: 2px; top: 2px; width: 15px; height: 15px; border: 2px solid var(--c-ink); border-radius: 50%; background: #fff; transition: transform .12s ease-out; }
.dr-sw.is-on .dr-sw__k { background: var(--c-teal); }
.dr-sw.is-on .dr-sw__k::after { transform: translateX(19px); }

/* ---- the bell's mark: something needs you */
.dr-mark { position: absolute; left: -5px; top: -5px; width: 14px; height: 14px; border: 2.5px solid var(--c-ink); border-radius: 50%; background: var(--c-kumkum); box-shadow: 0 0 0 2px #FFF3D6; pointer-events: none; }
.dr-mark.is-hidden { display: none; }

/* ---- phone: a tall sheet from the bottom (upright), a panel down the right (on its side) */
.hud--compact .hud-news.dr { top: auto; bottom: var(--hud-tabs); width: auto; height: min(80%, calc(100% - var(--hud-top) - var(--hud-tabs) - 56px)); max-height: none; }
.hud--compact .hud-news.dr .hud-news__head { padding-right: 10px; }
.hud--compact .dr-gear { width: 44px; height: 40px; }
.hud--compact .dr-tabs { padding: 6px 8px 0; }
.hud--compact .dr-tab { min-height: 44px; font-size: max(13.5px, var(--fl, 0px)); }
.hud--compact .dr-foot { padding: 6px 8px 8px; }
.hud--compact .dr-clear { min-height: 44px; }
.hud--compact .dr-sw { min-height: 48px; }
.hud--compact .dr-go { min-height: 30px; padding: 3px 12px 4px; }
.hud--compact .dr-set .dts-calm__opt { min-height: 44px; }
.hud--landscape:not(.hud--tablet) .hud-news.dr { left: auto; right: 0; top: var(--hud-top); bottom: var(--hud-tabs); width: min(400px, 56%); height: auto; border-top: 0; border-left: 3.5px solid var(--c-ink); border-radius: 0; padding: 0 env(safe-area-inset-right, 0px) 0 0; animation-name: dr-slide; }
.hud--landscape:not(.hud--tablet) .hud-news.dr .hud-grab { display: none; }
.hud--landscape:not(.hud--tablet) .hud-news.dr .hud-news__head { padding-top: 6px; padding-bottom: 6px; }
.hud--landscape:not(.hud--tablet) .dr-tab { min-height: 44px; padding-top: 1px; padding-bottom: 2px; }
.hud--tablet .hud-news.dr { height: min(70%, calc(100% - var(--hud-top) - var(--hud-tabs) - 56px)); width: min(640px, 100%); }      /* (TRI50: a tablet's sheets are 640 px and centred, css/hud.css; the phone's width: auto above outweighed it) */
@media (prefers-reduced-motion: reduce) { .hud-news.dr { animation: none; } }