/* frames.css: the frames of /museum (frames.js; the frames spec, §2 the
   recipes, §5 the hang and the viewer), from labs/museum-frames, where Sha
   chose them (Oct 13, 2026). Loaded after museum.css.

   One markup draws every style, on the wall and in the viewer:
     a.tile.fr.f-<key> > span.mat > span.win > img                a room's tile
     figure.slide > span.fr.f-<key> > span.mat > span.win > img   a viewer slide
   .fr        the outer box: the face (its padding), the outer edge, the shadow on the wall
   .mat       a mat, a backing, or the reveal of wall white inside the face
   .win       the window the picture shows through: its --tint, and every ring
              drawn outside it (an edge, a bevel, the float's shadow), never on it
   frames.js writes the lengths (snapped to device pixels) on the outer box:
     --u   the unit: the room's row target, or the viewer's own (SPEC §3)
     --dp  one device pixel; --ft/--fx/--fb the face; --mt/--mx/--mb the mat's
     padding (reveal + mat + bevel); --bev the bevel; --tone the mat's tone
   Every shadow falls straight down (x 0, y > 0): one light, above, on the
   center line. Every variable that holds var(--u) is declared on .f-<key>,
   which carries --u (SPEC §5.6). Nothing here matches a page with no frame
   on it: every rule needs .fr, .f-<key>, a framed row or slide, or edit
   mode's frame line and panel (.fl, .fp). */

