/* ================================================================
   UI KIT WORK — kit-work.css
   The three surface-shapers. Pairs with kit-work.js.
   Requires tokens.css + kit-ext.css loaded first (the lifecycle
   palette and .lc-* / .lc-sw live there).
   Components: record shell (.fc) · typed table (.kt) · commit
   sheet (.cs).  Tokens only — no hex, no invented radii,
   durations or shadows. Nothing here animates on an idle loop.
   ================================================================ */

/* ---------- shared plates & marks ----------
   Self-contained copies of the shell's plate/mark vocabulary so the
   components render identically in the gallery (which has no shell.css)
   and in the product. Same geometry, same tokens. */
.kw-plate{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.09em;color:var(--ink-3);border:1.5px solid var(--hairline);border-radius:4px;padding:2px 6px;white-space:nowrap}
.kw-plate.miss{color:var(--lc-missing-ink);border-color:color-mix(in srgb,var(--lc-missing) 55%,transparent)}
.kw-mk{display:inline-block;width:11px;height:11px;border-radius:3px;flex:none;vertical-align:-1px}
.kw-mk.ok{background:var(--lc-use)}
.kw-mk.prov{background:repeating-linear-gradient(45deg,var(--lc-use) 0 2.5px,color-mix(in srgb,var(--lc-use) 22%,var(--surface)) 2.5px 5px);border:1px solid color-mix(in srgb,var(--lc-use) 60%,var(--surface))}
.kw-mk.gap{background:var(--lc-missing-bg);border:1.5px dashed var(--lc-missing)}
.kw-lc{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--lc-ink);white-space:nowrap}
.kw-lnk{cursor:pointer;border-bottom:1px dotted transparent;transition:color var(--t-fast) ease,border-color var(--t-fast) ease}
.kw-lnk:hover{color:var(--accent-ink);border-bottom-color:var(--accent-ink)}

/* ================================================================
   1 · RECORD SHELL  (.fc) — verdict first, faces beneath
   ================================================================ */
/* identity is a strip, not a card — one dense line, mono identifiers */
.fc-subject{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:2px 2px 0}
.fc-title{font-size:20px;font-weight:600;letter-spacing:-.02em;font-family:var(--mono)}
/* subject.kind:'name' — a non-mono subject (a person, a desk, a policy) */
.fc.fc-name .fc-title{font-family:var(--sans);letter-spacing:-.022em}
.fc-tag{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.03em}
.fc-sub{font-size:12.5px;color:var(--ink-2)}
.fc-marks{display:inline-flex;gap:6px;align-items:center}
.fc-mark{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--ink-2);border:1px solid var(--hairline);border-radius:99px;padding:1.5px 9px;white-space:nowrap;background:var(--surface);transition:border-color var(--t-fast) ease,transform var(--t-fast) var(--ease-spring)}
.fc-mark:hover{border-color:color-mix(in srgb,var(--ink) 22%,var(--hairline));transform:translateY(-1px)}
.fc-mark.hold{color:var(--lc-hold-ink);border-color:color-mix(in srgb,var(--lc-hold) 40%,var(--hairline))}
.fc-mark.miss{color:var(--lc-missing-ink);border-color:color-mix(in srgb,var(--lc-missing) 45%,var(--hairline))}
.fc-mark.warn{color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn) 45%,var(--hairline))}

/* the verdict — the answer, stated in the first screenful, with the mark
   that proves it drawn beside it. Chrome per tone, prose from the caller. */
.fc-verdict{--fv-c:var(--ink-3);--fv-ink:var(--ink-2);position:relative;margin-top:12px;padding:13px 16px 12px;border:1px solid var(--hairline);border-left:3px solid var(--fv-c);border-radius:10px;background:color-mix(in srgb,var(--fv-c) 4%,var(--surface));transition:border-color var(--t-med) ease,background .35s ease}
.fc-verdict[data-tone="ok"]{--fv-c:var(--s-good);--fv-ink:var(--s-good-ink)}
.fc-verdict[data-tone="warn"]{--fv-c:var(--warn);--fv-ink:var(--warn-ink)}
.fc-verdict[data-tone="bad"]{--fv-c:var(--lc-missing);--fv-ink:var(--lc-missing-ink)}
.fc-verdict[data-tone="unknown"]{border-style:dashed;border-left-style:dashed;background:var(--surface)}
.fc-vline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fc-vdot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--fv-c);box-shadow:0 0 0 3px color-mix(in srgb,var(--fv-c) 16%,transparent)}
.fc-verdict[data-tone="unknown"] .fc-vdot{background:transparent;border:1.5px dashed var(--ink-3);box-shadow:none}
.fc-vtext{font-size:14.5px;font-weight:600;letter-spacing:-.008em;color:var(--ink)}
.fc-vmark{display:inline-flex;align-items:center;flex:none}
.fc-vmark:empty{display:none}
.fc-vactions{margin-left:auto;display:flex;gap:7px;align-items:center}
.fc-vdetail{margin-top:5px;padding-left:19px;font-size:12px;color:var(--ink-2);max-width:88ch}
.fc-vdetail:empty{display:none}

