/* Forms Through Time design system v1.0 (Midnight Iris) — components.
   CSS port of the design-system React components (Button, IconButton, Icon,
   Badge, Tag, Eyebrow, Emblem, OrnamentDivider, Card, ObjectCard, MetadataList,
   Input, Select, Checkbox, Switch, Tabs, Dialog, Toast, Tooltip) so pages can be
   server-rendered. Values follow the design-system source exactly. */

/* ---- Icon (Lucide subset, self-hosted; masked to currentColor) ---- */
.icon{display:inline-block;flex:none;width:var(--s,18px);height:var(--s,18px);background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}

/* ---- Button ---- */
.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;
  font:600 15px/1 var(--font-ui);letter-spacing:.01em;border:1.5px solid transparent;border-radius:var(--radius-1);
  text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
  background:var(--midnight-blue);color:var(--porcelain-ivory);--s:17px}
.btn:hover{background:var(--indigo);color:var(--porcelain-ivory)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn--sm{height:32px;padding:0 14px;font-size:13px;--s:15px}
.btn--lg{height:48px;padding:0 28px;font-size:16px;--s:18px}
.btn--full{display:flex;width:100%}
.btn--secondary{background:transparent;color:var(--midnight-blue);border-color:var(--midnight-blue)}
.btn--secondary:hover{background:var(--lavender-100);color:var(--midnight-blue)}
.btn--accent{background:var(--violet);color:#fff}
.btn--accent:hover{background:var(--violet-700);color:#fff}
.btn--ghost{background:transparent;color:var(--indigo)}
.btn--ghost:hover{background:var(--lavender-100);color:var(--indigo)}
.btn--link{background:transparent;color:var(--indigo);height:auto;padding:0;text-decoration:underline;text-underline-offset:3px}
.btn--link:hover{background:transparent;color:var(--violet)}

/* ---- IconButton ---- */
.iconbtn{box-sizing:border-box;width:var(--size,40px);height:var(--size,40px);display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-circle);border:1.5px solid transparent;background:transparent;color:var(--midnight-blue);
  cursor:pointer;transition:background var(--dur-fast) var(--ease-out);--s:calc(var(--size,40px) * .45);text-decoration:none}
.iconbtn:hover,.iconbtn[aria-pressed="true"]{background:var(--lavender-100)}
.iconbtn[aria-pressed="true"]{color:var(--violet)}
.iconbtn--outline{border-color:var(--border-strong);background:var(--paper)}
.iconbtn--solid{background:var(--midnight-blue);color:var(--porcelain-ivory)}
.iconbtn--solid:hover{background:var(--indigo)}
.iconbtn:disabled{opacity:.45;cursor:not-allowed}

/* ---- Badge (evidence states) ---- */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--radius-1);
  font:600 12px/1 var(--font-ui);letter-spacing:.03em;white-space:nowrap;border:1px solid transparent;
  background:var(--ivory-200);color:var(--midnight-blue)}
.badge--verified{background:var(--lavender-100);color:var(--indigo);border-color:var(--indigo-300)}
.badge--interpretive{background:var(--white);color:var(--violet);border:1px dashed var(--violet)}
.badge--uncertain{background:var(--evidence-uncertain-bg);color:var(--evidence-uncertain)}
.badge--dark{background:var(--midnight-blue);color:var(--porcelain-ivory)}

/* ---- Tag (pills) ---- */
.tag{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--radius-pill);
  font:400 14px/1 var(--font-ui);color:var(--indigo);background:transparent;border:1px solid var(--border-strong);
  text-decoration:none;transition:background var(--dur-fast) var(--ease-out);--s:14px}
a.tag:hover,button.tag:hover{background:var(--lavender-100);color:var(--indigo)}
.tag--selected{background:var(--midnight-blue);color:var(--porcelain-ivory);border-color:var(--midnight-blue);padding-right:8px}
a.tag--selected:hover,button.tag--selected:hover{background:var(--indigo);color:var(--porcelain-ivory)}
button.tag{cursor:pointer;font:inherit;font-size:14px}

/* ---- Eyebrow / headings ---- */
.eyebrow{font:600 12px/1.3 var(--font-display);letter-spacing:var(--ls-caps-wide);text-transform:uppercase;color:var(--midnight-blue)}
.eyebrow--indigo{color:var(--indigo)}.eyebrow--violet{color:var(--violet)}

/* ---- Emblem ---- */
.emblem{display:inline-flex;flex-direction:column;align-items:center;gap:10px}
.emblem img{display:block;border-radius:50%;width:var(--size,96px);height:var(--size,96px);transition:transform var(--dur-base) var(--ease-out)}
a:hover>.emblem img,a.emblem:hover img{transform:translateY(-2px)}

/* ---- Ornament divider: hairline · dot · hairline ---- */
.ornament{display:flex;align-items:center;gap:14px;--c:var(--indigo)}
.ornament::before,.ornament::after{content:"";flex:1;border-top:1px solid var(--c)}
.ornament>span{width:6px;height:6px;border-radius:50%;background:var(--soft-lavender)}

