/* NTIS feedback — Alert, Banner, Toast, Modal, EmptyState, LoadingScreen.
   Tone is a tinted panel + a matching icon + a titled message — never colour
   alone, and never a coloured side border on its own. */

/* Alert — inline, inside content. Icon and title take the status ink; body stays body. */
.ntis-alert{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-5);background:var(--status-info-bg);border:var(--border-hairline) solid var(--status-info-border);border-radius:var(--radius-md);font-family:var(--font-core);font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-body)}
.ntis-alert__icon{flex:none;margin-block-start:3px;color:var(--status-info-fg)}
.ntis-alert__body{display:flex;flex-direction:column;gap:var(--space-1);flex:1;min-width:0}
.ntis-alert__title{font:var(--type-label);font-size:var(--fs-body);color:var(--status-info-fg)}
.ntis-alert--success{background:var(--status-success-bg);border-color:var(--status-success-border)}
.ntis-alert--success .ntis-alert__icon,.ntis-alert--success .ntis-alert__title{color:var(--status-success-fg)}
.ntis-alert--warning{background:var(--status-warning-bg);border-color:var(--status-warning-border)}
.ntis-alert--warning .ntis-alert__icon,.ntis-alert--warning .ntis-alert__title{color:var(--status-warning-fg)}
.ntis-alert--danger{background:var(--status-danger-bg);border-color:var(--status-danger-border)}
.ntis-alert--danger .ntis-alert__icon,.ntis-alert--danger .ntis-alert__title{color:var(--status-danger-fg)}
.ntis-alert--neutral{background:var(--fill-subtle);border-color:var(--border-subtle)}
.ntis-alert--neutral .ntis-alert__icon{color:var(--text-muted)}
.ntis-alert--neutral .ntis-alert__title{color:var(--text-strong)}
.ntis-alert--bare{background:transparent;border-color:transparent;padding-inline:0}
.ntis-alert__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-block-start:var(--space-2)}
.ntis-alert__close{margin:-6px;color:var(--text-muted)}

/* Banner — full-width page notice (maintenance, incident, legal). Solid band,
   white ink, in both themes. */
.ntis-banner{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3) var(--space-4);min-height:48px;padding-block:var(--space-3);padding-left:max(var(--gutter-left), calc((100% - var(--container-nav)) / 2));padding-right:max(var(--gutter-right), calc((100% - var(--container-nav)) / 2));background:var(--banner-neutral-bg);color:var(--text-on-brand);font-family:var(--font-core);font-size:var(--fs-body-sm);line-height:var(--lh-snug)}
.ntis-banner--info{background:var(--banner-info-bg)}
.ntis-banner--critical{background:var(--banner-critical-bg)}
.ntis-banner__text{flex:1;min-width:min(240px,100%)}
.ntis-banner__text strong{font-weight:var(--w-bold)}
.ntis-banner__action{color:inherit;font-weight:var(--w-medium);text-decoration:underline;text-underline-offset:3px;border-radius:var(--radius-xs)}
.ntis-banner__action:hover{text-decoration-thickness:2px}
.ntis-banner__action:focus-visible,.ntis-banner .ntis-iconbtn:focus-visible{outline:2px solid var(--text-on-brand);outline-offset:2px;box-shadow:none}
.ntis-banner .ntis-iconbtn{color:inherit}
.ntis-banner .ntis-iconbtn:hover{background:var(--fill-on-solid-hover);color:inherit}

/* Toast — always a dark island (the component sets data-ntis-theme="dark"),
   bottom-centre, one at a time. */
.ntis-toast{display:flex;align-items:center;gap:var(--space-3);max-width:min(560px,calc(100vw - 32px));padding:var(--space-3) var(--space-3) var(--space-3) var(--space-5);padding-inline:var(--space-5) var(--space-3);background:var(--surface-raised);border:var(--border-hairline) solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--elev-3);color:var(--text-strong);font-family:var(--font-core);font-size:var(--fs-body-sm);line-height:var(--lh-snug)}
.ntis-toast__icon--info{color:var(--status-info-fg)}
.ntis-toast__icon--success{color:var(--status-success-fg)}
.ntis-toast__icon--warning{color:var(--status-warning-fg)}
.ntis-toast__icon--danger{color:var(--status-danger-fg)}
.ntis-toast__text{flex:1;min-width:0}
.ntis-toast__spacer{flex:1}
.ntis-toast-region{position:fixed;inset-block-end:max(var(--space-7), calc(var(--gutter-bottom) + var(--space-3)));inset-inline:0;z-index:var(--z-toast);display:flex;justify-content:center;pointer-events:none}
.ntis-toast-region>*{pointer-events:auto;animation:ntis-rise var(--dur-base) var(--ease-out)}