/* the faces rail — a quiet hairline row; count and tone dot only where
   something needs attention. One shared underline that SLIDES
   (.seg-thumb's exact physics), so both selection controls move alike. */
.fc-rail{position:relative;display:flex;gap:2px;border-bottom:1px solid var(--hairline);margin-top:16px;overflow-x:auto;scrollbar-width:none}
.fc-rail::-webkit-scrollbar{display:none}
.fc-thumb{position:absolute;bottom:0;left:0;height:2px;width:60px;background:var(--ink);border-radius:2px 2px 0 0;transition:transform var(--t-med) var(--ease-spring),width var(--t-med) var(--ease-spring)}
.fc-thumb.still{transition:none}
.fc-face{display:inline-flex;align-items:center;gap:7px;padding:9px 12px 10px;font-size:12.5px;font-weight:550;color:var(--ink-3);white-space:nowrap;border-radius:7px 7px 0 0;cursor:pointer;transition:color var(--t-fast) ease,background var(--t-fast) ease}
.fc-face:hover{color:var(--ink-2);background:var(--surface-2)}
.fc-face.on{color:var(--ink);font-weight:600}
.fc-face .fc-n{font-size:10.5px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--hairline-2);border-radius:99px;padding:0 7px;line-height:16px;transition:color var(--t-fast) ease,background var(--t-fast) ease}
.fc-face.on .fc-n{color:var(--ink-2);background:var(--surface);border-color:var(--hairline)}
/* a failed count is a dash, never a zero — with the warn dot naming it */
.fc-face .fc-n.fail{color:var(--warn-ink);background:transparent;border-style:dashed}
.fc-face .fc-dot{width:6px;height:6px;border-radius:50%;flex:none}
.fc-face .fc-dot.warn{background:var(--warn)}
.fc-face .fc-dot.bad{background:var(--lc-missing)}
.fc-face .fc-dot.ok{background:var(--s-good)}
/* sequencing without a wizard: done · current · locked, all routable */
.fc-face .fc-done{flex:none;color:var(--s-good-ink)}
.fc-face.current .fc-cur{width:6px;height:6px;border-radius:50%;flex:none;background:var(--accent)}
.fc-face.locked{color:var(--ink-3)}
.fc-face.locked .fc-lk{flex:none;opacity:.6;transition:opacity var(--t-fast) ease,transform var(--t-med) var(--ease-spring)}
.fc-face.locked:hover .fc-lk{opacity:.95;transform:translateY(-1px)}

.fc-panel{padding-top:16px}
@keyframes fc-in{0%{opacity:0;transform:translateY(7px)}100%{opacity:1;transform:none}}
.fc-panel.fc-swap>*{animation:fc-in var(--t-med) var(--ease-out) both}
/* a locked face, opened — it explains itself and routes to what unlocks it */
.fc-locked{display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 20px;color:var(--ink-3)}
.fc-locked .fc-lock-ic{width:38px;height:38px;border-radius:10px;background:var(--surface-2);border:1.5px dashed var(--hairline);display:grid;place-items:center;margin-bottom:12px;color:var(--ink-3);transition:transform var(--t-med) var(--ease-spring)}
.fc-locked:hover .fc-lock-ic{transform:translateY(-2px)}
.fc-locked b{color:var(--ink-2);font-size:13px;font-weight:600}
.fc-locked p{font-size:12px;margin-top:3px;max-width:340px;line-height:1.55}

/* ================================================================
   2 · TYPED TABLE  (.kt)
   ================================================================ */
.kt{position:relative}
/* overflow-x:auto would trap position:sticky inside the wrapper — so the
   scroll container is engaged (by JS) only when the table actually
   overflows; a fitting table keeps its header stuck to the topbar */