/* ---- Card / ObjectCard ---- */
.card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-1);padding:24px;
  transition:box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
a.card,.card--interactive{text-decoration:none;color:inherit;display:block}
a.card:hover,.card--interactive:hover{box-shadow:var(--shadow-2);border-color:var(--border-strong)}
.objcard{position:relative;display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-default);
  border-radius:var(--radius-1);overflow:hidden;transition:box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.objcard:hover{border-color:var(--border-strong);box-shadow:var(--shadow-2)}
.objcard.is-selected{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet)}
.objcard__img{aspect-ratio:4/5;background:var(--porcelain-ivory);display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--border-hairline);position:relative}
.objcard__badge{position:absolute;top:10px;left:10px}
.objcard__add{position:absolute;top:6px;right:6px;z-index:2}
.objcard__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px}
.objcard__type{font:600 11px/1.3 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--indigo)}
.objcard__title{font:600 22px/1.15 var(--font-display);color:var(--midnight-blue);text-decoration:none}
.objcard__title::after{content:"";position:absolute;inset:0}  /* whole card clickable; add button sits above */
.objcard__title:hover{color:var(--violet)}
.objcard__meta{font:400 13px/1.4 var(--font-ui);color:var(--text-muted);font-variant-numeric:tabular-nums}

/* ---- MetadataList ---- */
.metalist{display:grid;grid-template-columns:minmax(0,1fr);column-gap:32px;margin:0;font-family:var(--font-ui)}
.metalist>div{display:grid;grid-template-columns:minmax(110px,40%) 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--border-hairline)}
.metalist dt{font-size:13px;color:var(--text-muted)}
.metalist dd{margin:0;font-size:14px;color:var(--midnight-blue);font-variant-numeric:tabular-nums;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.metalist .note{font-size:12px;color:var(--evidence-uncertain);font-style:italic}

/* ---- Form controls ---- */
.field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-ui)}
.field__label{font-size:13px;font-weight:600;color:var(--midnight-blue)}
.field__hint{font-size:12px;color:var(--text-muted)}
.field__error{font-size:12px;color:var(--violet)}
.input{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;background:var(--white);border-radius:var(--radius-1);
  border:1.5px solid var(--border-strong);transition:border-color var(--dur-fast) var(--ease-out);color:var(--indigo)}
.input:focus-within{border-color:var(--indigo);box-shadow:0 0 0 3px var(--lavender-100)}
.input.is-invalid{border-color:var(--violet)}
.input input,.input textarea{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--text-body)}
.input--lg{height:52px}.input--lg input{font-size:17px}
.input--sm{height:34px}
.textarea{display:block;width:100%;box-sizing:border-box;padding:10px 14px;background:var(--white);border:1.5px solid var(--border-strong);
  border-radius:var(--radius-1);font:inherit;font-size:15px;color:var(--text-body);resize:vertical}
.textarea:focus{border-color:var(--indigo);box-shadow:0 0 0 3px var(--lavender-100);outline:0}
.select{position:relative;display:flex}
.select select{appearance:none;-webkit-appearance:none;width:100%;height:42px;padding:0 40px 0 14px;font:inherit;font-size:15px;
  color:var(--text-body);background:var(--white);border:1.5px solid var(--border-strong);border-radius:var(--radius-1);cursor:pointer}
.select select:focus{border-color:var(--indigo);outline:0;box-shadow:0 0 0 3px var(--lavender-100)}
.select--sm select{height:34px;font-size:14px}
.select::after{content:"";position:absolute;right:14px;top:50%;width:16px;height:16px;margin-top:-8px;pointer-events:none;background:var(--indigo);
  -webkit-mask:url("../icons/chevron-down.cf34dbd9655a.svg") center/contain no-repeat;mask:url("../icons/chevron-down.cf34dbd9655a.svg") center/contain no-repeat}
.check{display:flex;align-items:center;gap:10px;cursor:pointer;font:400 15px/1.3 var(--font-ui);color:var(--text-body);padding:4px 0}
.check input{appearance:none;-webkit-appearance:none;margin:0;width:18px;height:18px;flex:none;border-radius:var(--radius-1);
  border:1.5px solid var(--indigo-300);background:var(--white);display:inline-grid;place-content:center;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out)}
.check input:checked{background:var(--indigo);border-color:var(--indigo)}
.check input:checked::before{content:"";width:13px;height:13px;background:var(--porcelain-ivory);
  -webkit-mask:url("../icons/check.2a8d8742e534.svg") center/contain no-repeat;mask:url("../icons/check.2a8d8742e534.svg") center/contain no-repeat}
.check input:disabled{cursor:not-allowed}.check.is-disabled{opacity:.45;cursor:not-allowed}
.check__label{flex:1}.check__count{font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font:400 15px/1.3 var(--font-ui);color:var(--text-body)}
.switch input{appearance:none;-webkit-appearance:none;margin:0;width:36px;height:20px;border-radius:999px;background:var(--ivory-300);
  position:relative;flex:none;cursor:pointer;transition:background var(--dur-base) var(--ease-out)}
