@import url('./tokens.css');
@import url('./backgrounds.css');

@font-face{font-family:"Yekan Bakh";font-style:normal;font-weight:400;font-display:swap;src:url("./assets/fonts/yekan-bakh-400.woff2") format("woff2")}
@font-face{font-family:"Yekan Bakh";font-style:normal;font-weight:600;font-display:swap;src:url("./assets/fonts/yekan-bakh-600.woff2") format("woff2")}
@font-face{font-family:"Yekan Bakh";font-style:normal;font-weight:700;font-display:swap;src:url("./assets/fonts/yekan-bakh-700.woff2") format("woff2")}

@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-display:swap;src:url('./assets/fonts/roboto-latin-wght-normal.woff2') format('woff2')}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--flow-font-fa);font-size:var(--flow-size-body);line-height:1.8;color:var(--flow-color-text);background:var(--flow-brand-canvas)}
:lang(en),code,kbd{font-family:var(--flow-font-latin)}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
a{color:var(--flow-brand-primary);text-underline-offset:4px}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--flow-brand-primary);outline-offset:4px}
[hidden]{display:none!important}
img{max-inline-size:100%;display:block}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.5}
small{font-size:var(--flow-size-caption)}
code,bdi{overflow-wrap:anywhere}
.flow-btn{display:inline-flex;justify-content:center;align-items:center;gap:var(--flow-space-2);min-block-size:var(--flow-size-control);padding:10px 22px;border:1px solid transparent;border-radius:var(--flow-radius-sm);font-weight:600;font-size:var(--flow-size-small);line-height:1.7;text-decoration:none;background:var(--flow-brand-primary);color:var(--flow-brand-surface);transition:background-color var(--flow-motion-fast),transform var(--flow-motion-fast) var(--flow-motion-ease)}
.flow-btn--secondary{background:var(--flow-brand-surface);border-color:var(--flow-color-input-border);color:var(--flow-brand-deep)}
.flow-btn--quiet{background:transparent;color:var(--flow-brand-primary)}
.flow-btn--danger{background:var(--flow-color-danger)}
.flow-btn--small{min-block-size:44px;padding:8px 16px}
.flow-btn:disabled{cursor:not-allowed;background:var(--flow-brand-soft);border-color:var(--flow-color-border);color:var(--flow-color-muted)}
.flow-btn[aria-busy=true]{cursor:wait}
.flow-btn svg,.icon{inline-size:20px;block-size:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.flow-icon-btn{min-inline-size:44px;min-block-size:44px;padding:10px;border:0;border-radius:8px;background:transparent;color:var(--flow-brand-deep);display:inline-grid;place-items:center}
.flow-card{background:var(--flow-brand-surface);border:1px solid var(--flow-color-border);border-radius:var(--flow-radius-md);padding:var(--flow-space-6)}
.flow-badge{display:inline-flex;align-items:center;gap:6px;border-radius:6px;padding:3px 9px;font-size:var(--flow-size-caption);font-weight:500;line-height:1.8;background:var(--flow-brand-soft);color:var(--flow-brand-primary)}
.flow-badge--proposed{color:var(--flow-color-warning);background:var(--flow-color-warning-bg)}
.flow-badge--success{color:var(--flow-color-success);background:var(--flow-color-success-bg)}
.flow-field{display:grid;gap:8px}
.flow-field label{font-weight:500;font-size:var(--flow-size-small)}
.flow-input{inline-size:100%;min-block-size:48px;border:1px solid var(--flow-color-input-border);border-radius:var(--flow-radius-sm);background:var(--flow-brand-surface);padding:10px 14px;color:var(--flow-brand-deep)}
.flow-input::placeholder{color:var(--flow-color-muted);opacity:1}
.flow-input:focus{border-color:var(--flow-brand-primary)}
.flow-input[aria-invalid=true]{border-color:var(--flow-color-danger)}
.flow-input:disabled{background:var(--flow-brand-canvas);color:var(--flow-color-muted);cursor:not-allowed}
.flow-help{font-size:var(--flow-size-caption);color:var(--flow-color-muted)}
.flow-error{font-size:var(--flow-size-caption);color:var(--flow-color-danger)}
.flow-check{display:flex;gap:10px;align-items:center;min-block-size:44px;cursor:pointer;font-size:var(--flow-size-small)}
.flow-check input{inline-size:18px;block-size:18px;accent-color:var(--flow-brand-primary);flex:none}
.flow-switch{display:flex;align-items:center;gap:12px;min-block-size:44px;cursor:pointer}
.flow-switch input{appearance:none;inline-size:42px;block-size:24px;border:1px solid var(--flow-color-input-border);background:var(--flow-brand-surface);border-radius:var(--flow-radius-round);position:relative;cursor:pointer;flex:none}
.flow-switch input::before{content:'';position:absolute;inline-size:16px;block-size:16px;inset-block-start:3px;inset-inline-start:3px;border-radius:50%;background:var(--flow-color-muted)}
.flow-switch input:checked{background:var(--flow-brand-primary);border-color:var(--flow-brand-primary)}
.flow-switch input:checked::before{inset-inline-start:21px;background:white}
.flow-alert{display:flex;align-items:flex-start;gap:12px;padding:16px;border-radius:var(--flow-radius-sm);border-inline-start:3px solid var(--flow-brand-primary);background:var(--flow-brand-soft);font-size:var(--flow-size-small)}
.flow-alert .icon{margin-block-start:4px}
.flow-alert--success{color:var(--flow-color-success);background:var(--flow-color-success-bg);border-color:var(--flow-color-success)}
.flow-alert--warning{color:var(--flow-color-warning);background:var(--flow-color-warning-bg);border-color:var(--flow-color-warning)}
.flow-alert--danger{color:var(--flow-color-danger);background:var(--flow-color-danger-bg);border-color:var(--flow-color-danger)}
.flow-tabs{display:flex;gap:4px;border-block-end:1px solid var(--flow-color-border)}
.flow-tab{background:none;border:0;border-block-end:2px solid transparent;min-block-size:48px;padding:10px 18px;color:var(--flow-color-muted)}
.flow-tab[aria-selected=true]{color:var(--flow-brand-primary);border-color:var(--flow-brand-primary);font-weight:600}
.flow-dialog{border:1px solid var(--flow-color-border);border-radius:var(--flow-radius-lg);padding:28px;inline-size:min(440px,calc(100% - 32px));color:var(--flow-brand-deep);box-shadow:var(--flow-shadow-popover);font-family:var(--flow-font-fa)}
.flow-dialog::backdrop{background:rgb(23 37 84 / .35)}
.flow-dialog h2{font-size:var(--flow-size-title);margin-block-end:12px}
.flow-dialog p{color:var(--flow-color-muted);margin-block-end:24px}
.flow-toast{position:fixed;inset-block-end:24px;inset-inline-start:24px;max-inline-size:calc(100% - 48px);z-index:30;display:flex;align-items:center;gap:18px;padding:12px 18px;border-radius:12px;background:var(--flow-brand-deep);color:white;box-shadow:var(--flow-shadow-popover);font-size:var(--flow-size-small)}
.flow-toast button{color:white}
.flow-skeleton{block-size:16px;background:var(--flow-brand-soft);border-radius:6px}
@media(hover:hover) and (pointer:fine){
 .flow-btn:not(:disabled):hover{background:var(--flow-color-hover)}
 .flow-btn--secondary:not(:disabled):hover,.flow-btn--quiet:not(:disabled):hover{background:var(--flow-brand-soft)}
 .flow-btn--danger:not(:disabled):hover{background:#8F1C28}
 .flow-icon-btn:hover{background:var(--flow-brand-soft)}
}
@media(prefers-reduced-motion:no-preference){html[data-input=pointer] .flow-btn:not(:disabled):active{transform:scale(.97)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
html[data-input=keyboard] *,html[data-input=keyboard] *::before{transition:none!important}

/* Only directional UI arrows mirror; brand artwork never does. */
.directional:dir(ltr){transform:scaleX(-1)}