.kt-wrap{overflow-x:visible}
.kt-wrap.scroll{overflow-x:auto}
.kt-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.kt-tbl th{text-align:left;font-size:10.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:8px 10px;border-bottom:1px solid var(--hairline);white-space:nowrap}
.kt-tbl.kt-sticky th{position:sticky;top:var(--topbar-h,54px);z-index:6;background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.kt-tbl th.sortable{cursor:pointer;user-select:none;transition:color var(--t-fast) ease}
.kt-tbl th.sortable:hover{color:var(--ink)}
.kt-tbl th .sa{display:inline-block;vertical-align:-1px;margin-left:4px;opacity:0;transform:translateY(2px);transition:opacity var(--t-fast) ease,transform var(--t-med) var(--ease-spring)}
.kt-tbl th.sorted .sa,.kt-tbl th.sortable:hover .sa{opacity:1;transform:none}
.kt-tbl th.sorted{color:var(--ink)}
.kt-hwarn{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);margin-left:5px;vertical-align:1px}
.kt-tbl td{padding:8px 10px;border-bottom:1px solid var(--hairline-2);vertical-align:middle}
.kt-tbl tbody tr{transition:background var(--t-fast) ease,opacity var(--t-fast) ease;will-change:transform}
.kt-tbl tbody tr:hover{background:var(--surface-2)}
.kt-tbl tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.kt-tbl tbody:hover tr:not(:hover):not(.kt-group){opacity:.6}
.kt-tbl tbody tr.click{cursor:pointer}
.kt-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
/* typed cells */
.kt-mono{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.kt-tx b{font-weight:550;font-size:12.5px;display:block}
.kt-tx small,.kt-cell small{display:block;font-size:10.5px;color:var(--ink-3);margin-top:1px}
.kt-money{font-variant-numeric:tabular-nums;white-space:nowrap}
.kt-age{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}
.kt-age.capped{color:var(--ink-2);font-weight:550}
.kt-fail{color:var(--ink-3)}
.kt-none{color:var(--ink-3)}
/* new-to-page rows after a re-sort settle in; moved rows FLIP (JS-driven) */
@keyframes kt-in{0%{opacity:0}100%{opacity:1}}
.kt-tbl tbody tr.kt-new{animation:kt-in var(--t-med) ease both}
/* group header: shared context said once */
.kt-tbl tr.kt-group td{padding:12px 10px 6px;border-bottom:1px solid var(--hairline);background:transparent;font-size:10.5px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.kt-tbl tr.kt-group td b{font-variant-numeric:tabular-nums;color:var(--ink-3);font-weight:600;margin-left:7px;text-transform:none;letter-spacing:0}
.kt-tbl tr.kt-group:hover td{box-shadow:none}
/* totals: an earned footer, not another row */
.kt-tbl tfoot td{padding:9px 10px;border-top:1px solid var(--hairline);border-bottom:0;font-weight:650;font-variant-numeric:tabular-nums;font-size:12.5px}
.kt-tbl tfoot td:first-child{font-size:10.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
/* selection: the check draws itself (same anatomy as the register's) */
.kt-ck{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--hairline);background:var(--surface);display:grid;place-items:center;cursor:pointer;flex:none;transition:border-color var(--t-fast) ease,background var(--t-fast) ease,transform var(--t-fast) var(--ease-spring)}
.kt-ck:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--hairline));transform:scale(1.1)}
.kt-ck:active{transform:scale(.92)}
.kt-ck svg{opacity:0}
.kt-ck.on{background:var(--accent);border-color:var(--accent)}
.kt-ck.on svg{opacity:1}
@keyframes kw-tick{to{stroke-dashoffset:0}}
.kt-ck.on svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:kw-tick .25s var(--ease-out) forwards}
.kt-ck.part{background:var(--accent);border-color:var(--accent)}
.kt-ck.part::after{content:"";width:8px;height:2px;border-radius:2px;background:var(--surface)}
.kt-tbl tr.selrow td{background:var(--accent-bg)}
/* pager — THE paging strategy, with first/last one click away */
.kt-foot{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--hairline);font-size:12px;color:var(--ink-3)}
.kt-foot b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.kt-foot .pgs{margin-left:auto;display:flex;align-items:center;gap:3px}
.kt-pg{min-width:26px;height:26px;padding:0 7px;border-radius:7px;display:grid;place-items:center;font-size:11.5px;font-weight:550;font-variant-numeric:tabular-nums;color:var(--ink-2);cursor:pointer;border:1px solid transparent;transition:background var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease,transform var(--t-fast) var(--ease-spring)}
.kt-pg:hover{background:var(--surface-2);color:var(--ink)}
.kt-pg:active{transform:scale(.92)}
.kt-pg.on{background:var(--surface);border-color:var(--hairline);color:var(--ink);font-weight:650;box-shadow:0 1px 2px rgba(var(--shadow-c),.05)}
.kt-pg.dis{opacity:.35;pointer-events:none}
.kt-pg.end{font-weight:650}
.kt-gap{color:var(--ink-3);padding:0 2px}
.kt-empty:empty{display:none}

