/* Component styles that are clearer as CSS than as utility classes.
   Tokens match the @theme block in index.html.
   Wrapped in Tailwind's components layer so utilities like `hidden` still win. */
@layer theme, base, components, utilities;

@layer components {
  :root {
    --film: #EEF1F3; --sheet: #FFFFFF; --ink: #16212E; --graphite: #5B6672; --rule: #D3D9DF;
    --hi: #FFE14D; --hi-soft: #FFF5BF; --blue: #1F5FA8; --blue-dark: #174A84;
    --flag: #B8430E; --flag-soft: #FDEEE6; --ease: #8A5A1F; --except: #7B3FA0;
    --cond: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
    --header: 48px; --tabs: 0px; --banner: 0px;
  }
  html, body { height: 100%; }
  body { overflow: hidden; }
  .tnum { font-variant-numeric: tabular-nums; }
  .cond { font-family: var(--cond); }

  /* Buttons and fields */
  .btn {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
    border: 1px solid var(--rule); border-radius: 6px; background: var(--sheet); color: var(--ink);
    font: 500 13px/1 "IBM Plex Sans", system-ui, sans-serif; white-space: nowrap; cursor: pointer;
  }
  .btn:hover:not(:disabled) { border-color: #AEB8C2; background: #F7F9FA; }
  .btn:disabled { color: #9AA4AE; cursor: not-allowed; }
  .btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
  .btn-primary:hover:not(:disabled) { background: var(--blue-dark); border-color: var(--blue-dark); }
  .btn-primary:disabled { background: #9DB4CF; border-color: #9DB4CF; color: #fff; }
  .btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
  .btn-link { border: 0; background: none; padding: 0; height: auto; color: var(--blue); font-weight: 500; }
  .btn-link:hover:not(:disabled) { background: none; text-decoration: underline; }
  .icon-btn {
    width: 28px; height: 28px; border-radius: 6px; border: 1px solid transparent; background: none;
    color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer;
  }
  .icon-btn:hover { border-color: var(--rule); background: #F7F9FA; }
  :is(.btn, .icon-btn, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--blue); outline-offset: 2px;
  }
  .field-input {
    width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--rule); border-radius: 6px;
    background: var(--sheet); color: var(--ink); font: 400 13.5px "IBM Plex Sans", system-ui, sans-serif;
  }
  select.field-input { padding-right: 4px; }
  .field-input[aria-invalid="true"] { border-color: var(--flag); background: var(--flag-soft); }
  .field-input:disabled { color: #9AA4AE; background: #F4F6F7; cursor: not-allowed; }
  .field-error { color: var(--flag); font-size: 12.5px; margin-top: 4px; }
  .field-help { color: var(--graphite); font-size: 12.5px; margin-top: 4px; line-height: 1.4; }

  /* Layout: three panes on a desk, one at a time on a phone */
  .workspace {
    height: calc(100vh - var(--banner) - var(--header) - var(--tabs));
    display: grid; grid-template-columns: minmax(320px, 36fr) minmax(320px, 44fr) 380px;
  }
  .pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
  .pane-bar {
    height: 44px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px;
    border-bottom: 1px solid var(--rule); background: var(--sheet);
  }
  .seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 7px; padding: 2px; gap: 2px; }
  .seg button {
    height: 26px; padding: 0 12px; border-radius: 5px; border: 0; background: none; color: var(--graphite);
    font: 500 13px "IBM Plex Sans", system-ui, sans-serif; cursor: pointer;
  }
  .seg button[aria-selected="true"] { background: var(--ink); color: #fff; }
  .mobile-tabs { display: none; }
  @media (max-width: 899px) {
    :root { --tabs: 56px; }
    .workspace { display: block; }
    .pane { display: none; height: 100%; border: 0 !important; }
    .pane[data-active] { display: flex; }
    #pane-side .pane-bar { display: none; }
    .mobile-tabs {
      display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset: auto 0 0 0; height: var(--tabs);
      background: var(--sheet); border-top: 1px solid var(--rule); z-index: 20;
    }
    .mobile-tabs button { border: 0; background: none; font: 500 12.5px "IBM Plex Sans", system-ui, sans-serif; color: var(--graphite); }
    .mobile-tabs button[aria-current="page"] { color: var(--ink); box-shadow: inset 0 3px 0 var(--ink); }
  }

  /* Empty state */
  .empty {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 24px; text-align: center;
  }

  /* Deed page with call highlights. A highlighter, the way people mark up a paper deed. */
  .page-frame { position: relative; margin: 0 auto; box-shadow: 0 0 0 1px var(--rule); background: #fff; }
  .page-frame canvas, .page-frame img { display: block; width: 100%; height: auto; }
  .page-boxes { position: absolute; inset: 0; }
  .page-box {
    position: absolute; border-radius: 2px; background: rgba(255, 225, 77, 0.22); cursor: pointer;
    mix-blend-mode: multiply;
  }
  .page-box:hover { background: rgba(255, 225, 77, 0.42); }
  .page-box.is-flagged { box-shadow: inset 0 -2px 0 rgba(184, 67, 14, 0.75); }
  .page-box.is-selected { background: rgba(255, 214, 10, 0.62); outline: 1.5px solid #C9A200; }

  .transcript {
    white-space: pre-wrap; word-break: break-word; font: 400 14px/1.6 "IBM Plex Sans", system-ui, sans-serif;
    max-width: 72ch; margin: 0 auto;
  }
  .transcript .call { background: rgba(255, 225, 77, 0.25); border-radius: 2px; cursor: pointer; }
  .transcript .call:hover { background: rgba(255, 225, 77, 0.45); }
  .transcript .call.is-selected { background: var(--hi); box-shadow: 0 0 0 2px var(--hi); }
  .transcript .call.is-flagged { text-decoration: underline wavy rgba(184, 67, 14, 0.7); text-underline-offset: 3px; }
  .transcript .page-mark { display: block; color: var(--graphite); font-size: 12px; margin: 14px 0 4px; }

  /* Map */
  .map-tools {
    position: absolute; top: 10px; left: 10px; right: 52px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    pointer-events: none; z-index: 2;
  }
  .map-tools > * { pointer-events: auto; }
  .chip {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 6px;
    background: var(--sheet); border: 1px solid var(--rule); font-size: 13px; cursor: pointer; user-select: none;
  }
  .chip:has(input:disabled) { color: #9AA4AE; cursor: not-allowed; }
  .pick-banner {
    position: absolute; left: 10px; right: 10px; bottom: 34px; z-index: 3; display: flex; gap: 10px; align-items: center;
    padding: 10px 12px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 13.5px; line-height: 1.4;
  }
  .pick-banner .btn { flex: none; }
  .map-status {
    position: absolute; left: 10px; bottom: 34px; z-index: 2; max-width: calc(100% - 130px); padding: 6px 10px;
    border-radius: 6px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--rule); font-size: 13px;
  }
  #pane-map.is-picking #map { cursor: crosshair; }
  .plss-legend {
    position: absolute; top: 84px; right: 10px; z-index: 2; padding: 6px 9px 7px; border-radius: 6px;
    background: rgba(255, 255, 255, 0.94); border: 1px solid var(--rule); font-size: 12px; line-height: 1.35;
  }
  .plss-legend-title { font-weight: 600; color: var(--ink); margin-bottom: 3px; }
  .plss-legend li { display: flex; align-items: center; gap: 6px; color: var(--ink); }
  .legend-dot {
    display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%;
    border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(22, 33, 46, 0.35);
  }
  .plss-popup {
    min-width: 170px; max-width: 260px; padding: 8px 10px; border-radius: 8px; background: var(--sheet);
    border: 1px solid var(--rule); box-shadow: 0 2px 8px rgba(22, 33, 46, 0.18); font-size: 13px; line-height: 1.4;
  }
  .plss-popup-title { font: 600 14px var(--cond); color: var(--ink); }
  .plss-popup-id { color: var(--graphite); font-variant-numeric: tabular-nums; }
  .plss-popup-rely { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
  .local-sheet { background: #FBFCFC; background-image:
    linear-gradient(var(--film) 1px, transparent 1px), linear-gradient(90deg, var(--film) 1px, transparent 1px);
    background-size: 40px 40px; }

  /* Inspector */
  .side { padding: 0; }
  .tract { border-bottom: 1px solid var(--rule); }
  .tract-head { padding: 12px 14px 8px; }
  .tract-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .tract-title h3 { font: 600 15px var(--cond); }
  .role-tag { font-size: 12px; color: var(--graphite); }
  .stats { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin-top: 8px; font-size: 13px; }
  .stats dt { color: var(--graphite); }
  .stats dd { font-variant-numeric: tabular-nums; }
  .stats dd.bad { color: var(--flag); font-weight: 500; }
  .tract-notes { margin: 6px 14px 10px; display: flex; flex-direction: column; gap: 4px; }
  .note { font-size: 12.5px; line-height: 1.4; padding: 6px 8px; border-radius: 6px; background: #F4F6F7; }
  .note.is-check { background: var(--flag-soft); color: #7A2E0A; }

  .calls { list-style: none; margin: 0; padding: 0 0 6px; }
  .call-row {
    display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: baseline;
    padding: 7px 14px; border-left: 3px solid transparent; cursor: pointer;
  }
  .call-row:hover { background: #F6F8F9; }
  .call-row.is-selected { background: var(--hi-soft); border-left-color: #E0B800; }
  .call-num { color: var(--graphite); font: 500 12.5px var(--cond); font-variant-numeric: tabular-nums; }
  .call-main { font: 500 14px var(--cond); font-variant-numeric: tabular-nums; min-width: 0; }
  .call-main .tie { color: var(--graphite); font-weight: 400; }
  .call-len { font: 500 14px var(--cond); font-variant-numeric: tabular-nums; text-align: right; }
  .call-flag { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--flag); margin-left: 6px; vertical-align: middle; }
  .call-edited { font: 400 11.5px "IBM Plex Sans", sans-serif; color: var(--blue); margin-left: 6px; }
  .call-detail { grid-column: 2 / -1; font-size: 13px; line-height: 1.45; color: var(--ink); display: flex; flex-direction: column; gap: 6px; padding-top: 4px; cursor: default; }
  .call-source { color: var(--graphite); }
  .call-flags { display: flex; flex-direction: column; gap: 4px; }

  .edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .edit-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--graphite); }
  .edit-grid .wide { grid-column: 1 / -1; }

  .settings-group { border-bottom: 1px solid var(--rule); }
  .settings-group > summary {
    list-style: none; cursor: pointer; padding: 12px 14px; font: 600 14px "IBM Plex Sans", sans-serif;
    display: flex; justify-content: space-between; align-items: center;
  }
  .settings-group > summary::-webkit-details-marker { display: none; }
  .settings-group > summary::after { content: "+"; color: var(--graphite); font-weight: 400; font-size: 16px; }
  .settings-group[open] > summary::after { content: "\2212"; }
  .settings-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; }
  .field-label { display: block; font-size: 12.5px; font-weight: 500; margin-bottom: 4px; }
  .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .needs {
    font-size: 13px; line-height: 1.45; padding: 10px; border-radius: 6px; background: #F4F6F7;
    display: flex; flex-direction: column; gap: 6px;
  }
  /* Find from deed (locate.js) */
  .locate { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; border-top: 1px solid var(--rule); font-size: 13px; }
  .locate .field-help.mt-0 { margin-top: 0; }
  .locate-group { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 6px; background: #F4F6F7; }
  .locate-status { flex: none; font-size: 11.5px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--rule); color: var(--graphite); }
  .locate-status.is-found { border-color: var(--blue); color: var(--blue); }
  .locate-status.is-confirmed { background: #E3F1EF; border-color: #0F6E70; color: #0B5052; }
  .locate-ref { font-weight: 500; line-height: 1.4; }
  .locate-summary { line-height: 1.4; }
  .locate-edit { display: flex; flex-direction: column; gap: 8px; }
  .locate-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--sheet); }
  .locate-num { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .locate-badge { font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 4px; color: #fff; background: #7A8591; }
  .locate-badge[data-source="blm_corner"] { background: #0F6E70; }
  .locate-badge:is([data-source="opus_share"], [data-source="opus_report"]) { background: var(--blue); }
  .locate-badge[data-source="ngs_datasheet"] { background: #5B3FA0; }
  .locate-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 12.5px; }
  .locate-facts dt { color: var(--graphite); }
  .locate-facts dd { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  .locate-warn { font-size: 12.5px; line-height: 1.4; padding: 6px 8px; border-radius: 5px; border-left: 3px solid var(--rule); background: #F7F9FA; }
  .locate-warn.is-caution { border-left-color: #D99A00; background: #FFF8E6; }
  .locate-warn.is-serious { border-left-color: var(--flag); background: var(--flag-soft); color: #7A2E0A; }
  .locate-more { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--rule); }
  .locate-empty { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 6px; background: var(--sheet); border: 1px dashed var(--rule); }
  .locate-crs { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--rule); }
  .locate-crs-note { font-size: 12.5px; line-height: 1.4; padding: 6px 8px; border-radius: 5px; border-left: 3px solid #D99A00; background: #FFF8E6; }
  .locate-disclaimer { font-size: 13px; line-height: 1.45; padding: 10px; border-radius: 6px; background: #F4F6F7; }

  .form-errors { margin: 12px 14px 0; padding: 10px; border-radius: 6px; background: var(--flag-soft); color: #7A2E0A; font-size: 13px; }

  .notes-list { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
  .kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13px; padding: 4px 14px 14px; }
  .kv dt { color: var(--graphite); }
  .kv dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .side h4 { font: 600 13.5px "IBM Plex Sans", sans-serif; padding: 14px 14px 4px; }

  /* Menus, dialogs, busy, toasts */
  .menu {
    position: absolute; right: 0; top: 36px; z-index: 60; min-width: 200px; padding: 4px; border-radius: 8px;
    background: var(--sheet); border: 1px solid var(--rule); box-shadow: 0 8px 24px rgba(22, 33, 46, 0.14);
  }
  .menu :is(button, a) { display: block; color: inherit; text-decoration: none; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 5px; background: none; font-size: 13.5px; cursor: pointer; }
  .menu :is(button, a):hover, .menu :is(button, a):focus-visible { background: var(--film); }
  .dialog { margin: auto; border: 0; border-radius: 10px; padding: 18px; width: min(420px, calc(100vw - 32px)); color: var(--ink); box-shadow: 0 16px 48px rgba(22, 33, 46, 0.25); }
  #dlg-read { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
  .read-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: min(46dvh, 420px); overflow-y: auto; padding: 2px; }
  .read-thumb { display: flex; flex-direction: column; gap: 2px; }
  .read-thumb > [data-page] { display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 6px; border: 2px solid var(--rule); background: var(--film); text-align: left; cursor: pointer; }
  .read-thumb > [data-page][aria-pressed="true"] { border-color: var(--blue); background: #EAF1FA; }
  .read-thumb > [data-page][aria-pressed="false"] .read-thumb-img { opacity: 0.45; }
  .read-thumb-img { display: block; aspect-ratio: 8.5 / 11; background: var(--sheet); overflow: hidden; }
  .read-thumb-img img { width: 100%; height: 100%; object-fit: contain; }
  .read-thumb-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; }
  .read-check { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--graphite); background: var(--sheet); flex: none; }
  [aria-pressed="true"] .read-check { background: var(--blue); border-color: var(--blue); box-shadow: inset 0 0 0 2px var(--sheet); }
  .read-thumb-view { font-size: 12px; align-self: flex-start; min-height: 28px; }
  .read-preview { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 6px; background: var(--film); }
  .read-preview img { width: 100%; max-height: 60dvh; object-fit: contain; background: var(--sheet); }
  /* Setting tips */
  .field-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
  .field-head .field-label { margin-bottom: 0; }
  .tip-btn { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--rule); background: var(--sheet); color: var(--graphite); font: italic 600 12px/1 Georgia, serif; cursor: pointer; display: inline-grid; place-items: center; }
  .tip-btn:hover, .tip-btn[aria-expanded="true"] { border-color: var(--blue); color: var(--blue); background: #EAF1FA; }
  .field-tip { font-size: 12.5px; line-height: 1.45; color: var(--ink); background: #EAF1FA; border-radius: 5px; padding: 6px 8px; margin: 0 0 6px; }

  /* Demo */
  body.is-demo { --banner: 36px; }
  .demo-banner { height: var(--banner); display: flex; align-items: center; gap: 10px; padding: 0 8px 0 12px; background: var(--ink); color: #fff; font-size: 13px; white-space: nowrap; }
  .demo-banner-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .demo-banner-link { border: 0; background: none; color: #fff; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 0 4px; }
  .demo-banner-cta { height: 26px; padding: 0 10px; font-size: 12.5px; flex: none; }
  @media (max-width: 639px) {
    .demo-banner { gap: 6px; padding: 0 6px 0 10px; font-size: 12px; letter-spacing: -0.01em; }
    .demo-banner-cta { padding: 0 8px; font-size: 12px; }
  }
  .brand-link { color: inherit; text-decoration: none; }
  .brand-link:hover { text-decoration: underline; }

  /* Guided tour */
  .tour { position: fixed; z-index: 45; width: min(340px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 10px; background: var(--sheet); color: var(--ink); box-shadow: 0 16px 48px rgba(22, 33, 46, 0.28); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
  .tour.is-sheet { left: 0 !important; right: 0; top: auto !important; bottom: var(--tabs); width: auto; border-radius: 12px 12px 0 0; padding: 14px 16px calc(12px + env(safe-area-inset-bottom)); }
  .tour-count { font-size: 12px; color: var(--graphite); }
  .tour-title { font-size: 15px; font-weight: 600; }
  .tour-text { font-size: 13.5px; line-height: 1.45; }
  .tour-actions { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
  .tour-target { outline: 3px solid var(--blue) !important; outline-offset: -3px; }
  .dialog::backdrop { background: rgba(22, 33, 46, 0.4); }
  .busy { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(238, 241, 243, 0.7); }
  .busy-card { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 10px; background: var(--sheet); border: 1px solid var(--rule); max-width: 340px; font-size: 14px; }
  .spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--rule); border-top-color: var(--ink); animation: spin 0.8s linear infinite; flex: none; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .toasts { position: fixed; left: 12px; bottom: calc(12px + var(--tabs)); z-index: 50; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 24px)); }
  .toast { padding: 10px 12px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 13.5px; line-height: 1.4; box-shadow: 0 6px 18px rgba(22, 33, 46, 0.2); }
  .toast.is-error { background: #7A2E0A; }
  @media (max-width: 899px) {
    .toasts { top: calc(var(--banner) + var(--header) + 8px); bottom: auto; left: 8px; right: 8px; max-width: none; }
  }
  .menu button:disabled { color: #9AA4AE; cursor: not-allowed; background: none; }
  .menu-left { left: 0; right: auto; }
  .map-tools:has(.menu:not(.hidden)) { z-index: 20; }   /* an open menu covers the legend and popups */
  .menu-hint { display: block; margin-top: 1px; font-size: 12px; line-height: 1.35; color: var(--graphite); max-width: 290px; white-space: normal; }
  .menu button:disabled .menu-hint { color: #9AA4AE; }
  .menu .menu-sub { padding-top: 2px; padding-left: 22px; font-size: 13px; color: var(--blue); }
  .menu [hidden] { display: none; }
  @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
}

/* OpenLayers' own stylesheet isn't layered, so overrides of its controls sit outside the layer too. */
.ol-zoom { top: 10px; left: auto; right: 10px; }
.ol-zoom .ol-zoom-in, .ol-zoom .ol-zoom-out { width: 30px; height: 30px; font-size: 18px; color: var(--ink); background: #fff; }
.ol-scale-line { left: auto; right: 8px; bottom: 30px; background: rgba(22, 33, 46, 0.78); }
.ol-scale-line-inner { color: #fff; border-color: #fff; font: 500 11px "IBM Plex Sans", sans-serif; }
.ol-attribution { font-size: 11px; }