/* 214E17 — house registry. One ink, one paper, one highlighter. */
:root {
  color-scheme: light;
  --ink: #3E1330;          /* plum velvet */
  --paper: #E9E1D3;        /* oat plaster */
  --accent: #DCEB4F;       /* chartreuse highlighter */
  --dim: color-mix(in srgb, var(--ink) 76%, var(--paper));
  --rule: color-mix(in srgb, var(--ink) 30%, var(--paper));
  --tint: color-mix(in srgb, var(--ink) 6%, var(--paper));
  --gutter: 16px;
  --font: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --t-xs: 11px; --t-s: 13px; --t-m: 15px; --t-l: 17px; --t-xl: 20px;
}
@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 900px) { :root { --gutter: 32px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--t-m); line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--ink); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.label { font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.hint { font-size: var(--t-s); color: var(--dim); }
.text-btn { background: none; border: 0; padding: 8px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.btn-ink { min-height: 44px; padding: 0 20px; background: var(--ink); color: var(--paper); border: 0; border-radius: 0; cursor: pointer; font-size: var(--t-m); }
.quiet { background: none; border: 0; padding: 8px 0; color: var(--dim); cursor: pointer; }

/* Highlighter stroke: swipes in from the left on hover/focus */
.hl {
  padding: 3px 9px; margin-inline: -9px;
  background-image: linear-gradient(100deg,
    color-mix(in srgb, var(--accent) 10%, transparent) 0%, var(--accent) 5%,
    color-mix(in srgb, var(--accent) 88%, transparent) 93%, color-mix(in srgb, var(--accent) 25%, transparent) 100%);
  background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
  border-radius: 0.7em 0.25em 0.8em 0.3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 0.22s ease-out;
}
.hl-link { background: none; border: 0; padding: 10px 0; cursor: pointer; }
@media (hover: none) { .hl { background-size: 100% 100%; } }
#suggest-open .hl { background-size: 100% 100%; } /* always highlighted, every screen size */
.hl-link:hover .hl, .hl-link:focus-visible .hl,
.catch-btn:hover .hl, .catch-btn:focus-visible .hl { background-size: 100% 100%; }

/* Form fields: underline only */
.field { display: flex; flex-direction: column; gap: 4px; }
.field input[type="text"], .field input[type="password"], .field textarea, .field select {
  font: inherit; font-size: var(--t-l); min-height: 44px; padding: 6px 0;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
}
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--ink) 45%, var(--paper)); }
.field input[type="file"] { font-size: var(--t-s); padding: 6px 0; }

/* ——— Hero ——— */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); }
/* Photos sit above the top bar and the welcome band: they nick the bar's rule and dip into the band's top edge */
.collage { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.collage .tile { pointer-events: auto; }
.hero > .topbar { z-index: 2; }
.tile {
  position: absolute; overflow: hidden; margin: 0; background: #CFC4B1;
  box-shadow: 0 8px 20px rgba(28, 26, 23, 0.18);
  transform: rotate(var(--r)) scale(1); z-index: 0;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Page-load entrance: photos drop onto the table one by one */
.collage.enter .tile { animation: tile-in 0.62s cubic-bezier(0.2, 0.9, 0.25, 1.15) backwards; animation-delay: var(--delay); }
@keyframes tile-in {
  from { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) + var(--spin))) scale(1.12); box-shadow: 0 30px 50px rgba(28, 26, 23, 0.3); }
  60% { opacity: 1; }
  to { opacity: 1; transform: rotate(var(--r)) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .collage.enter .tile { animation: none; } }
@media (hover: hover) {
  .tile:hover { z-index: 1; transform: rotate(var(--r)) scale(1.05); box-shadow: 0 18px 40px rgba(28, 26, 23, 0.32); }
}