/* ================================================================
   3 · COMMIT SHEET  (.cs) — the only centred overlay in the product
   ================================================================ */
.cs-veil{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 34%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--t-fast) ease;z-index:120}
.cs-veil.on{opacity:1}
.cs{position:fixed;left:50%;top:50%;transform:translate(-50%,-47%) scale(.97);width:560px;max-width:94vw;max-height:88vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hairline);border-radius:14px;box-shadow:0 24px 70px -12px rgba(var(--shadow-c),.35);z-index:121;opacity:0;transition:opacity var(--t-fast) ease,transform var(--t-med) var(--ease-spring)}
.cs.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@keyframes cs-shake{0%,100%{transform:translate(-50%,-50%)}22%{transform:translate(calc(-50% - 5px),-50%)}55%{transform:translate(calc(-50% + 4px),-50%)}80%{transform:translate(calc(-50% - 2px),-50%)}}
.cs.err-hit{animation:cs-shake .38s var(--ease-out)}
.cs-head{display:flex;align-items:center;gap:10px;padding:15px 18px 12px;border-bottom:1px solid var(--hairline)}
.cs-title{font-size:14.5px;font-weight:600;letter-spacing:-.008em}
.cs-x{margin-left:auto;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--ink-3);cursor:pointer;transition:background var(--t-fast) ease,color var(--t-fast) ease}
.cs-x:hover{background:var(--surface-2);color:var(--ink)}
.cs-subject{display:flex;align-items:baseline;gap:9px;padding:11px 18px 0;flex-wrap:wrap}
.cs-subject .kw-tag{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--ink-2);border:1px solid var(--hairline);border-radius:5px;padding:2px 7px;background:var(--surface-2)}
.cs-subject span:not(.kw-tag){font-size:12.5px;color:var(--ink-2);line-height:1.55}
.cs-body{flex:1;overflow-y:auto;padding:6px 18px 4px}
/* the consequence ledger — computed from the estate, and it ARRIVES:
   rows settle in once on open, then hold still */
.cs-ledger{margin-top:8px}
.cs-lrow{display:flex;align-items:baseline;gap:12px;padding:7.5px 2px;border-bottom:1px solid var(--hairline-2)}
.cs-ledger .cs-lrow:last-child{border-bottom:0}
@keyframes cs-settle{0%{opacity:0;transform:translateY(-4px)}100%{opacity:1;transform:none}}
.cs-lrow{animation:cs-settle var(--t-med) var(--ease-out) both}
.cs-ll{font-size:12.5px;color:var(--ink-2)}
/* ⚠ `white-space:nowrap` was right for what this is FOR — a short value, a
   count, a sum, kept on one line against its label. It is silent damage for
   what actually gets passed: two separate builders wrote a sentence into a
   ledger value, and it ran off the edge of the sheet with no ellipsis, no
   wrap and no error. A commit sheet is the last thing a person reads before
   an irreversible act; a clipped word there is the worst place in the product
   to lose text.
   A value that is short still sits on one line, because it has nothing to
   wrap. One that is a sentence now wraps and stays readable, right-aligned
   with its label, rather than disappearing past the edge. */
.cs-lv{margin-left:auto;font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink);text-align:right;max-width:62ch;overflow-wrap:anywhere}
.cs-lrow.bad .cs-lv{color:var(--lc-missing-ink)}
.cs-lrow.warn .cs-lv{color:var(--warn-ink)}
.cs-lrow.ok .cs-lv{color:var(--s-good-ink)}
/* extra evidence area (tag lists, prose) — the tail stays reachable INSIDE the sheet */
.cs-detail{margin-top:12px}
.cs-detail-h{font-size:10px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:4px 0 7px}
/* ⚠ This capped EVERY commit-sheet detail body at 168px and scrolled the rest.
   Right for what it was written for — a 43-tag evidence list you skim — and
   wrong for the other thing that lands here, a form. On the policies sheet it
   hid the cadence, the recipient, the mode and the impact line behind a scroll
   nobody discovers, which are exactly the controls its refusals are about. A
   reader skims evidence; a reader must SEE a control before they can be
   refused for not setting it.
   So the cap now applies only to a detail body that is a list of things, and a
   body containing form controls is never clipped. */