.switch input::before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--porcelain-ivory);
  box-shadow:var(--shadow-1);transition:left var(--dur-base) var(--ease-out)}
.switch input:checked{background:var(--indigo)}.switch input:checked::before{left:18px}

/* ---- Tabs ---- */
.tabs{display:flex;gap:28px;border-bottom:1px solid var(--border-default)}
.tabs--compact{gap:20px}
.tab{background:none;border:0;padding:10px 0;margin-bottom:-1px;cursor:pointer;font:400 15px/1.3 var(--font-ui);color:var(--indigo);
  border-bottom:2px solid transparent;text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
.tab:hover{color:var(--violet)}
.tab[aria-selected="true"],.tab[aria-current="page"]{font-weight:600;color:var(--midnight-blue);border-bottom-color:var(--violet)}
.tab__count{margin-left:6px;font-size:12px;color:var(--text-muted)}

/* ---- Dialog (native <dialog>) ---- */
.dialog{width:min(var(--w,520px),calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;background:var(--porcelain-ivory);
  border-radius:var(--radius-2);box-shadow:var(--shadow-3);border:1px solid var(--border-default);color:var(--text-body);overflow:hidden}
.dialog[open]{display:flex;flex-direction:column}
.dialog::backdrop{background:var(--surface-overlay)}
.dialog__head{display:flex;align-items:flex-start;gap:16px;padding:24px 24px 0}
.dialog__head>div{flex:1}
.dialog__eyebrow{font:600 12px/1.3 var(--font-display);letter-spacing:.22em;text-transform:uppercase;color:var(--indigo);margin-bottom:6px}
.dialog__title{margin:0;font:600 28px/1.15 var(--font-display);color:var(--midnight-blue)}
.dialog__body{padding:12px 24px 24px;font:400 16px/1.6 var(--font-editorial);overflow-y:auto}
.dialog__actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;padding:16px 24px;border-top:1px solid var(--border-default);background:var(--paper)}

/* ---- Toast ---- */
.toast{display:inline-flex;align-items:center;gap:12px;padding:12px 16px;background:var(--midnight-blue);color:var(--porcelain-ivory);
  border-radius:var(--radius-2);box-shadow:var(--shadow-3);font:400 14px/1.4 var(--font-ui);--s:16px}
.toast .icon{color:var(--soft-lavender)}
.toast button{margin-left:8px;background:none;border:0;color:var(--soft-lavender);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---- Tooltip (title-free, CSS only) ---- */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);
  opacity:0;pointer-events:none;background:var(--midnight-blue);color:var(--porcelain-ivory);font:400 12px/1.4 var(--font-ui);
  padding:6px 10px;border-radius:var(--radius-1);white-space:nowrap;z-index:50;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
[data-tip]:hover::after,[data-tip]:focus-within::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- Profile placeholder (owner decision DS1): one neutral, identical shape for every
   record, outline + hatching, sized by height only. Never per-object proportions. ---- */
.profile-pending{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px}
.profile-pending__shape{height:var(--h,60%);aspect-ratio:.78;max-height:100%;
  background:repeating-linear-gradient(45deg,var(--lavender-200) 0 2px,transparent 2px 7px);
  -webkit-mask:url("../brand/vessel-silhouette.e3d5aa5a081e.svg") center/100% 100% no-repeat;mask:url("../brand/vessel-silhouette.e3d5aa5a081e.svg") center/100% 100% no-repeat;
  outline:0}
.profile-pending__label{font:600 10px/1.2 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--evidence-uncertain)}

/* ---- Focus ---- */
:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.btn:focus-visible,.iconbtn:focus-visible,.tag:focus-visible,.tab:focus-visible{box-shadow:var(--shadow-focus)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.quickgrid{display:grid;grid-template-columns:140px minmax(0,1fr);gap:24px;align-items:start}
.quickfig{height:180px;background:var(--porcelain-ivory);border:1px solid var(--border-hairline);display:flex;align-items:center;justify-content:center}
[data-quick]{cursor:pointer}
@media (max-width:640px){.quickgrid{grid-template-columns:minmax(0,1fr)}}

/* ---- Search suggestions (combobox listbox under a search input) ---- */
.suggest-host{position:relative}
.suggest{position:absolute;left:-1.5px;right:-1.5px;top:calc(100% + 6px);z-index:35;margin:0;padding:6px 0;list-style:none;
  background:var(--white);border:1px solid var(--border-strong);border-radius:var(--radius-1);box-shadow:var(--shadow-3);
  max-height:min(420px,60vh);overflow-y:auto;text-align:left}
.suggest [role=option]{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:9px 14px;cursor:pointer;
  font:400 15px/1.3 var(--font-ui);color:var(--midnight-blue)}
.suggest [role=option][aria-selected="true"],.suggest [role=option]:hover{background:var(--lavender-100)}
.suggest__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest__meta{flex:none;font-size:13px;color:var(--text-muted);max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest__all .suggest__label{font-weight:600;color:var(--indigo)}
.suggest__group{padding:12px 14px 4px;font:600 11px/1.2 var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);border-top:1px solid var(--border-hairline);margin-top:6px}