.topbar {
  position: relative; z-index: 5; background: var(--paper);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(6px + env(safe-area-inset-top, 0px)) var(--gutter) 6px;
}
.wordmark { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; }
.topnav { display: flex; align-items: baseline; gap: 6px; font-size: var(--t-l); text-transform: uppercase; }
.topnav a, .topnav button { text-decoration: none; background: none; border: 0; padding: 8px 0; cursor: pointer; text-transform: inherit; }
.clock { display: none; font-size: 14px; font-variant-numeric: tabular-nums; }
@media (min-width: 600px) and (max-width: 899px) { .topbar { padding-block: calc(8px + env(safe-area-inset-top, 0px)) 8px; } }
@media (min-width: 900px) {
  .topbar { display: grid; grid-template-columns: 200px 1fr 200px; padding-block: 12px; }
  .wordmark { font-size: 22px; }
  .topnav { justify-self: center; font-size: 26px; gap: 10px; letter-spacing: -0.01em; }
  .clock { display: block; justify-self: end; }
}

.hero-spacer { flex: 1 0 285px; } /* app.js sets the basis to the canvas gap at this width */

.band {
  position: relative; z-index: 2; background: var(--paper);
  padding: 22px var(--gutter) 8px; display: flex; flex-direction: column; gap: 10px;
}
@media (min-width: 600px) { .band { padding: 28px var(--gutter) 10px; } }
@media (min-width: 900px) { .band { padding: 32px var(--gutter) 12px; } }
.band-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.welcome { font-size: 22px; letter-spacing: -0.01em; }
.band-meta { margin: -4px 0 0; min-height: 29px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-size: var(--t-s); color: var(--dim); }
.typed {
  margin: 0; font-size: 44px; line-height: 0.95; letter-spacing: -0.025em; text-transform: uppercase;
  min-height: calc(44px * 0.95 * 2 + 2px); padding-bottom: 2px; overflow-wrap: anywhere;
}
.cursor { display: inline-block; width: 4px; height: 0.74em; margin-left: 6px; vertical-align: -0.02em; background: var(--ink); }
.cursor.off { opacity: 0; }
@media (min-width: 600px) {
  .welcome { font-size: 24px; }
  .typed { font-size: 64px; min-height: calc(64px * 0.95 + 2px); }
}
@media (min-width: 900px) {
  .welcome { font-size: 28px; }
  .typed { font-size: 88px; min-height: calc(88px * 0.95 + 2px); }
  .cursor { width: 6px; }
}
.band-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cue { text-decoration: none; padding: 10px 0; }
.suggest { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.suggest .field { flex: 2 1 200px; }
.suggest .field-short { flex: 1 1 140px; }
.suggest-buttons { display: flex; align-items: center; gap: 20px; }
.suggest-note { margin: 0; font-size: var(--t-s); min-height: 0; }
.suggest-note:empty { display: none; }
.intro { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 12px; font-size: 14px; line-height: 1.5; }
.intro p { margin: 0; max-width: 56ch; }
@media (min-width: 600px) {
  .intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 8px; font-size: 15px; }
}
@media (min-width: 900px) {
  .intro { column-gap: 40px; font-size: 17px; }
}
/* Housemate mode: page text is edited in place */
.editable { outline: 1px dashed var(--rule); outline-offset: 6px; cursor: text; }
.editable:hover { outline-color: var(--ink); }
.editable:focus { outline: 1px dashed var(--ink); background: var(--tint); }
.intro.editable p, .registry-intro.editable p { white-space: pre-wrap; }
.text-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 10px 0 12px; }
.text-edit-hint { color: var(--dim); }
.text-edit-buttons { display: flex; align-items: center; gap: 20px; }
.text-edit-status { font-size: var(--t-s); }
.text-edit-status:empty { display: none; }