/* Modal */
.ntis-overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-7);background:var(--surface-overlay);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:ntis-fade var(--dur-base) var(--ease-out)}
.ntis-overlay--contained{position:absolute}
.ntis-modal{display:flex;flex-direction:column;width:100%;max-width:520px;max-height:100%;background:var(--surface-raised);border:var(--border-hairline) solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--elev-4);color:var(--text-body);overflow:hidden;animation:ntis-rise var(--dur-base) var(--ease-out)}
.ntis-modal--sm{max-width:400px}
.ntis-modal--lg{max-width:760px}
.ntis-modal__head{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-7) var(--space-7) var(--space-4)}
.ntis-modal__icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--radius-md);background:var(--status-info-bg);color:var(--status-info-fg)}
.ntis-modal__icon--danger{background:var(--status-danger-bg);color:var(--status-danger-fg)}
.ntis-modal__icon--warning{background:var(--status-warning-bg);color:var(--status-warning-fg)}
.ntis-modal__icon--success{background:var(--status-success-bg);color:var(--status-success-fg)}
.ntis-modal__title{flex:1;margin:0;font:var(--type-h3);color:var(--text-strong)}
.ntis-modal__desc{margin:0;padding-inline:var(--space-7);font:var(--type-body-sm);color:var(--text-muted)}
.ntis-modal__body{padding:var(--space-5) var(--space-7);overflow:auto}
.ntis-modal__foot{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-5) var(--space-7);background:var(--fill-subtle);border-block-start:var(--border-hairline) solid var(--border-subtle)}
/* Small screens: the modal becomes a bottom sheet with full-width actions */
.ntis-overlay--sheet{align-items:flex-end;padding:0}
.ntis-overlay--sheet .ntis-modal{max-width:100%;border-end-start-radius:0;border-end-end-radius:0;border-block-end:0}
.ntis-overlay--sheet .ntis-modal__foot{flex-direction:column-reverse;align-items:stretch;padding-block-end:max(var(--space-5), var(--gutter-bottom))}
@media (max-width:767px){
  :root:not([data-ntis-static]) .ntis-overlay{align-items:flex-end;padding:0}
  :root:not([data-ntis-static]) .ntis-modal{max-width:100%;border-end-start-radius:0;border-end-end-radius:0;border-block-end:0}
  :root:not([data-ntis-static]) .ntis-modal__foot{flex-direction:column-reverse;align-items:stretch;padding-block-end:max(var(--space-5), var(--gutter-bottom))}
}
@keyframes ntis-fade{from{opacity:0}to{opacity:1}}
@keyframes ntis-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Empty state */
.ntis-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-12) var(--space-7);text-align:center}
.ntis-empty--compact{padding:var(--space-9) var(--space-5)}
.ntis-empty__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--radius-circle);background:var(--fill-subtle);color:var(--text-subtle)}
.ntis-empty__title{margin:0;font:var(--type-h4);color:var(--text-strong)}
.ntis-empty__body{margin:0;max-width:44ch;font:var(--type-body-sm);color:var(--text-muted)}

/* Loading — page transitions, slow panels, console route changes. Nothing
   scales or bounces. motion="rule": the brand gradient sweeps in READING
   direction under a static mark (right→left in Arabic, per the platform rule
   that progress follows the script); the gradient itself stays physical.
   motion="arcs": the submark's three arcs draw one at a time, then fade — it
   is the logo, so it never mirrors. */
.ntis-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-5);text-align:center;font-family:var(--font-core);color:var(--text-muted);background:var(--surface-page);animation:ntis-fade var(--dur-base) var(--ease-out);transition:opacity var(--dur-base) var(--ease-standard)}
.ntis-loading--page{position:fixed;inset:0;z-index:var(--z-modal);padding:var(--space-8)}
.ntis-loading--section{position:relative;width:100%;min-height:240px;padding:var(--space-8);background:transparent}
.ntis-loading--bar{position:fixed;inset-block-start:0;inset-inline:0;z-index:var(--z-toast);display:block;height:3px;padding:0;gap:0;background:transparent;overflow:hidden}
.ntis-loading--contained{position:absolute}
.ntis-loading--leaving{opacity:0;pointer-events:none}
.ntis-loading__mark{display:block;flex:none}
.ntis-loading__rule{position:relative;display:block;width:160px;height:3px;border-radius:var(--radius-pill);background:var(--fill-hover);overflow:hidden}
.ntis-loading--section .ntis-loading__rule{width:120px}
.ntis-loading__fill{position:absolute;top:0;bottom:0;inset-inline-start:0;width:40%;border-radius:inherit;background:var(--gradient-brand);animation:ntis-loading-sweep var(--dur-loading-cycle) var(--ease-standard) infinite}
.ntis-loading__label{font:var(--type-body-sm);color:var(--text-body)}
.ntis-loading__detail{margin-block-start:calc(var(--space-2) * -1);font:var(--type-caption);color:var(--text-muted)}
.ntis-loading__fill:dir(rtl){animation-name:ntis-loading-sweep-rtl}
@keyframes ntis-loading-sweep{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@keyframes ntis-loading-sweep-rtl{from{transform:translateX(100%)}to{transform:translateX(-250%)}}
.ntis-loading--arcs .ntis-loading__mark{animation:ntis-loading-arcs-fade var(--dur-loading-arcs) var(--ease-standard) infinite both}
.ntis-loading__trace{fill:none;stroke:white;stroke-linecap:butt;stroke-dasharray:1 2;stroke-dashoffset:1;animation-duration:var(--dur-loading-arcs);animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both}
.ntis-loading__trace--0{animation-name:ntis-loading-trace-0}
.ntis-loading__trace--1{animation-name:ntis-loading-trace-1}
.ntis-loading__trace--2{animation-name:ntis-loading-trace-2}
@keyframes ntis-loading-trace-0{0%{stroke-dashoffset:1}28%,100%{stroke-dashoffset:0}}
@keyframes ntis-loading-trace-1{0%,16%{stroke-dashoffset:1}44%,100%{stroke-dashoffset:0}}
@keyframes ntis-loading-trace-2{0%,32%{stroke-dashoffset:1}60%,100%{stroke-dashoffset:0}}
@keyframes ntis-loading-arcs-fade{0%,76%{opacity:1}90%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ntis-loading{animation:none}.ntis-loading__fill{animation:none;width:100%;opacity:.6}.ntis-loading--arcs .ntis-loading__mark{animation:none;opacity:1}.ntis-loading__trace{animation:none;stroke-dashoffset:0}.ntis-toast-region>*,.ntis-overlay,.ntis-modal{animation:none}}