/* Flow Media primitive classes — interactive states live here; JSX components apply them */
/* Buttons */
.fm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:15px;line-height:1;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;text-decoration:none;padding:0 20px;height:44px;white-space:nowrap;user-select:none;-webkit-user-select:none;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.fm-btn:hover{text-decoration:none}
.fm-btn:active{transform:translateY(1px)}
.fm-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.fm-btn[disabled]{opacity:.45;pointer-events:none}
.fm-btn--sm{height:36px;padding:0 14px;font-size:14px}
.fm-btn--lg{height:52px;padding:0 28px;font-size:16px}
.fm-btn--primary{background:var(--flow-400);color:var(--graphite-950)}
.fm-btn--primary:hover{background:var(--flow-300);color:var(--graphite-950);box-shadow:var(--shadow-accent)}
.fm-btn--primary:active{background:var(--flow-500);color:var(--graphite-950)}
.fm-btn--secondary{background:transparent;color:var(--graphite-900);border-color:var(--grey-300)}
.fm-btn--secondary:hover{border-color:var(--graphite-900);color:var(--graphite-950)}
.fm-btn--secondary:active{background:var(--grey-100)}
.fm-btn--ghost{background:transparent;color:var(--accent-text)}
.fm-btn--ghost:hover{background:var(--flow-a10);color:var(--flow-700)}
.fm-btn--on-dark.fm-btn--secondary{color:#fff;border-color:var(--white-a16)}
.fm-btn--on-dark.fm-btn--secondary:hover{border-color:#fff;color:#fff}
.fm-btn--on-dark.fm-btn--secondary:active{background:var(--white-a06)}
.fm-btn--on-dark.fm-btn--ghost{color:var(--accent-on-dark)}
.fm-btn--on-dark.fm-btn--ghost:hover{background:var(--flow-a16);color:var(--flow-300)}
.fm-btn--icon{width:44px;padding:0}
.fm-btn--icon.fm-btn--sm{width:36px}
.fm-btn--icon.fm-btn--lg{width:52px}
/* Badges */
.fm-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.fm-badge--neutral{background:var(--grey-100);color:var(--graphite-700)}
.fm-badge--blue{background:var(--flow-a16);color:var(--flow-700)}
.fm-badge--green{background:rgba(31,169,113,.14);color:var(--green-600)}
.fm-badge--amber{background:rgba(219,148,18,.14);color:var(--amber-600)}
.fm-badge--red{background:rgba(229,72,77,.12);color:var(--red-600)}
.fm-badge--on-dark{background:var(--white-a10);color:var(--grey-200)}
.fm-badge--on-dark.fm-badge--blue{background:rgba(10,140,255,.24);color:var(--flow-300)}
/* Tags */
.fm-tag{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--grey-300);background:#fff;color:var(--text-body);font-family:var(--font-body);font-size:13.5px;font-weight:600;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.fm-tag:hover{border-color:var(--graphite-800);color:var(--text-strong)}
.fm-tag:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.fm-tag--active{background:var(--graphite-900);border-color:var(--graphite-900);color:#fff}
.fm-tag--active:hover{color:#fff;border-color:var(--graphite-900)}
/* Cards */
.fm-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
.fm-card--flat{box-shadow:none}
.fm-card--dark{background:var(--surface-dark-raised);border-color:var(--line-on-dark);box-shadow:none;color:var(--text-on-dark)}
.fm-card--interactive{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.fm-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised);border-color:var(--grey-300)}
/* Nav link (dark header) */
.fm-navlink{padding:8px 12px;font-size:14.5px;font-weight:600;color:var(--text-on-dark-muted);text-decoration:none;border-bottom:2px solid transparent;transition:color var(--dur-fast) var(--ease-out)}
.fm-navlink:hover{color:#fff;text-decoration:none}
.fm-navlink--active{color:#fff;border-bottom-color:var(--flow-400)}
/* Forms */
.fm-field{display:flex;flex-direction:column;gap:6px}
.fm-field>label{font-size:13.5px;font-weight:600;color:var(--text-strong)}
.fm-input{font-family:var(--font-body);font-size:15px;color:var(--text-strong);background:#fff;border:1px solid var(--grey-300);border-radius:var(--radius-sm);height:44px;padding:0 14px;width:100%;box-sizing:border-box;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.fm-input::placeholder{color:var(--steel-400)}
.fm-input:hover{border-color:var(--steel-400)}
.fm-input:focus{outline:none;border-color:var(--flow-500);box-shadow:var(--focus-ring)}
textarea.fm-input{height:auto;min-height:96px;padding:10px 14px;resize:vertical;line-height:1.5}
.fm-input--error,.fm-input--error:hover{border-color:var(--red-500)}
.fm-help{font-size:12.5px;color:var(--text-muted)}
.fm-error-text{font-size:12.5px;color:var(--red-600);display:inline-flex;gap:6px;align-items:center}
.fm-select{position:relative}
.fm-select .fm-input{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer}
.fm-select::after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;background:var(--steel-500);-webkit-mask:url("../assets/icons/chevron-down.svg") center/contain no-repeat;mask:url("../assets/icons/chevron-down.svg") center/contain no-repeat;pointer-events:none}
/* Checkbox / Radio / Switch */
.fm-check,.fm-radio-item{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:14.5px;color:var(--text-body);position:relative}
.fm-check input,.fm-radio-item input,.fm-switch-wrap input{position:absolute;opacity:0;width:1px;height:1px}
.fm-box{width:18px;height:18px;flex:none;margin-top:2px;border:1.5px solid var(--grey-300);border-radius:var(--radius-xs);background:#fff;position:relative;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.fm-check:hover .fm-box{border-color:var(--steel-400)}
.fm-check input:checked~.fm-box{background:var(--flow-500);border-color:var(--flow-500)}
.fm-check input:checked~.fm-box::after{content:"";position:absolute;inset:1px;background:#fff;-webkit-mask:url("../assets/icons/check.svg") center/contain no-repeat;mask:url("../assets/icons/check.svg") center/contain no-repeat}
.fm-check input:focus-visible~.fm-box{box-shadow:var(--focus-ring)}
.fm-dot{width:18px;height:18px;flex:none;margin-top:2px;border:1.5px solid var(--grey-300);border-radius:50%;background:#fff;position:relative;transition:border-color var(--dur-fast) var(--ease-out)}
.fm-radio-item:hover .fm-dot{border-color:var(--steel-400)}
.fm-radio-item input:checked~.fm-dot{border-color:var(--flow-500);border-width:2px}
.fm-radio-item input:checked~.fm-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--flow-500)}
.fm-radio-item input:focus-visible~.fm-dot{box-shadow:var(--focus-ring)}
.fm-switch-wrap{display:inline-flex;gap:10px;align-items:center;cursor:pointer;font-size:14.5px;color:var(--text-body);position:relative}
.fm-switch{width:38px;height:22px;flex:none;border-radius:var(--radius-pill);background:var(--grey-300);position:relative;transition:background var(--dur-base) var(--ease-out)}
.fm-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--dur-base) var(--ease-out)}
.fm-switch-wrap:hover .fm-switch{background:var(--steel-400)}
.fm-switch-wrap input:checked~.fm-switch{background:var(--flow-500)}
.fm-switch-wrap input:checked~.fm-switch::after{transform:translateX(16px)}
.fm-switch-wrap input:focus-visible~.fm-switch{box-shadow:var(--focus-ring)}
/* Tabs */
.fm-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.fm-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 14px;font-family:var(--font-body);font-size:14.5px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:color var(--dur-fast) var(--ease-out)}
.fm-tab:hover{color:var(--text-strong)}
.fm-tab--active{color:var(--text-strong);border-bottom-color:var(--flow-500)}
.fm-tabs--on-dark{border-bottom-color:var(--line-on-dark)}
.fm-tabs--on-dark .fm-tab{color:var(--text-on-dark-muted)}
.fm-tabs--on-dark .fm-tab:hover,.fm-tabs--on-dark .fm-tab--active{color:#fff}
.fm-tabs--on-dark .fm-tab--active{border-bottom-color:var(--flow-400)}
/* Dialog / Toast / Tooltip */
.fm-overlay{position:fixed;inset:0;background:var(--ink-a55);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}
.fm-dialog{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);width:100%;padding:28px;box-sizing:border-box}
.fm-toast{display:flex;gap:12px;align-items:flex-start;background:var(--graphite-900);color:var(--text-on-dark);border:1px solid var(--line-on-dark);border-left:2px solid var(--flow-400);border-radius:var(--radius-md);padding:14px 16px;box-shadow:var(--shadow-raised);max-width:380px;box-sizing:border-box}
.fm-toast--success{border-left-color:var(--green-500)}
.fm-toast--error{border-left-color:var(--red-500)}
.fm-tip{position:relative;display:inline-flex}
.fm-tip-bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);background:var(--graphite-950);color:#fff;font-family:var(--font-body);font-size:12.5px;font-weight:400;line-height:1.4;padding:6px 10px;border-radius:var(--radius-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);z-index:40}
.fm-tip-bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--graphite-950)}
.fm-tip-bubble--bottom{bottom:auto;top:calc(100% + 8px);transform:translate(-50%,-4px)}
.fm-tip-bubble--bottom::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--graphite-950)}
.fm-tip:hover .fm-tip-bubble,.fm-tip:focus-within .fm-tip-bubble{opacity:1;transform:translate(-50%,0)}
/* Photo placeholder — until real repair-work imagery is supplied */
.fm-photo{position:relative;overflow:hidden;background:linear-gradient(150deg,#3A4754,#151C23);border-radius:var(--radius-md)}
.fm-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(11,15,19,.12),rgba(11,15,19,.6))}
.fm-photo::after{content:attr(data-label);position:absolute;left:12px;bottom:10px;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.12em;color:rgba(243,245,248,.75);text-transform:uppercase}