/* ——— Housemate desk ——— */
.desk { padding: 40px var(--gutter) 0; }
@media (min-width: 900px) { .desk { padding-top: 56px; } }
.desk-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.desk-head h2 { margin: 0; font-size: 30px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; }
@media (min-width: 900px) { .desk-head h2 { font-size: 48px; } }
.desk-head p { margin: 0; font-size: var(--t-s); }
.desk h3 { margin: 0; padding: 22px 0 8px; font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.desk .names-h { border-bottom: 1px solid var(--ink); padding-top: 30px; }
.offer-row { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.offer-row .o-item { flex-basis: 100%; font-size: 18px; }
.offer-row .o-where { flex-basis: 100%; color: var(--dim); }
.offer-row .o-contact { overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; user-select: all; }
.offer-row .o-choice { color: var(--dim); }
.o-photos { display: flex; gap: 4px; flex-wrap: wrap; }
.o-photos img, .o-photos .ph { width: 32px; height: 32px; object-fit: cover; display: block; }
.o-status select { font: inherit; font-size: 14px; padding: 2px 0; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: var(--ink); }
.offer-head-row { display: none; }
@media (min-width: 900px) {
  .offer-row, .offer-head-row { display: grid; grid-template-columns: 200px 120px 210px 130px minmax(0, 1fr) 120px 110px; column-gap: 16px; align-items: baseline; }
  .offer-head-row { padding: 0 0 6px; border-bottom: 1px solid var(--ink); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; }
  .offer-row .o-item { font-size: var(--t-m); font-weight: 500; }
}
.name-list { list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .name-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; } }
.name-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--rule); }
.name-list .n-name { font-size: var(--t-l); text-transform: uppercase; letter-spacing: -0.01em; }
.name-list .n-from { font-size: 12px; color: var(--dim); }

/* ——— Registry ——— */
.registry { padding: 48px var(--gutter) 0; display: flex; flex-direction: column; }
@media (min-width: 900px) { .registry { padding-top: 72px; } }
.registry h2 {
  margin: 0; font-size: 30px; font-weight: 400; line-height: 0.9; letter-spacing: -0.035em; text-transform: uppercase;
  padding-bottom: 8px; border-bottom: 1px solid var(--ink);
}
@media (min-width: 900px) { .registry h2 { font-size: 48px; padding-bottom: 12px; } }
.registry-intro { margin: 0; padding: 16px 0 32px; max-width: 54ch; line-height: 1.6; }
.registry-intro p { margin: 0; }
.registry-intro a { text-underline-offset: 3px; }
@media (min-width: 900px) { .registry-intro { padding: 22px 0 48px; } }

.tabs { display: flex; flex-wrap: wrap; gap: 0 16px; border-bottom: 1px solid var(--ink); font-size: 14px; letter-spacing: -0.01em; text-transform: uppercase; }
.tab {
  background: none; border: 0; border-bottom: 4px solid transparent; margin-bottom: -1px;
  padding: 10px 0; min-height: 44px; cursor: pointer; color: var(--dim); text-transform: inherit; letter-spacing: inherit;
}
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tab .count { display: none; }
@media (min-width: 900px) {
  .tabs { gap: 0 48px; font-size: 30px; }
  .tab { padding: 6px 0 10px; }
  .tab .count { display: inline; }
}