.cs-detail-b{max-height:168px;overflow-y:auto;scrollbar-width:thin;border:1px solid var(--hairline-2);border-radius:9px;padding:10px 11px;background:var(--surface-2)}
.cs-detail-b:has(input,select,textarea,.fld,[role="radiogroup"],.pu-chips){max-height:none;overflow:visible}
.cs-tags{display:flex;gap:6px;flex-wrap:wrap}
/* what the policy demands before commit is possible */
.cs-req{margin-top:14px;display:flex;flex-direction:column;gap:11px}
.cs-req-h{font-size:10px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.cs-r{border:1px solid var(--hairline-2);border-radius:9px;padding:10px 12px;transition:border-color var(--t-fast) ease,background var(--t-fast) ease}
.cs-r:focus-within{border-color:color-mix(in srgb,var(--accent) 40%,var(--hairline))}
.cs-r.met{border-color:color-mix(in srgb,var(--s-good) 32%,var(--hairline))}
.cs-r.nudge{animation:cs-shake .38s var(--ease-out);border-color:color-mix(in srgb,var(--warn) 55%,var(--hairline))}
.cs-r .why{font-size:11px;color:var(--ink-3);margin-top:3px;line-height:1.5}
.cs-r-row{display:flex;align-items:center;gap:10px}
.cs-r-row label{font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer}
.cs-r .inp{margin-top:7px;width:100%}
.cs-r .met-mk{margin-left:auto;flex:none;color:var(--s-good-ink);opacity:0;transform:scale(.6);transition:opacity var(--t-fast) ease,transform var(--t-med) var(--ease-spring)}
.cs-r.met .met-mk{opacity:1;transform:none}
.cs-attach{display:inline-flex;align-items:center;gap:7px;margin-top:7px;height:30px;padding:0 12px;border:1.5px dashed var(--hairline);border-radius:8px;font-size:12px;font-weight:550;color:var(--ink-2);cursor:pointer;background:var(--surface);transition:border-color var(--t-fast) ease,color var(--t-fast) ease}
.cs-attach:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--hairline));color:var(--accent-ink)}
.cs-attach.has{border-style:solid;border-color:color-mix(in srgb,var(--s-good) 40%,var(--hairline));color:var(--s-good-ink)}
/* an error stays open and keeps the typed values */
.cs-err{display:none;margin-top:12px;padding:10px 13px;border:1px solid color-mix(in srgb,var(--danger) 45%,var(--hairline));border-left-width:3px;border-radius:9px;background:color-mix(in srgb,var(--danger) 5%,var(--surface));font-size:12px;color:var(--lc-missing-ink);line-height:1.5}
.cs-err.on{display:block;animation:cs-settle var(--t-med) var(--ease-out)}
/* denied: locked with its owner, never masked */
.cs-denied{display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 13px;border:1.5px dashed var(--hairline);border-radius:9px;font-size:12px;color:var(--ink-2);line-height:1.5}
.cs-denied svg{flex:none;color:var(--ink-3)}
/* foot: the safe choice reads first */
.cs-foot{display:flex;align-items:center;gap:8px;row-gap:10px;padding:13px 18px;border-top:1px solid var(--hairline);flex-wrap:wrap}
.cs-foot .btn{white-space:nowrap}
/* the safe choice and the commit travel as one unit when the foot wraps */
.cs-btns{display:flex;gap:8px;align-items:center;margin-left:auto}
.cs-note{font-size:11px;color:var(--ink-3)}
.cs-note.hard{color:var(--warn-ink);font-weight:550}
.cs-foot .sp{flex:1}
.cs-need{font-size:11px;color:var(--ink-3);text-align:right;margin-right:2px;transition:color var(--t-fast) ease}
.cs-need.hot{color:var(--warn-ink);font-weight:550}
.cs-commit.danger{background:var(--danger);border-color:var(--danger);color:var(--surface)}
.cs-commit.danger:hover{opacity:.88;color:var(--surface);box-shadow:none}
.cs-commit.dis{opacity:.45;cursor:not-allowed}
.cs-commit.dis:hover{box-shadow:none;border-color:var(--danger)}
.cs-commit.busy{pointer-events:none;opacity:.7}

@media (prefers-reduced-motion:reduce){
  .fc-thumb{transition:none}
  .cs-lrow{animation:none}
}