.fr{--face:transparent;--matc:transparent}
.tile.fr,.slide > .fr{background:var(--face);padding:var(--ft) var(--fx) var(--fb);
  box-shadow:var(--edge,0 0 #0000),var(--wallsh,0 0 #0000)}
.fr > .mat{display:block;height:100%;background:var(--matc);padding:var(--mt) var(--mx) var(--mb);box-shadow:var(--rail,0 0 #0000)}
.fr .win{display:block;position:relative;width:100%;height:100%;background:var(--tint);box-shadow:var(--ring,0 0 #0000)}
.fr .win > img{display:block;width:100%;height:100%}
/* a frame and its picture arrive as one object: the frame waits, unseen, for its picture (img.in),
   and the two fade in together, so no empty frame is ever drawn. The picture inside is always
   opaque; the frame carries the fade. A re-hang moves decoded pictures in, already .in, so a
   frame change never blanks (museum.js pool) */
@supports selector(:has(a)){
  .tile.fr,.slide > .fr{opacity:0;transition:opacity .7s var(--ease)}
  .slide > .fr{transition-duration:.45s}
  .tile.fr:has(img.in),.slide > .fr:has(img.in){opacity:1}
  .fr .win > img{opacity:1}
  /* a husk (frames.js morph) has no picture to wait for: it is drawn, and faded, by the morph alone */
  .tile.fr.husk,.slide > .fr.husk{opacity:1;transition:none}
  @media (hover:hover) and (pointer:fine){.tile.fr:hover .win > img{opacity:.9}}
  @media (prefers-reduced-motion:reduce){.tile.fr,.slide > .fr{transition:none}}
}
/* taken down (edit mode): the picture dimmed in its frame, as on a bare tile */
.tile.fr.stored .win > img.in{opacity:.38}

/* ═══ the recipes (SPEC §2) ═══ */
/* face-mount: no frame; a device pixel's edge and a short, soft shadow on the wall below */
.f-facemount{--ring:0 0 0 var(--dp) rgba(17,17,17,.10);
  --wallsh:0 calc(var(--u)*.0025) calc(var(--u)*.004) rgba(17,17,17,.08),0 calc(var(--u)*.008) calc(var(--u)*.016) rgba(17,17,17,.05)}
/* hairline: one device pixel of ink (an inset spread, never a border), a hair of wall white inside it */
.f-hairline{--face:var(--wall);--edge:inset 0 0 0 var(--dp) var(--ink)}
/* black metal: a narrow flat black face, a fine white reveal */
.f-metal{--face:#161616;--matc:var(--wall);
  --wallsh:0 calc(var(--u)*.0015) calc(var(--u)*.0025) rgba(17,17,17,.07),0 calc(var(--u)*.004) calc(var(--u)*.008) rgba(17,17,17,.04)}
/* thick black: a wide black face, unmatted, a fine white reveal */
.f-thick{--face:var(--ink);--matc:var(--wall);
  --wallsh:0 calc(var(--u)*.002) calc(var(--u)*.003) rgba(17,17,17,.07),0 calc(var(--u)*.006) calc(var(--u)*.012) rgba(17,17,17,.05)}
/* white frame: a white face on the white wall, drawn by its two edge lines and its shadow */
.f-white{--face:#fff;--edge:inset 0 0 0 var(--dp) rgba(17,17,17,.16);--ring:0 0 0 var(--dp) rgba(17,17,17,.16);
  --wallsh:0 calc(var(--u)*.002) calc(var(--u)*.003) rgba(17,17,17,.08),0 calc(var(--u)*.006) calc(var(--u)*.012) rgba(17,17,17,.06)}
/* mat: a black face around an off-white mat, weighted at the foot; the white core of its bevel at the window */
.f-mat{--face:var(--ink);--matc:var(--tone,#faf9f6);
  --rail:inset 0 calc(var(--u)*.006) calc(var(--u)*.010) calc(var(--u)*-.004) rgba(17,17,17,.10);
  --ring:0 0 0 var(--bev) #fff,0 0 0 calc(var(--bev) + var(--dp)) rgba(17,17,17,.07);
  --wallsh:0 calc(var(--u)*.002) calc(var(--u)*.003) rgba(17,17,17,.07),0 calc(var(--u)*.006) calc(var(--u)*.012) rgba(17,17,17,.05)}
/* float: the picture raised on an off-white backing in a thin black box; its shadow falls on the backing */
.f-float{--face:#161616;--matc:#f6f5f2;
  --rail:inset 0 calc(var(--u)*.010) calc(var(--u)*.016) calc(var(--u)*-.007) rgba(17,17,17,.12);
  --ring:0 calc(var(--u)*.002) calc(var(--u)*.003) rgba(17,17,17,.14),0 calc(var(--u)*.007) calc(var(--u)*.012) rgba(17,17,17,.10),0 calc(var(--u)*.014) calc(var(--u)*.024) rgba(17,17,17,.06);
  --wallsh:0 calc(var(--u)*.003) calc(var(--u)*.004) rgba(17,17,17,.07),0 calc(var(--u)*.009) calc(var(--u)*.018) rgba(17,17,17,.05)}

/* ═══ a room (SPEC §5.1, §5.3) ═══ */
/* a row that holds any frame lines up its pictures, not its frames: each tile
   is let down by its row's deepest top inset less its own (museum.js hang) */
.hrow.framed{align-items:flex-start}
/* a re-hang's husks (frames.js morph): frames without their pictures, the old ones and the one coming up,
   carried beneath the real tiles, whose pictures are never copied; a layer just before the wall, placed
   where the wall begins */
.ghosts{position:absolute;width:0;height:0;pointer-events:none}
.ghosts > .tile{position:absolute}

/* ═══ the viewer (SPEC §5.4) ═══ */
/* a framed slide holds its own husks (frames.js morph): it is their containing block, so they stay on their
   slide wherever the track is scrolled, and the stacking context they go under the picture in (z-index -1) */
.track > .slide:has(> .fr){position:relative;isolation:isolate}
/* the outer box fits the slide's content box: the picture is
   min(cw − 2x, (ch − top − bottom)·ar, its front file's width), the frame around it.
   --fx2 is 2x, --fy top + bottom, --ar, --cw and the slide's box (--bw, --bh) as museum.css gives the bare img */
.slide > .fr{display:block;flex:none;max-width:100%;
  width:calc(min(var(--bw,100cqw) - var(--fx2), (var(--bh,100cqh) - var(--fy)) * var(--ar,1), var(--cw,100cqw)) + var(--fx2))}
.slide > .fr > .mat{height:auto}
.slide > .fr .win{height:auto;aspect-ratio:var(--ar,1)}
.slide > .fr .win > img{width:100%;height:100%;max-width:none;max-height:none}
/* edit mode on a phone: the picture lifted above the risen form is carried by the morph, not by the
   slide's own ease, where it wears a frame (museum.js raiseLabel) */
#viewer.editing .slide:has(> .fr){transition:none}

/* ═══ edit mode: the frame line, a field of a form (a room head's last, a picture's first), and its panel ═══ */
/* the line: "frame" and the frame worn, in the form's quiet type; the frame is the button that opens the panel */
.fl{margin:0;font-variant-numeric:lining-nums proportional-nums}
.form .fl{display:flex;align-items:baseline;font-size:.92rem;color:var(--faint)}
.fl .fl-w{flex:none;margin-right:.45em}
.fl .fl-v{position:relative;min-height:24px;text-align:left;color:var(--ink-2);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--hair);transition:text-decoration-color .3s var(--ease)}
.fl .fl-v::before{content:"";position:absolute;inset:-9px -.4em}
/* A room's panel opens over the page, never in its flow, so nothing under it moves (Sha, Oct 12): over the
   room's own head (frames.js placeRoomPanel). A white sheet with a hairline edge, eased in by its opacity
   and a short rise; its words come up only once the sheet has covered what lies under it, and go before it
   does, so two sets of words never show at once. A picture's, in the viewer's form, is in the form's flow
   instead (below, Oct 15). Closed, either is out of the tab order */
.fp{opacity:0;visibility:hidden;transition:opacity .22s var(--ease) .14s,transform .35s var(--ease),visibility 0s linear .36s}
.fp.open{opacity:1;visibility:visible;transition:opacity .22s var(--ease),transform .35s var(--ease),visibility 0s}
.fp > .fp-in{min-height:0;opacity:0;transition:opacity .14s var(--ease)}
.fp.open > .fp-in{opacity:1;transition:opacity .26s var(--ease) .2s}
/* drawn again open (frames.js wire): at once, as it was seen */
.fp.open.now,.fp.open.now > .fp-in{transition:none}
/* a room's: over its head, above the corner's bar, which it may cover on a phone; so the room's view
   keeps no layer of its own once it has come in (its fade holds none after it ends) */
:is(.roomhead,.mapedit):has(.fp.rfp){position:relative}
:is(#room,#mapview).view:has(.fp.rfp){animation-fill-mode:backwards}
:is(.roomhead,.mapedit) .fp.rfp{position:absolute;z-index:12;left:calc(-1.1rem - 1px);top:calc(100% + .55rem);width:max-content;max-width:calc(100vw - 2 * var(--g));margin:0;
  padding:.95rem 1.1rem .7rem;background:var(--wall);border:1px solid var(--hair);transform:translateY(-6px);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
:is(.roomhead,.mapedit) .fp.rfp.open{transform:none}
/* its words from the top: the row, the mat's settings, then the circles and the rest (.fp-low) right under
   them, so the settings open between the row and the circles and carry the circles down; only the panel
   over a phone's head keeps the circles and the rest at its foot (.over, below) */
.fp-body{display:flex;flex-direction:column;font-size:.94rem;line-height:1.5}
/* a room's panel names its level: "for the gallery Big steppers", the name in italic */
.fp-h{margin:0 0 .3rem;color:var(--ink-2)}
.fp-h i{color:var(--ink)}
/* the choices: every word 24 × 24 at least, 8 px from the next row (WCAG 2.5.8); the one worn in ink */
.fp-ws{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:8px}
.fp-i{display:inline-flex;align-items:baseline;white-space:nowrap}
.fp-w{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:24px;min-width:24px;padding:0;white-space:nowrap;color:var(--faint);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:transparent;transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.fp-w[aria-pressed="true"]{color:var(--ink)}
.fp-ws .dot{color:var(--faint);margin:0 .42em;user-select:none}
/* each word's target grows past its type, never moving it: across half the dot's room on each side and half
   the gap to the next row, so a thumb that lands between two words or two rows still finds one */
.fp-w::before,.fp-c::before{content:"";position:absolute;inset:-4px -.5em}
/* the mat's three settings, and the line naming the pictures with their own frame: each eased in and out
   from nothing to its height inside the panel, on the morph's clock (frames.js rowsTo) */
.fp-set,.fp-own,.fp-cw{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden}
.fp-set.on,.fp-own.on,.fp-cw.on{grid-template-rows:1fr;opacity:1;visibility:visible}
.fp-set > .fp-in,.fp-own > .fp-in,.fp-cw > .fp-in{min-height:0;overflow:hidden;padding:5px 5px 0;margin:-5px -5px 0;opacity:1;transition:none}   /* a focus ring's room above the first row too */
.fp-cw > .fp-in{padding-bottom:5px;margin-bottom:-5px}   /* and under the last circle's */
.fp-set > .fp-in{padding-bottom:4px;margin-bottom:-4px}   /* and the last setting's target its full height */
.fp-sets{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:1.6rem;row-gap:8px;margin:.45rem 0 0;font-size:.9rem}
/* a setting: its label in one column, its words wrapping in the next (a hanging indent) */
.fp-sets .fp-ws[data-k]{display:grid;grid-template-columns:max-content auto;column-gap:.55em;align-items:baseline}
.fp-sets .fp-sl{color:var(--ink-2)}
.fp-opts{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:8px}
/* the circles: this frame for the gallery, for the museum. A hairline ring, filled in ink with a white tick
   while that level wears the frame. A circle a press could not change (the frame none, with nothing to go
   back to) is drawn faint and unticked, and a press does nothing (frames.js circleState); it is always
   there, so nothing moves as it comes alive */
.fp-cs{display:flex;flex-direction:column;align-items:flex-start;row-gap:8px;margin:.75rem 0 0}
.fp-c,.form label.fp-c{position:relative;display:inline-flex;align-items:center;gap:.6em;min-height:24px;margin:0;font-size:inherit;color:var(--ink-2);cursor:pointer;
  transition:color .3s var(--ease),opacity .3s var(--ease),visibility 0s}
.fp-c:has(input:checked){color:var(--ink)}
.fp-cs .fp-c.lock{opacity:.4;cursor:default}
.fp-c input{appearance:none;-webkit-appearance:none;flex:none;position:relative;top:var(--cy,-.04em);width:.84em;height:.84em;margin:0;border:0;border-radius:50%;cursor:inherit;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.4 6.9 10.8 11.6 5.6' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  box-shadow:inset 0 0 0 1px currentColor;transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.fp-c input:checked{background-color:currentColor}
/* the room panel's last row: "2 pictures have their own frame" (eased in and out by its height and opacity,
   frames.js rowsTo; shut, it gives back its width) */
.fp-end{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;column-gap:1rem;margin:.5rem 0 0}
/* a room panel's circle and that line share a row where they fit, the line at its right (the review, Oct 13: a
   line saved, where a level of the map's panel stands beside its count) */
.fp.rfp .fp-low{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;column-gap:1.4rem;row-gap:.5rem}
.fp.rfp .fp-low > .fp-end{margin:0}
.fp.rfp .fp-low > .fp-end:only-child{margin-top:.5rem}
.fp-end > .fp-own{flex:0 1 auto}
.fp-end > .fp-own.gone{width:0;flex-basis:0}
/* the line's words step to the next of those pictures, underlined as the frame line is */
.fp-ol{margin:0;font-size:.9rem}
.fp-ol .fp-w{color:var(--ink-2);white-space:normal;text-align:left;text-decoration-color:var(--hair)}
/* over the head, from the top of the screen to its line: the circles and the rest at its foot */
:is(.roomhead,.mapedit) .fp.rfp.over{display:flex;flex-direction:column}
:is(.roomhead,.mapedit) .fp.rfp.over .fp-low{margin-top:auto}
:is(.roomhead,.mapedit) .fp.rfp.over > .fp-in{flex:1 0 auto;display:flex;flex-direction:column}
:is(.roomhead,.mapedit) .fp.rfp.over .fp-body{flex:1 0 auto}
/* a phone's room panel (frames.js dockPanel): docked at the foot of the screen, just above the edit bar (the
   bar's own offset from the foot, its height --ebh, and 8 px), the room's width less its gutters, as tall as
   its words, the pictures scrolling beneath it; past its most it scrolls inside itself */
:is(.roomhead,.mapedit) .fp.rfp.dock{position:fixed;top:auto;left:max(var(--g),env(safe-area-inset-left));right:max(var(--g),env(safe-area-inset-right));
  bottom:calc(env(safe-area-inset-bottom) + 14px + var(--ebh,0px) + 8px);width:auto;max-width:none;transform:none}
/* its form's Save and what it says, at its foot as the form has them (frames.js DOCKACT): only in the dock */
.fp-act{display:none}
:is(.roomhead,.mapedit) .fp.rfp.dock .fp-act{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.6rem}
.fp-act .fp-sv{position:relative;flex:none;min-height:24px;padding:.1rem 0;font-size:.94rem;color:var(--ink);border-bottom:1px solid var(--ink)}
.fp-act .fp-sv::before{content:"";position:absolute;inset:-6px -.5em}
.fp-act .fp-st{min-width:0;font-size:.84rem;color:var(--faint);font-style:italic;text-align:right;font-feature-settings:"ss04" 1,"ss09" 1,"lnum" 1}
.fp.tt .fp-act{margin-top:var(--rg,6px)}
/* a panel that comes and goes as one movement (frames.js ride: the dock): its sheet and its words together, moved
   by its own animations alone */
.fp.ride,.fp.ride.open,.fp.ride > .fp-in,.fp.ride.open > .fp-in{transition:none}
.fp.ride > .fp-in{opacity:1}
/* a wide window's room head: what the Save says stands beside it, not at the form's far end, so a panel beside
   the head keeps its room clear and never lies over it (frames.js statusRight; the review, Oct 13: on a map
   level a mat's settings reached down over "Unsaved changes") */
@media (min-width:900px){.roomedit .form:has(> .ffr) > .actions{justify-content:flex-start}}
/* a dot before a line's break is not drawn (frames.js eol): a wrapped row of words never ends in one */
.dot.eol{visibility:hidden}

/* A picture's panel, in the viewer's form: its first field's own content, under its line, in the form's flow (Sha,
   Oct 15: laid over the fields below, wider than the boxes under it, its foot pushed past the lines it would cut, it
   "looks sloppy"). A box exactly the form's column wide, the same outer edges as its inputs and its full-width chips,
   its words inset by its own padding, its hairline hugging them, and under it the form's own gap between fields
   (.form .f), so the form reads as one column with even spacing. It opens and shuts by its height, as the mat's
   settings do (frames.js rowsTo: its rows, 0fr to 1fr, and its opacity, on the morph's clock), the fields under it
   moving down and up with it; the line above it, and its row of words, never move. The mat's settings open under
   the row, between it and the circles, so the box grows downward and the word just pressed stays where it is.
   The box is drawn to the panel's own height, the one that moves the fields under it, and to nothing else: the panel
   clips what it holds and draws the box's foot, its hairline, at its own foot (::after, taking no room, so shut it is
   0 px tall), and .fp-body draws the box's top and sides, .45rem under the line, cut at that foot. Its row is not the
   clip: an auto-height grid's row eased below 1fr is smaller than the grid itself (the grid f of its content, the row
   about f of that, f squared), and a box drawn to the row lagged the fields under it, the gap between them three to
   five times the form's own halfway (the check, Oct 15; frames.md §14.5). So the box's foot and the field under it
   move as one, the gap between them the form's own in every frame */
#label .fp.vfp,#label .fp.vfp.open,#label .fp.vfp > .fp-in{transition:none}
#label .fp.vfp{position:relative;display:grid;grid-template-rows:0fr;overflow:hidden;overflow:clip}
#label .fp.vfp.open{grid-template-rows:1fr}
#label .fp.vfp > .fp-in{min-height:0;opacity:1}
#label .fp.vfp::after{content:"";position:absolute;left:1px;right:1px;bottom:0;height:1px;background:var(--hair)}
/* its words as far in from its hairline as a chip's words are from its own (museum.css .chips button), and its first
   row as far from its top as its last from its foot */
#label .fp.vfp .fp-body{margin-top:.45rem;padding:.7rem .55rem;border:1px solid var(--hair);border-bottom:0;font-size:.86rem}
@media (pointer:coarse){#label .fp.vfp .fp-body{padding-left:.7rem;padding-right:.7rem}}
#label .fp.vfp .fp-sets{font-size:.86rem}

/* a phone's room: the panel the head's width and a little more, its words aligned with the head's */
@media (max-width:640px){
  :is(.roomhead,.mapedit) .fp.rfp{left:-10px;right:-10px;width:auto;max-width:none;padding:.55rem 9px .4rem}
  :is(.roomhead,.mapedit) .fp.rfp .fp-body,:is(.roomhead,.mapedit) .fp.rfp .fp-sets,:is(.roomhead,.mapedit) .fp.rfp .fp-ol{font-size:.86rem}
}
/* a phone's panels: closer rows (6 px between, every word still 24 px tall) */
@media (max-width:899.98px){
  :is(.roomhead,.mapedit) .fp.rfp .fp-h{margin-bottom:.15rem}
  .fp .fp-ws,.fp .fp-opts,.fp .fp-sets,.fp .fp-end{row-gap:6px}
  .fp .fp-w::before,.fp .fp-c::before{inset:-3px -.5em}
  .fp .fp-sets{margin-top:.35rem}
  .fp .fp-cs{margin-top:.55rem;row-gap:6px}
  :is(.roomhead,.mapedit) .fp.rfp .fp-low{row-gap:.35rem}
  :is(.roomhead,.mapedit) .fp.rfp .fp-low > .fp-end:only-child{margin-top:.35rem}
  #label .fp.vfp .fp-body{padding-top:.6rem;padding-bottom:.6rem}
}
/* a touch screen's phone panels (frames.js fitGap): the rows --rg apart, the most the panel's room gives,
   and each word's and circle's target half of that above and below it, so a thumb finds one wherever it
   lands and neighbors never overlap. A wide screen, and a mouse, keep the spacing above */
.fp.tt .fp-ws,.fp.tt .fp-opts,.fp.tt .fp-sets,.fp.tt .fp-end,.fp.tt .fp-cs{row-gap:var(--rg,6px)}
.fp.tt .fp-sets,.fp.tt .fp-cs,.fp.tt .fp-end{margin-top:var(--rg,6px)}
.fp.rfp.tt .fp-low{row-gap:var(--rg,6px)}
.fp.rfp.tt .fp-low > .fp-end{margin-top:0}
.fp.rfp.tt .fp-low > .fp-end:only-child{margin-top:var(--rg,6px)}
.fp.tt .fp-w::before,.fp.tt .fp-c::before{inset:calc(var(--rg,6px) / -2) -.5em}
.fp.tt .fp-h{margin-bottom:calc(var(--rg,6px) / 2)}
:is(.roomhead,.mapedit) .fp.rfp.tt{padding-bottom:calc(var(--rg,6px) / 2 + 2px)}
/* in a phone's form, two circles side by side where they fit; their targets' room below them (half the gap) inside
   the part that eases them, taking none of the box's */
#label .fp.vfp.tt .fp-cs{flex-direction:row;flex-wrap:wrap;column-gap:1.4rem}
#label .fp.vfp.tt .fp-cw > .fp-in{padding-bottom:max(5px, var(--rg,6px) / 2);margin-bottom:min(-5px, var(--rg,6px) / -2)}
@media (hover:hover) and (pointer:fine){
  .fl .fl-v:hover,.fp-w:hover{text-decoration-color:currentColor}
  .fp-w:hover,.fp-c:not(.lock):hover{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){.fp,.fp.open,.fp > .fp-in,.fp.open > .fp-in,.fp-w,.fp-c,.fp-c input,.fl .fl-v{transition:none}}