.list-head { display: none; }
.list-head-narrow { display: flex; justify-content: space-between; padding: 12px 0 8px; border-bottom: 1px solid var(--ink); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.undo { margin: 0; padding: 12px 0 0; font-size: var(--t-s); display: flex; gap: 12px; align-items: center; }

.rows { list-style: none; margin: 0; padding: 0; }
.row { position: relative; border-bottom: 1px solid var(--rule); color: var(--dim); }
.row.covered { color: var(--dim); }
.row.covered .c-name { text-decoration: line-through; }
.row-main {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px;
  align-items: baseline; padding: 12px 0; background: none; border: 0; text-align: left; cursor: pointer; color: inherit;
}
.row-main .c-name { font-size: var(--t-xl); line-height: 1.2; letter-spacing: -0.01em; }
.row-main .c-status { font-size: 14px; white-space: nowrap; }
.row-main .c-room, .row-main .c-qty, .row-main .c-note { display: none; }
.row-main .c-meta { font-size: var(--t-m); }
.row.covered .row-main .c-meta { grid-column: 1 / span 2; }
.row-main .c-have { font-size: var(--t-m); color: var(--ink); white-space: nowrap; justify-self: end; }
.row.open .row-main .c-have { display: none; }
.row.open .row-main .c-meta { grid-column: 1 / span 2; }
.row-actions { display: none; }
.row.open { color: var(--ink); background: var(--tint); }
.row.open .have-big .hl { background-size: 100% 100%; }

.panel { padding: 0 0 14px; display: flex; flex-direction: column; }
.panel-drawing { position: relative; height: 270px; background: var(--ink); display: flex; align-items: center; justify-content: center; }
.panel-drawing svg, .draw-pop svg { fill: none; stroke: var(--paper); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.draw-caption { position: absolute; left: 12px; right: 12px; bottom: 10px; font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper); }
.have-big { font-size: var(--t-xl); display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--ink); cursor: pointer; text-align: left; color: var(--ink); }
.have-big .hl { margin-inline: -10px; padding: 3px 10px; }
.panel .covered-note { padding-top: 12px; }
.panel .hm-actions { display: flex; gap: 20px; padding-top: 6px; font-size: 14px; }
.draw-pop { display: none; }
.drawing { display: block; max-width: 90%; max-height: 90%; object-fit: contain; }

.row-offers { padding: 0 0 14px; display: flex; flex-direction: column; }
.row-offers .label { padding-bottom: 4px; }
.row-offers div { display: flex; flex-wrap: wrap; gap: 2px 18px; padding: 7px 0; border-top: 1px dashed var(--rule); font-size: 14px; color: var(--ink); }
.row-offers .ro-contact { text-decoration: underline; text-underline-offset: 3px; user-select: all; }
.row-offers .ro-status { color: var(--dim); }
.form-slot:empty { display: none; }
.form-slot { padding: 4px 0 20px; }
.row.has-form .panel { padding-bottom: 18px; }

@media (min-width: 900px) {
  .list-head-narrow { display: none; }
  .list-head {
    display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 3fr) minmax(0, 0.9fr) 140px; column-gap: 16px;
    padding: 16px 0 8px; border-bottom: 1px solid var(--ink); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase;
  }
  .list-summary { text-align: right; text-transform: none; letter-spacing: 0; }
  .row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; column-gap: 16px; }
  .row > .row-main {
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 3fr) minmax(0, 0.9fr); column-gap: 16px; padding: 9px 0; font-size: var(--t-l);
  }
  .row-main .c-name { font-size: var(--t-l); }
  .row-main .c-status { font-size: var(--t-l); }
  .row-main .c-room, .row-main .c-qty { display: block; }
  .row-main .c-note { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .row-main .c-meta, .row-main .c-have, .row.open .row-main .c-have { display: none !important; }
  .row-main .c-name { grid-column: 1; grid-row: 1; } .row-main .c-room { grid-column: 2; grid-row: 1; } .row-main .c-qty { grid-column: 3; grid-row: 1; }
  .row-main .c-note { grid-column: 4; grid-row: 1; } .row-main .c-status { grid-column: 5; grid-row: 1; }
  .row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
  .have { background: none; border: 0; padding: 8px 0; cursor: pointer; white-space: nowrap; color: inherit; }
  .row-actions .text-btn { font-size: var(--t-s); color: var(--ink); }
  .panel, .row-offers, .form-slot { grid-column: 1 / -1; }
  .panel { display: none; }
  .row.open { background: var(--tint); }
  .row::before {
    content: ""; position: absolute; left: -20px; top: 17px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--ink); opacity: 0; transition: opacity 0.12s;
  }
  .row.open::before { opacity: 1; }
  .row:not(.covered):hover .have .hl, .have:focus-visible .hl, .row.open .have .hl { background-size: 100% 100%; }
}
@media (min-width: 900px) and (hover: hover) {
  .row:hover { color: var(--ink); }
  .row:hover::before { opacity: 1; }
  .row.covered:hover { color: var(--dim); }
  .draw-pop {
    display: flex; position: absolute; right: 0; top: 40px; width: 200px; height: 200px; z-index: 3;
    background: var(--ink); align-items: center; justify-content: center; pointer-events: none;
    opacity: 0; transform: translateY(4px); transition: opacity 0.14s, transform 0.14s; visibility: hidden;
  }
  .row:hover .draw-pop { opacity: 1; transform: none; visibility: visible; }
  .row.has-form .draw-pop, .row.editing .draw-pop { display: none; }
.drawing { display: block; max-width: 90%; max-height: 90%; object-fit: contain; }
}

