/* boat-design-menu.css
   Session index for boat design deliverables.
   Print-friendly, US Letter, 1-inch margins, black-on-white.
*/

:root{
  --text: #111;
  --muted: #444;
  --line: #d6d6d6;
  --bg: #fff;
  --card: #fafafa;
  --card2: #f3f3f3;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.38;
}

a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.95em;
}

.page{
  max-width: 980px;
  margin: 0 auto;
  padding: 1.0rem 1.0rem 1.25rem;
}

.header{
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.85rem;
}

h1{
  margin: 0.25rem 0 0.25rem;
  font-size: 1.65rem;
}

.subtitle{
  margin: 0.15rem 0 0.75rem;
  color: var(--muted);
}

.meta{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  font-size: 0.95rem;
  color: var(--muted);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

@media (min-width: 820px){
  .meta{ grid-template-columns: 1fr 1fr 1fr; }
}

.section{
  margin-top: 1.0rem;
}

h2{
  margin: 0 0 0.55rem;
  font-size: 1.15rem;
}

.doc-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.doc{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  background: var(--card);
}

@media (min-width: 820px){
  .doc{
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

.doc-link{
  font-weight: 700;
  text-decoration-thickness: 1px;
}

.doc-meta{
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.doc-desc{
  margin: 0.5rem 0 0;
  color: var(--muted);
}

.doc-actions{
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn{
  display: inline-block;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  background: var(--card2);
  font-weight: 600;
  font-size: 0.95rem;
}

.btn:hover{
  background: #ededed;
}

.btn-secondary{
  background: #fff;
}

.print-note{
  border-top: 1px solid var(--line);
  padding-top: 0.85rem;
}

.footer{
  margin-top: 1.0rem;
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}

.fineprint{
  color: var(--muted);
  font-size: 0.95rem;
}

/* Print */
@page{
  size: Letter;
  margin: 1in;
}

@media print{
  .page{
    max-width: 6.5in; /* 8.5 - 2*1 */
    margin: 0;
    padding: 0;
  }

  a{ text-decoration: underline; }

  /* Avoid awkward breaks inside cards */
  .doc{ break-inside: avoid; page-break-inside: avoid; }
  .meta{ break-inside: avoid; page-break-inside: avoid; }
}