/* Inline edit (housemates) */
.edit-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.edit-row .edit-buttons { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.edit-row label.check { display: flex; align-items: center; gap: 6px; font-size: var(--t-s); min-height: 40px; }
@media (min-width: 900px) {
  .row.editing { display: block; }
  .edit-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 3fr) auto; column-gap: 16px; align-items: end; padding: 10px 0 14px; }
}
.add-item { display: flex; flex-direction: column; gap: 6px; padding: 16px 0 18px; border-bottom: 1px solid var(--ink); }
.add-item .add-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; }
.add-item .field { flex: 1 1 120px; }
.add-item .field-wide { flex: 3 1 200px; }

/* ——— Offer form ——— */
.offer { display: flex; flex-direction: column; gap: 22px; max-width: 560px; color: var(--ink); }
.offer-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.offer-kicker { color: var(--dim); }
.offer-title { font-size: 30px; line-height: 1.05; letter-spacing: -0.01em; }
.thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.thumbs img { width: 64px; height: 64px; object-fit: cover; display: block; }
.choices { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; }
.choices legend { padding: 0 0 6px; }
.choices label { display: flex; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--rule); cursor: pointer; font-size: var(--t-l); }
.choices input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.offer-error { margin: 0; font-size: 14px; }
.offer-error:empty { display: none; }
.offer-buttons { display: flex; align-items: center; gap: 24px; }
.thanks { display: flex; flex-direction: column; gap: 14px; max-width: 560px; border-top: 1px solid var(--ink); padding-top: 14px; }
.thanks h3 { margin: 0; font-size: 36px; font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
.thanks p { margin: 0; max-width: 44ch; }

/* ——— Catch-all + footer ——— */
.catch-all { display: flex; flex-direction: column; gap: 18px; padding-top: 40px; }
.catch-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: 22px; letter-spacing: -0.01em; padding: 0 0 12px; background: none; border: 0; border-bottom: 1px solid var(--ink); text-align: left; cursor: pointer;
}
.catch-cta { white-space: nowrap; }
@media (min-width: 900px) { .catch-btn { font-size: 34px; } }

.footer {
  margin-top: 80px; border-top: 1px solid var(--ink); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  padding: 16px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px)); font-size: 14px;
}
.footer > p { margin: 0; max-width: 60ch; }
.unlock { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.unlock-form { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; }
.unlock-form .field input { width: 160px; }
.unlock-error { flex-basis: 100%; margin: 0; }
.unlock-error:empty { display: none; }
.unlocked { margin: 0; }
@media (max-width: 899px) { .unlock { align-items: flex-start; } }

/* Loading / empty states */
.row-status { padding: 18px 0; color: var(--dim); border-bottom: 1px solid var(--rule); }
.desk-empty { margin: 0; padding: 10px 0; color: var(--dim); border-bottom: 1px solid var(--rule); }
.o-photos a { display: block; }
button[disabled] { opacity: 0.6; cursor: progress; }